比如基于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. js最详细的基础,jquery 插件最全的教材

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

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

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

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

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

  5. jQuery插件的开发

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

  6. 解决jQuery插件重名问题

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

  7. 解决jquery版本冲突问题

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

  8. jQuery库冲突解决办法

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

  9. jQuery插件中文乱码解决办法

    修改jQuery插件源代码的时候,中文字符有时候会显示乱码,通常这个插件是老外写的,默认文件的编码格式ANSI格式,源代码写中文字符的时候就会显示乱码,解决方法就是将文件编码格式换成UTF-8格式 保 ...

随机推荐

  1. 乌版图 read-only file system

    今天在启动虚拟机的时候,运行命令svn up的时候,提示lock,并且read-only file system,这个....我是小白啊,怎么办?前辈在专心写代码,不好打扰,果断找度娘啊 于是乎,折腾 ...

  2. 并发编程 01—— ThreadLocal

    Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...

  3. Hadoop安装及配置

    一.系统及软件环境 1.操作系统 CentOS release 6.5 (Final) 内核版本:2.6.32-431.el6.x86_64 master.fansik.com:192.168.83. ...

  4. Getting Started With Hazelcast 读书笔记(第一章)

    第一章:数据集群的演化与 早期的服务器架构 显然,应用是可扩展的,但是由于是集中式服务器,随着数据库性能达到极限,再想扩展就变得极端困难,于是出现了缓存.    缓存显然再次提升了可扩展性,减轻了数据 ...

  5. POJ3666Making the Grade[DP 离散化 LIS相关]

    Making the Grade Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6445   Accepted: 2994 ...

  6. 随机获取数据库中的某一条数据(基于yii2框架开发)

    注意: 使用PHP函数array_rand()得到的是这个数组中的那个值相对应的下标键值,需要配合原来的数组进行,例如: $rand_keys = array_rand($ids,1); $id = ...

  7. fifter常见的运用场景

    没配置过滤器 package servlet; import java.io.IOException; import javax.servlet.ServletException; import ja ...

  8. 如何重置CentOS 7的Root密码?设置CentOS 7的Root密码的方法与步骤

  9. 学习笔记--(平衡树)splay

    坑爹的splay,毁我青春,耗我钱财,颓我精力 是一种用于保存有序集合的简单高效的数据结构.伸展树实质上是一个二叉查找树.允许查找,插入,删除,删除最小,删除最大,分割,合并等许多操作,这些操作的时间 ...

  10. 160921、React入门教程第一课--从零开始构建项目

    工欲善其事必先利其器,现在的node环境下,有太多好用的工具能够帮助我们更好的开发和维护管理项目. 我本人不建议什么功能都自己写,我比较喜欢代码复用.只要能找到npm包来实现的功能,坚决不自己敲代码. ...