比如基于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. 如何删除 eclipse debugger 下不用的Java Application

    问题描述:之前写了几个 main 函数 用于测试,现在删除掉了 但是debugger下还存在,看着不爽,想删掉 解决方案: 1.项目--右键 2.删掉就可以了

  2. C#~异步编程再续~async异步方法与同步方法的并行

    返回目录 今天晚上没事写了个测试的代码,又看了看.net的并行编程,两个方法,一个是异步async修饰的,另一个是普通的方法,在控制台程序的Main方法里去调用这两个方法,会有什么结果呢? 首先我们看 ...

  3. adb 命令集合

    1. adb shell 2. adb version 查看 adb 安装版本 3. adb start-server 启动服务 4. adb kill-server 杀死服务 5. adb get- ...

  4. Nikola的5项依赖注入法则

    本篇文章来自对 Nikola Malovic 博客文章 <Inversion Of Control, Single Responsibility Principle and Nikola’s l ...

  5. android: 播放音频

    在 Android 中播放音频文件一般都是使用 MediaPlayer 类来实现的,它对多种格式的音 频文件提供了非常全面的控制方法,从而使得播放音乐的工作变得十分简单.下表列出了 MediaPlay ...

  6. JS-009-屏幕分辨率、浏览器显示区域、元素位置获取

    此文简略讲述有关屏幕大小.元素位置及大小获取. 执行文中脚本时,请先打开 Chrome 浏览器,并切换至开发者工具的控制台,并打开网址:http://www.yixun.com/,文中元素事例为页面元 ...

  7. php文本里 php和html代码谁先执行谁啊

    php文本里 php和html代码谁先执行谁啊 比如php里包含一个html文本,然后html代码里又包含了一个php文本,是按照谁先包含谁被服务器执行吗,即先执行php ,再执行里面的html,然后 ...

  8. HDU 4358 莫队算法+dfs序+离散化

    Boring counting Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 98304/98304 K (Java/Others)T ...

  9. Java 获取*.properties配置文件中的内容 ,常见的两种方法

    import java.io.InputStream; import java.util.Enumeration; import java.util.List; import java.util.Pr ...

  10. jQuery AJAX Call for posting data to ASP.Net page ( not Get but POST)

    the following jQuery AJAX call to an ASP.Net page. $.ajax({ async: true, type: "POST", url ...