資訊專欄INFORMATION COLUMN
摘要：如今升級后，在自定義指令部分的全部變化了對于一個插件作者來說這簡直是崩潰的毫無兼容可言。本文我就講介紹下一個自定義指令從升級到所走的坑。吐槽我們知道，一個方法最重要的就是傳參，所以自定義指令最需要的也是這點。
前言
吐槽從1.0.X版本就開始使用vue了，應(yīng)該也是vue很早的一批用戶。在我司使用vue這一年多以來（偏向移動端），我發(fā)現(xiàn)vue的插件真的是少之又少，這也是我當(dāng)初一開始想寫v-tap指令插件的初衷。
如今vue升級2.0后，在自定義指令部分的API全部變化了！對于一個插件作者來說這簡直是崩潰的！毫無兼容可言。本文我就講介紹下一個自定義指令從1.0升級到2.0所走的坑。T.T
我們知道，一個方法最重要的就是傳參，所以自定義指令最需要的也是這點。在實現(xiàn)過程中，最大的變化就是這點。
// 1.0版本能實現(xiàn)以下API v-tap="args($index,el,$event)"
// 而2.0版本后完全不能，必須使用對象的形式，如下
v-tap="{ methods:args , index : index, item:item }"
簡直了！完全不知道作者為啥這樣設(shè)計?。ㄟ@太讓我蛋碎了，如果你有更好的姿勢，請盡快告訴我）
好吧，習(xí)慣了這樣不優(yōu)雅的畫風(fēng)之后其實還是可以勉強適應(yīng)的。
踩坑一開始如果你直接實現(xiàn)一個指令不需要傳參你會發(fā)現(xiàn)，vue的指令機制是直接取value得，所以你可以直接寫v-directive="func"這樣執(zhí)行完全沒有問題，在你的自定義指令中只需要 binding.value.call即可
但是如果你寫了 v-directive="func("aa")" 你將會發(fā)現(xiàn)，vue的指令機制把它解析成了expression，正如文檔所說（大寫懵逼）
expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
這又將導(dǎo)致了一個問題，在vue1.0中你可以寫v-directive="a++" 這樣可以直接使data里的變量a++，而在2.0中這會報錯，應(yīng)該都是解析成了expression的原因
在我使用百般姿勢后，最后不得不從了文檔中的最后一種寫法--對象字面量
Vue.directive("demo", function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
那指令插件如何兼容1.0和2.0呢？我是這樣處理的，分別寫兩個對象，判斷版本不同注冊不同指令
var vue1 = { ... };
var vue2 = { ... };
vueTap.install = function (Vue) {
if(Vue.version.substr(0,1) > 1 ) {
isVue2 = true;
}
Vue.directive("tap", isVue2 ? vue2 : vue1);
};
以上就是本次自定義指令升級的兩個大坑！
vue自定義指令實現(xiàn)v-tap插件
github vue-tap
這個月的奶粉錢有沒有，就看你們贊賞不啦了。
Have a nice day
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91139.html
摘要：看看的兼容情況，下圖是上面最新的支持情況兼容情況還是不那么樂觀，不過和安卓陣營已經(jīng)全部支持。我有針對版本做了支持，由于我的指令非常簡單，所以代碼很輕松這樣我的指令就算完成了。只有指令可不行，每次都要自己生成一份格式的圖片，這太不友好了。 本人已經(jīng)使用vue.js半年多了，在做一些Html5頁面的時候發(fā)現(xiàn)很多頁面都是圖片組成的，如果能有效的壓縮圖片的體積那么整個項目體積就會減少很多，這是...
摘要：前言這節(jié)凈是些嘮叨，只想看升級的可直接跳過。在不久之前，如約發(fā)布了版本。正如計劃之初，博客的版本也將升級到。升級之旅首先，升級依賴。那該怎么做哪再一次谷哥和查閱文檔，然而一無所獲。返回的是整個項目路由的實例，它是只讀的。 Troubleshooting of upgrading Vue from 1.0 to 2.0 系列文章: Vue 2.0 升（cai）級（keng）之旅 (本...
摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器，當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導(dǎo)航跳轉(zhuǎn)，，等，一般用于頁面的修改。 談?wù)勀銓VVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；View 代表UI視圖，負責(zé)數(shù)據(jù)的展示；...
摘要：距離正式版發(fā)布又過了兩個月，飛冰迎來了大版本的更新。飛冰是什么詳細的飛冰背景和介紹等，請參照正式版發(fā)布的介紹，這里不再贅述。飛冰帶來了什么支持項目開發(fā)千呼萬喚始出來。其次，已經(jīng)進行全面升級，支持自定義物料源項目識別等功能和相關(guān)邏輯處理。 距離 1.0 正式版發(fā)布又過了兩個月，飛冰迎來了 2.0 大版本的更新。 飛冰 2.0 是什么? 詳細的飛冰背景和介紹等，請參照 1.0 正式版發(fā)布的...
摘要：年前就打算學(xué)習(xí)并總結(jié)一下，但是因為年前工作比較多，所以進展十分緩慢，現(xiàn)在終于學(xué)了一大部分，而且自己在學(xué)習(xí)開發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己踩過的坑總結(jié)一下分享出來。因為在項目中使用了，所以對于也有一個踩坑總結(jié)，點擊鏈接。 年前就打算學(xué)習(xí)并總結(jié)一下vue2.x，但是因為年前工作比較多，所以進展十分緩慢，現(xiàn)在終于學(xué)了一大部分，而且自己在學(xué)習(xí)開發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己...
閱讀 2989·2023-04-25 17:22
閱讀 1554·2019-08-30 15:54
閱讀 1284·2019-08-30 15:53
閱讀 1803·2019-08-30 15:43
閱讀 3058·2019-08-29 12:29
閱讀 1244·2019-08-26 11:37
閱讀 3276·2019-08-23 18:02
閱讀 1619·2019-08-23 14:15
