比如基于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里是否触发相关改变的时候不重新设置一些值的清空以及获取 。

解决vue与传统jquery插件冲突的更多相关文章

  1. 解决jQuery插件冲突

    项目框架的JS库集成了jQuery,Layout页面(模板页面,类似ASP.NET的母版页)中引用了这些JS,后来使用图表插件(图表插件是基于jQuery的)的时候,项目框架中的JS和图表插件有冲突, ...

  2. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  3. js最详细的基础,jquery 插件最全的教材

    一.Js的this,{},[] this是Javascript语言的一个关键字,随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是调用的函数自己. { } 大括号 ...

  4. jQuery插件的开发之$.extend(),与$.fn.extend()

        jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种 ...

  5. jQuery插件综合应用(三)发布文章页面

    一.使用的插件 一个折叠的功能导航,由Akordeon插件实现.Nanoscroller插件与Tagit插件主要用于美化页面.这里只是测试,其实还可以综合使用其它的插件,例如将Akordeon插件换成 ...

  6. jQuery插件的开发

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  7. 解决jQuery插件重名问题

    jQuery第三方插件命名冲突: 1.以某种方法为自己创建的jQuery插件添加命名空间,以免名称冲突.比如:在自己的插件名之前添加某类名称前缀. 2.避免影响全局命名空间.将自己的所有函数调用和变量 ...

  8. 解决jquery版本冲突问题

    解决jQuery1.3.2和1.4.2的冲突.(测试通过) 第一步:在1.4.2的源代码的最后加上一句 var $j4 = jQuery.noConflict(true);//之所以在源码这里加,而不 ...

  9. jQuery库冲突解决办法

    一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...

随机推荐

  1. 【转】c#、wpf 字符串,color,brush之间的转换

    转自:http://www.cnblogs.com/wj-love/archive/2012/09/14/2685281.html 1,将#3C3C3C 赋给background this.selec ...

  2. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  3. Wireshark抓包工具

    首先下载并安装Wireshark软件,最好选择中文版,因为会使你用的更顺手. 安装完毕之后,双击打开Wireshark软件,主界面还是比较清晰明了的,可是怎么用还是稀里糊涂的吧. 点击菜单栏红圈中的选 ...

  4. 使用archlinux作为日常开发机已经半年了,随便写一下

    机器配置 CPU: Intel Core i5-6200U CPU @ 2.8GHz RAM: 6114MiB / 7421MiB Resolution: 1920x2160 在arch下常用的软件 ...

  5. csharp: DataTable Rename ColumnName and remove Column

    enum ChangeNume { /// <summary> /// 简体 /// </summary> gbk=1, /// <summary> /// 英文 ...

  6. ios 文字上下滚动效果Demo

    http://pan.baidu.com/s/1qWj8vBQ

  7. 【codevs1690】开关灯 线段树 区间修改+区间求和(标记)

    [codevs1690]开关灯 2014年2月15日4930 题目描述 Description YYX家门前的街上有N(2<=N<=100000)盏路灯,在晚上六点之前,这些路灯全是关着的 ...

  8. HDU-3790-最短路径

    题目要求先选最短的道路,如果没有最短路可选,即几条道路都相等,再考花费.用Dijkstra更快一些.在选出最短边的同时加上对应的花费就可以了.详细请看代码: #include<iostream& ...

  9. saltstack实战2--远程执行之返回(returner)

    saltstack有3大功能:远程执行,配置管理,云管理 其中远程执行又可分解为:目标,模块,返回  这3个部分. 比如下面语句 [root@master ~]# salt '*' test.ping ...

  10. Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐

    这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法. ASPX: <dx:ASPxGridView ID="ASPxGridViewLin ...