vue自定義指令升級2.0的坑

jokester 發布于2019-08-22 10:43 / 3214人閱讀

摘要：如今升級后，在自定義指令部分的全部變化了對于一個插件作者來說這簡直是崩潰的毫無兼容可言。本文我就講介紹下一個自定義指令從升級到所走的坑。吐槽我們知道，一個方法最重要的就是傳參，所以自定義指令最需要的也是這點。

前言

從1.0.X版本就開始使用vue了，應該也是vue很早的一批用戶。在我司使用vue這一年多以來（偏向移動端），我發現vue的插件真的是少之又少，這也是我當初一開始想寫v-tap指令插件的初衷。

如今vue升級2.0后，在自定義指令部分的API全部變化了！對于一個插件作者來說這簡直是崩潰的！毫無兼容可言。本文我就講介紹下一個自定義指令從1.0升級到2.0所走的坑。T.T

吐槽

我們知道，一個方法最重要的就是傳參，所以自定義指令最需要的也是這點。在實現過程中，最大的變化就是這點。

// 1.0版本能實現以下API
v-tap="args($index,el,$event)"

// 而2.0版本后完全不能，必須使用對象的形式，如下
v-tap="{ methods:args , index : index, item:item }"

簡直了！完全不知道作者為啥這樣設計！（這太讓我蛋碎了，如果你有更好的姿勢，請盡快告訴我）

好吧，習慣了這樣不優雅的畫風之后其實還是可以勉強適應的。

踩坑

一開始如果你直接實現一個指令不需要傳參你會發現，vue的指令機制是直接取value得，所以你可以直接寫v-directive="func"這樣執行完全沒有問題，在你的自定義指令中只需要 binding.value.call即可

但是如果你寫了 v-directive="func("aa")" 你將會發現，vue的指令機制把它解析成了expression，正如文檔所說（大寫懵逼）

expression: 綁定值的字符串形式。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

這又將導致了一個問題，在vue1.0中你可以寫v-directive="a++" 這樣可以直接使data里的變量a++，而在2.0中這會報錯，應該都是解析成了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自定義指令實現v-tap插件

github vue-tap

這個月的奶粉錢有沒有，就看你們贊賞不啦了。

Have a nice day

云服務器 GPU云服務器自定義指令自定義指令實例 vue.js 2.0 cdn 大云軟件定義存儲支持的指令架構

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91139.html

Vuejs webp圖片支持，插件開發過程~

摘要：看看的兼容情況，下圖是上面最新的支持情況兼容情況還是不那么樂觀，不過和安卓陣營已經全部支持。我有針對版本做了支持，由于我的指令非常簡單，所以代碼很輕松這樣我的指令就算完成了。只有指令可不行，每次都要自己生成一份格式的圖片，這太不友好了。本人已經使用vue.js半年多了，在做一些Html5頁面的時候發現很多頁面都是圖片組成的，如果能有效的壓縮圖片的體積那么整個項目體積就會減少很多，這是...

tianyu 2019-08-21 11:23 評論0 收藏0
Vue 2.0 升（cai）級（keng）之旅

摘要：前言這節凈是些嘮叨，只想看升級的可直接跳過。在不久之前，如約發布了版本。正如計劃之初，博客的版本也將升級到。升級之旅首先，升級依賴。那該怎么做哪再一次谷哥和查閱文檔，然而一無所獲。返回的是整個項目路由的實例，它是只讀的。 Troubleshooting of upgrading Vue from 1.0 to 2.0 系列文章: Vue 2.0 升（cai）級（keng）之旅 (本...

lidashuang 2019-08-21 14:16 評論0 收藏0
vue面試

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數據模型，數據和業務邏輯都在Model層中定義；View 代表UI視圖，負責數據的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
飛冰 2.0 正式發布并支持 Vue 項目開發

摘要：距離正式版發布又過了兩個月，飛冰迎來了大版本的更新。飛冰是什么詳細的飛冰背景和介紹等，請參照正式版發布的介紹，這里不再贅述。飛冰帶來了什么支持項目開發千呼萬喚始出來。其次，已經進行全面升級，支持自定義物料源項目識別等功能和相關邏輯處理。距離 1.0 正式版發布又過了兩個月，飛冰迎來了 2.0 大版本的更新。飛冰 2.0 是什么? 詳細的飛冰背景和介紹等，請參照 1.0 正式版發布的...

邱勇 2019-08-22 17:06 評論0 收藏0
Vue2.x踩坑與總結

摘要：年前就打算學習并總結一下，但是因為年前工作比較多，所以進展十分緩慢，現在終于學了一大部分，而且自己在學習開發中也踩了不少坑也總結了不少，所以將自己踩過的坑總結一下分享出來。因為在項目中使用了，所以對于也有一個踩坑總結，點擊鏈接。年前就打算學習并總結一下vue2.x，但是因為年前工作比較多，所以進展十分緩慢，現在終于學了一大部分，而且自己在學習開發中也踩了不少坑也總結了不少，所以將自己...

bovenson 2019-08-21 11:29 評論0 收藏0