本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
我們一直強(qiáng)調(diào)網(wǎng)站建設(shè)、網(wǎng)站制作對(duì)于企業(yè)的重要性,如果您也覺(jué)得重要,那么就需要我們慎重對(duì)待,選擇一個(gè)安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做,要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過(guò)程中的有力推手。專(zhuān)業(yè)網(wǎng)站制作公司不一定是大公司,成都創(chuàng)新互聯(lián)作為專(zhuān)業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。
比如基于jquery的select2插件,在vue下單獨(dú)用有很多問(wèn)題,其實(shí)對(duì)于這類(lèi)插件,可以用vue的自定義指令和組件來(lái)包裝,解決沖突的問(wèn)題。引用官方vue1.0和2.0的兩個(gè)例子,學(xué)習(xí)一下。
例子1.0 例子2.0
大功告成。說(shuō)說(shuō)基于vue1的,對(duì)于下拉單選,用vue官方的例子即可,對(duì)于多選,看下面自己寫(xiě)的,核心是用指令對(duì)象的el、vm等獲取被select2改變后的select下拉列表的相應(yīng)對(duì)象,關(guān)鍵點(diǎn)是用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: '文山二手車(chē)' }, { id: 2, text: '小哥二手車(chē)' } ] } }); setTimeout(function () { vm.market = 0; }, 0); </script> </body>
另外,在插入默認(rèn)值的時(shí)候,注意做一個(gè)異步插入,因?yàn)関ue更新頁(yè)面是異步的,這里做了一個(gè)setTimeout( , 0)。
另外在單頁(yè)里,考慮在SSpa的show的時(shí)候,設(shè)置一狀態(tài)位vm.isInit,表示若是初始化默認(rèn)選項(xiàng),判斷onchange里是否觸發(fā)相關(guān)改變的時(shí)候不重新設(shè)置一些值的清空以及獲取 。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁(yè)標(biāo)題:如何解決vue與傳統(tǒng)jquery插件沖突
標(biāo)題URL:http://bm7419.com/article32/pcdisc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、定制網(wǎng)站、網(wǎng)站改版、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)