解决vue与传统jquery插件冲突
比如基于jquery的select2插件，在vue下单独用有很多问题，其实对于这类插件，可以用vue的自定义指令和组件来包装，解决冲突的问题。引用官方vue1.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插件冲突的更多相关文章
- 解决jQuery插件冲突
项目框架的JS库集成了jQuery,Layout页面(模板页面,类似ASP.NET的母版页)中引用了这些JS,后来使用图表插件(图表插件是基于jQuery的)的时候,项目框架中的JS和图表插件有冲突, ...
- react 或 vue 中引用 jQuery 插件
前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...
- 解决vue路由与锚点冲突
传统的锚点定位会与vue-router中的路由设置存在冲突,解决方法自定义锚点跳转: html: <ul> <li><a href="" @click ...
- 第七十三篇：解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
- vue中使用jquery插件
(1)使用npm下载安装依赖 直接npm install ‘插件名称’ --save 安装依赖 在main.js中引入插件的样式 在页面中直接使用 (2)直接将js文件引入到项目中 先将js文 ...
- vue 中引入Jquery插件
import $ from '../../static/js/jquery.min.js' window.jQuery = $; require('../../static/js/jquery.zoo ...
- vue引入jquery插件
在vue中使用jquery插件 1.引入jquery 第一种方法:全局引入jquery 在webpack.base.conf.js,新增以下代码 plugins: [ new webpack.opti ...
- js最详细的基础，jquery 插件最全的教材
一．Js的this,{},[] this是Javascript语言的一个关键字,随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是调用的函数自己. { } 大括号 ...
- jQuery插件的开发之$.extend(),与$.fn.extend()
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种 ...
随机推荐
- MSP430FR4133/4131/4132单片机破解芯片解密多少钱？
德州仪器MSP430FR4133/4131/4132单片机破解芯片解密多少钱? MSP430FR4133.MSP430FR4131.MSP430FR4132 ####[微信:icpojie]#### ...
- 安装SVN客户端重启电脑之后，右键未出现SVN选项的原因
今天安装SVN客户端明明安装成功,电脑也重启过了,但是就是在右键里找不到SVN,百度了很久,删注册表.建用户组之类的方法都试过了,但是都没有效果. 后来才找到真正的原因,我的安装包是32位的,系统是6 ...
- 1.Linux常用命令
命令名称:ls 格式: ls [-选项] [参数] 注:中括号表示可选 命令路径:/bin/ls 功能描述:显示信息 例如: 选项 -a 显示所有的文件,包括隐藏文件,(以 . 开头的文件) -l ...
- iOS Real Stuff
Ray Wenderlich AppCoda(English) AppCoda(TW) Awesome iOS Code4App代码库 CocoaChina代码库 o ...
- C++11 笔记
5.重载运算符 本质上是一个函数. 函数名为operator(+-*/--) 如果一个运算符是成员函数,其左侧运算对象就绑定到隐式的this参数上. a.拷贝赋值运算符 例如: class Foo { ...
- XV Open Cup named after E.V. Pankratiev. GP of Tatarstan
A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...
- 图片采用base64压缩，可以以字符串的形式传送base64给服务端转存为图片
(function () { var coverImage = document.querySelector('<div id="coverImage">file< ...
- 6个奇葩的（hello,world）C语言版（转）
//下面的所有程序都可以在GCC下编译通过,只有最后一个需要动用C++的编译器用才能编译通过. //程序功能输出 Hello,world! 01.c #define _________ } #de ...
- Android 怎么退出整个应用程序？
方法一: 我们在写android应用程序时,经常会遇到想退出当前Acitivity,或者直接退出应用程序.我之前的一般操作是按返回键,或者直接按home键直接返回,其实这两种操作都没有关闭当前应用程序 ...
- 安卓端网页浏览过程中实时更新title的web实现
$(function () { var scrollTop = 0, //缓存上一次触发scroll的时候的scrollTop值 appendIndex = 0, //由于第23行append这个操作 ...