本篇文章主要介绍了如何解决vue与传统jquery插件冲突,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题。引用官方vue1.0和2.0的两个例子,学习一下。
1.0
,例子,
2.0例子
大功告成。说说基于vue1的,对于下拉单选,用vue官方的例子即可,对于多选,看下面自己写的,核心是用指令对象的el, vm等获取被select2改变后的选择下拉列表的相应对象,关键点是用jquery包装原生元素后用.val()获取多选值。
& lt; body>
& lt; div id=癳l”比;
& lt; p>选择:{{选择}}& lt;/p>
& lt;选择v-select3="选择"多个类=癮pp1”比;
& lt;选项值=" https://www.yisu.com/zixun/0 "祝辞default
& lt;选项)=皁选项”:value=" https://www.yisu.com/zixun/o.id "在{{o。文本}}& lt;/option>
& lt;/select>
& lt; p>选择:{{市场}}& lt;/p>
& lt;选择v-select3=笆谐 倍喔隼?癮pp2”比;
& lt;选项值=" https://www.yisu.com/zixun/0 "祝辞default
& lt;选项)=市场“o”: value=" https://www.yisu.com/zixun/o.id "在{{o。文本}}& lt;/option>
& lt;/select>
& lt;/div>
& lt; script>
Vue。指令(select3, {
twoWay:没错,
优先级:1000
参数:“选项”,
绑定:函数(){
var自我=;
$ (this.el)
.select2 ()
内(“改变”,函数(){
self.set ($ (self.el) .val ());
console.log ($ (self.el) .val ());
如果(自我。表达=='选择'){
self.vm。市?[];
}
}）
}，
更新:功能(价值){
$ (this.el) .val(值).trigger(“变化”)
}，
解开:函数(){
$ (this.el) .off () .select2(“毁灭”)
}
}）
var vm=new Vue ({
埃尔:“# el ',
数据:{
选择:0,
市场:”,
选择:[
{id: 1、文本:‘你好’},
{id: 2、文本:‘什么’}
),
市场:(
{id: 1、文本:“文山二手车"},
{id: 2、文本:“小哥二手车'}
］
}
}）;
setTimeout(函数(){
vm。市?0;
}, 0);
& lt;/script>
& lt;/body>
之前
另外,在插入默认值的时候,注意做一个异步插入,因为vue更新页面是异步的,这里做了一个setTimeout (0) .
另外在单页里,考虑在SSpa的显示的时候,设置一状态位vm。isInit,表示若是初始化默认选项,判断onchange里是否触发相关改变的时候不重新设置一些值的清空以及获取。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
