vue自定义指令升级2.0的坑

jokester 发布于2019-08-22 10:43 / 3176人阅读

摘要：如今升级后，在自定义指令部分的全部变化了对于一个插件作者来说这简直是崩溃的毫无兼容可言。本文我就讲介绍下一个自定义指令从升级到所走的坑。吐槽我们知道，一个方法最重要的就是传参，所以自定义指令最需要的也是这点。

前言

从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 大云软件定义存储支持的指令架构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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