如何解决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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
精通JavaScript的this关键字
May 28 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
python 常见的反爬虫策略
2020/09/27 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
Ruby如何创建一个线程
2013/03/10 面试题
大学生职业生涯规划书范文
2014/01/04 职场文书
怎样写演讲稿
2014/01/04 职场文书
党支部综合考察材料
2014/05/19 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
python库sklearn常用操作
2021/08/23 Python