解决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命名空间的函数,另一种 ...
随机推荐
- 多栏多列布局（display:flex）
display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...
- 如何使用IconFont字体图标代替网页图片？
一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...
- [spring源码学习]二、IOC源码——配置文件读取
一.环境准备 对于学习源码来讲,拿到一大堆的代码,脑袋里肯定是嗡嗡的,所以从代码实例进行跟踪调试未尝不是一种好的办法,此处,我们准备了一个小例子: package com.zjl; public cl ...
- jQuery缓存数据
很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> < ...
- 关于php-fpm子进程达到上限并且浏览器访问显示504错误
今天上班遇到一个非常奇怪的事情,公司监控服务器之前都是在正常运行,使用nginx+php-fpm,并且监控服务器上部署这其他部门在使用的几个站点,从早上上班开始发现监控显示页面打不开,各种查找原因,最 ...
- BZOJ4455: [Zjoi2016]小星星
Description 小Y是一个心灵手巧的女孩子,她喜欢手工制作一些小饰品.她有n颗小星星,用m条彩色的细线串了起来,每条细 线连着两颗小星星.有一天她发现,她的饰品被破坏了,很多细线都被拆掉了.这 ...
- 让/etc/profile文件修改后立即生效
方法1： 让/etc/profile文件修改后立即生效 ,可以使用如下命令: # . /etc/profile 注意: . 和 /etc/profile 有空格 方法2： 让/etc/profile ...
- jQuery extend扩展String原型
jQuery.extend(String.prototype, { isPositiveInteger:function(){ return (new RegExp(/^[1-9]\d*$/).tes ...
- 个人查阅资料-Sql语句
SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...
- python读取文本文件
1. 读取文本文件 代码: f = open('test.txt', 'r') print f.read() f.seek(0) print f.read(14) f.seek(0) print f. ...