比如基于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. Session跟SessionFactory的线程安全与非安全

    SessionFactory负责创建session,SessionFactory是线程安全的,多个并发线程可以同时访问一个 SessionFactory 并从中获取Session实例. (Sessio ...

  2. AC6102 开发板千兆以太网UDP传输实验

    AC6102 开发板千兆以太网UDP传输实验 在芯航线AC6102开发板上,设计了一路GMII接口的千兆以太网电路,通过该以太网电路,用户可以将FPGA采集或运算得到的数据传递给其他设备如PC或服务器 ...

  3. nodejs入门 SSH服务器远程部署nodejs2

    服务器安装nodejs昨天好像出了点问题 今天参考的链接是http://nodejs.cn/download/package-manager/#debian-and-ubuntu-based-linu ...

  4. URL和URI的区别和联系

         URI:Universal Resource Identifier,通用资源标识符:   URL:Uniform Resource Locator,统一资源定位符:       其中,URL ...

  5. Echarts图表控件使用总结1(Line,Bar)

    问题篇(详解):http://www.cnblogs.com/hanyinglong/p/4708337.html 1.前言 a.在系统开发过程中可能会使用到图表控件,一个好的图标控件可以使我们的网站 ...

  6. C++用数组实现的静态队列

    #ifndef _STATIC_QUEUE_H_ #define _STATIC_QUEUE_H_ // 静态queue模板,用数组实现的队列,在初始化的时候需要指定长度 template<cl ...

  7. C#常用扩展方法

    /// <summary> /// 转换 /// </summary> public static class ConversionHelper { #region 数据格式转 ...

  8. 业务gis 怎么让别的开发人员不需要懂gis就可以搞开发? (五)

    我们稍微搭建了一个比较简单的图形使用模板,flex端操作这里我就不说了,按大家喜好写,最后javascript部分可以通过jsduck工具生成一个开发文档给业务开发人员,前提注释部分要写好,要公开的注 ...

  9. Sliverlight中PagedCollectionView的使用

    最近项目中一直在和PagedCollectionView这个类打交道.通过它,我们可以以分页的形式自动处理并显示集合中的片段,尤其是和Pager控件配合的时候更能彰显其威力. PagedColecti ...

  10. find your present (2)

    Problem Description In the new year party, everybody will get a "special present".Now it's ...