解决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命名空间的函数,另一种 ...
随机推荐
- VBA实例收集
1.工作表事件:固定制定区域激活,使之不能选择其他区域. Private Sub Worksheet_SelectionChange(ByVal Target As Range) If Target. ...
- 图论 - Travel
Travel The country frog lives in has nn towns which are conveniently numbered by 1,2,…,n. Among n(n− ...
- 由overflow-x:scroll产生的收获
我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...
- MongoDB数据库安装与连接
- Xml 建议优先使用属性
要点:建议优先选用属性的方式记录数据,除非还需要包容层级式的数据. 优点: 1. 可以完全覆盖关系型数据库的数据格式设计,利于交换. 2. 占用空间小.相当于 JSON 格式,不再有大量重复的节点名后 ...
- JS代码将数据导入Excel
如果在别的浏览器中无法导入,尝试用IE浏览器 function AutomateExcelall(){try { oXL = new ActiveXObject('Excel.Application' ...
- heml设置浏览器版本
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> action类获取se ...
- 关于call和apply函数的区别及用法
call和apply函数是function函数的基本属性,都可以用于更改函数对象和传递参数,是前端工程师常用的函数.具体使用方法请参考以下案列: 例如: 申明函数: var fn = function ...
- 关于learntorank http://qiita.com/rockhopper/items/bb3d46f01df5f6499123
一.数据转换 如何对于训练数据做pairwise的transform,比如你原始数据是要么点击要么不点击,如何对这些样本数据做pairwise的transform? 下面的方法主要是做组合的方法,就是 ...
- Tree菜单 复选框选中控制DEMO
java 对应实体类属定义 public class AccoSysmanResource{ /** * 资源类型 */ private Integer resou ...