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