解决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命名空间的函数,另一种 ...
随机推荐
- filefiter
1.写一个类继承与FileFilter package com.dream.musicplayer; import <a href="http://lib.csdn.net/base/ ...
- 我的Python学习之路 Python的初识与准备工作
注:文笔不好,不喜勿喷,当个段子看看就好 一.初识Python 第一次听到Python是在2016年大概暑假 时候(即将大三),因为对黑客技术的蜜汁热爱(虽然自己并不会),在玄魂大大的公众微信号中看到 ...
- LeetCode 389. Find the Difference
Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...
- SQLServer2005如何批量修改架构名 - wuxiaokaixinguo的专栏
原文地址:http://blog.csdn.net/wuxiaokaixinguo/article/details/8523093 ) BEGIN SET @name='原构架名.' + @name ...
- 从零开始山寨Caffe·捌：IO系统(二)
生产者 双缓冲组与信号量机制 在第陆章中提到了,如何模拟,以及取代根本不存的Q.full()函数. 其本质是:除了为生产者提供一个成品缓冲队列,还提供一个零件缓冲队列. 当我们从外部给定了固定容量的零 ...
- Liquid Exception: Included file '_includes/customizer-variables.html' not found in assets/bootstrap/docs/customize.html 解决方案
执行下面这句话即可 rm -rf source/assets/bootstrap/docs/
- [8.1] Triple Step
A child is running up a staircase with n steps and can hop either 1 step, 2 steps, or 3 steps at a t ...
- Python微信-- 分享接口（分享到朋友圈、朋友、空间）
生成JS-SDK权限验证的签名 获取signature(签名)首先要获得 1.#获得jsapi_ticket 2.#获取当前页面的url #获取当前页面的url url="{}://{}{} ...
- oracle表空间简单学习
1.重命名表空间:alter tablespace 原表空间名 rename to 新表空间名ps:(1)system 和sysaux表空间不能重名(2)如果该表空间中任何一个数据出于脱机状态或者表空 ...
- JAVA实现AES 解密报错Input length must be multiple of 16 when decrypting with padded cipher
加密代码 /**解密 * @param content 待解密内容 * @param password 解密密钥 * @return */ public static byte[] decrypt(b ...