如何解决vue与传统jquery插件冲突


Posted in Javascript onMarch 20, 2017

本篇文章主要介绍了如何解决vue与传统jquery插件冲突,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

比如基于jquery的select2插件,在vue下单独用有很多问题,其实对于这类插件,可以用vue的自定义指令和组件来包装,解决冲突的问题。引用官方vue1.0和2.0的两个例子,学习一下。

 例子1.0  例子2.0

大功告成。说说基于vue1的,对于下拉单选,用vue官方的例子即可,对于多选,看下面自己写的,核心是用指令对象的el、vm等获取被select2改变后的select下拉列表的相应对象,关键点是用jquery包装原生元素后用.val()获取多选值。

<body>
  <div id="el">
   <p>Selected: {{selected}}</p>
   <select v-select3="selected" multiple class="app1" >
    <option value="0">default</option>
    <option v-for="o in options" :value="o.id">{{ o.text }}</option>
   </select>
    
    <p>Selected: {{market}}</p>
   <select v-select3="market" multiple class="app2" >
    <option value="0">default</option>
    <option v-for="o in markets" :value="o.id">{{ o.text }}</option>
   </select>
  </div>
  <script>
    Vue.directive('select3', {
     twoWay: true,
     priority: 1000,

     params: ['options'],
      
     bind: function () {
      var self = this;
      $(this.el)
       .select2()
       .on('change', function () {
        self.set($(self.el).val());
        console.log($(self.el).val());
        if ( self.expression == 'selected') {
          self.vm.market = [];
        }

       })
     },
     update: function (value) {
      
      $(this.el).val(value).trigger('change')
     },
     unbind: function () {
      $(this.el).off().select2('destroy')
     }
    })

    var vm = new Vue({
     el: '#el',
     data: {
      selected: 0,
      market: '',
      options: [
       { id: 1, text: 'hello' },
       { id: 2, text: 'what' }
      ],
      markets: [
        { id: 1, text: '文山二手车' },
        { id: 2, text: '小哥二手车' }
      ]
     }
    });
    setTimeout(function () {
     vm.market = 0;
    }, 0);
  </script>
</body>

另外,在插入默认值的时候,注意做一个异步插入,因为vue更新页面是异步的,这里做了一个setTimeout( , 0)。

另外在单页里,考虑在SSpa的show的时候,设置一状态位vm.isInit,表示若是初始化默认选项,判断onchange里是否触发相关改变的时候不重新设置一些值的清空以及获取 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 #Javascript
Vue插件写、用详解(附demo)
Mar 20 #Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 #Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 #Javascript
vue.js事件处理器是什么
Mar 20 #Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 #Javascript
Vue.js基础学习之class与样式绑定
Mar 20 #Javascript
You might like
php木马webshell扫描器代码
2012/01/25 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
如何提高数据访问速度
2016/12/26 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python生成随机MAC地址
2015/03/10 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
煤矿班组长的职责
2013/12/25 职场文书
房屋租赁协议书
2014/04/10 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
计划生育目标责任书
2015/05/09 职场文书
感恩的心主题班会
2015/08/12 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android