Vue自定义指令写法
原文链接: The Power of Custom Directives in Vue
当你最初学习JavaScript框架的时候, 有点像一个小孩在一个糖果商店里面. 你接受一切对于你来说可用的东西, 它会让我们的开发变得更简单. 尽管如此, 我们都有一个经验: 框架不是万能的, 不可能全面覆盖各种各样的情况.
令人兴奋的是, Vue的功能令人难以置信的丰富. 尽管有可能有些特殊情况没有被Vue框架本身所覆盖, 但是你可以非常快速轻松的创建自定义指令.
什么是指令?
我曾经在我的Vue.js入门里面写过一篇关于指令的文章, 现在不妨让我们回顾一下:
指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用.
如果你正在使用Vue(或者Angular), 你可能已经很熟悉其中的一些指令, 如: v-if, v-else等等. 我们将从了解一些基础开始, 但是如果你更愿意直接看例子, 请直接往下滚动. 这些例子也能很好的让你理解这些概念.
以下是一些指令的使用方法, 以及对应的例子片段. 这些例子不是规定性的, 它们只是一些用例. 这里的"例子"实际上是"指令".
v-example: 这将实例化一个指令, 但不接受任何参数. 虽然不带参数的指令, 在使用的过程中并不是很灵活, 但是你仍然可以通过这种类型的指令对DOM元素做一些操作.
v-example="value": 这将传递一个值给指令, 并且该指令根据该值计算出要做的操作.
I will show up if stateExample is true
v-example="'string'": 这将让你把'string'作为一个表达式.
v-example:arg="value": 这允许我们传入一个参数给指令. 下面的例子中, 我们绑定到一个类, 将其样式化为一个对象, 单独存储.
v-example:arg.modifier="value": 这允许我们使用修饰语. 下面的例子中, 允许我们在点击事件时, 调用preventDefault().
领悟自定义指令
既然我们已经大致过了一遍所有的我们所用过的指令类型方法, 让我们想一想我们如何通过自己编写的自定义指令来实现它们? 使用自定义指令的一个很好的例子是滚动事件, 让我们看看如何实现它.
首先, 最基本的是如何创建一个全局的指令. (是的, 它什么也不做.) 仅仅是创建了一个指令.
Vue.directive('tack');
HTML:
This element has a directive on it
我们有几个可用的钩子, 每个钩子可以选择一些参数. 钩子如下:
- bind: 一旦指令附加到元素时触发
- inserted: 一旦元素被添加到父元素时触发
- update: 每当元素本身更新(但是子元素还未更新)时触发
- componentUpdate: 每单组件和子组件被更新时触发
- unbind: 一旦指令被移除时触发
就个人而言,
bind
和
update
也许是这五个里面最有用的两个钩子了.
每个钩子都有el, binding, 和vnode参数可用. update和componentUpdated钩子还暴露了oldVnode, 以区分传递的旧值和较新的值.
el, 跟你所期待的一样, 就是所绑定的元素. binding是一个保护传入钩子的参数的对象. 有很多可用的参数, 包括name, value, oldValue, expression, arguments, arg及修饰语. vnode有一个更不寻常的用例, 它可用于你需要直接引用到虚拟DOM中的节点. binding和vnode都应该被视为只读.
绑定一个自定义指令
既然我们已经知道了这一点, 就可以开始研究如何在实际中使用一个自定义指令. 让我们完善刚才所创建的第一个指令, 让它变得有用:
Vue.directive('tack', {
bind(el, binding, vnode) {
el.style.position = 'fixed'
}
});
在HTML元素中:
I will now be tacked onto the page
毫无疑问, 它完全可以按照我们所希望的工作. 但是它还不够灵活, 如果我们可以传入一个值, 然后直接更新或者重用这个指令就好了. 例如, 我们想为这个元素指定一个值, 表示这个元素离顶部多远(多少个像素), 我们可以这样写(在CODEPEN上查看):
// JS
Vue.directive('tack', {
bind(el, binding, vnode){
el.style.position = 'fixed';
el.style.top = binding.value + 'px';
}
});
// HTML
Scroll down the page
Stick me 70px from the top of the page
假设我们想要区分从顶部或者左侧偏移70px, 我们可以通过传递一个参数来做到这一点(在CODEPEN上查看):
// JS
Vue.directive('tack', {
bind(el, binding, vnode) {
el.style.position = 'fixed';
const s = (binding.arg === 'left' ? 'left' : 'top');
el.style[s] = binding.value + 'px';
}
});
// HTML
I'll now be offset from the left instead of the top
当然, 你可以同时传入不止一个值. 你可以像使用标准指令一样简单的使用自定义指令(在CODEPEN上查看):
// JS
Vue.directive('tack', {
bind(el, binding, vnode) {
el.style.position = 'fixed';
el.style.top = binding.value.top + 'px';
el.style.left = binding.value.left + 'px';
}
});
// HTML
Stick me 40px from the top of the page and 100px from the left of the page
基于我们的自定义指令, 我们可以创建和修改方法, 从而创建更为复杂的自定义指令. 这里, 我们将做一个waypoints-like例子, 用少量的代码实现特定滚动事件触发的动画效果(在CODEPEN上查看):
// JS
Vue.directive('scroll', {
inserted: function(el, binding) {
let f = function(evt) {
if(binding.value(evt, el)) {
window.removeEventListener('scroll', f);
}
};
window.addEventListener('scroll', f);
}
});
// main app
new Vue({
el: "#app",
methods: {
handleScroll: function(evt, el) {
if(window.scrollY > 50) {
TweenMax.to(el, 1.5, {
y: -10,
opacity: 1,
ease: Sine.easeOut
});
}
return window.scrollY > 100;
}
}
});
// HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.
为了让大家看得更清楚, 在这个代码片段中, 我们尽可能的保证它的简单易读. 在实际的APP中, 你可以构建非常友好的, 并且非常灵活的, 适合整个团队使用的自定义指令.
在实际的构建中, 我会将指令代码放在"main.js"文件中, 该文件位于"src"目录的根目录下(如果你使用的是Vue-cli构建工具), 那么"App.vue"以及组件目录中的所有的.vue文件都可以访问它. 当然, 还要其他方法可以使用它, 但是我发现对于整个应用程序来说, 这是最灵活的实现方式.