Vue学习系列 -- 自定义指令
Posted 躬匠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习系列 -- 自定义指令相关的知识，希望对你有一定的参考价值。
前面的章节我们先后学习了v-on、v-bind、v-model、v-link等内置指令，今天我们就来学习一下如何创建自定义指令。
自定义指令也是先注册后使用，其注册和组件的注册很类似，也分为全局注册和局部注册。只是注册组件时是使用的component关键字，而注册指令时要使用directive关键字。
全局注册
Vue.directive('focus',
//指令内容
);局部注册
new Vue(
el : "#app1", //指定绑定的DOM元素
directives :
//指令内容
)OK，说过了指令的大致内容，具体指令的内容是什么样呢？
其实，自定义指令的选项是由几个钩子函数组成的，每个都是可选的。
- bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时只执行一次的初始化操作；
- insterted：被绑定的元素在插入父节点时调用
- update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
- unbind：只调用一次，指令与元素解绑时调用；
上面的内容可能太理论，下面我们还是采用一个小的demo来学习一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learning Vue.js</title>
</head>
<body>
<div id="app1">
<input type="text" name="username" v-focus:args.a.b="message" v-bindd></input>
</div>
</body>
<!--这里是以CDN引入的方式加载的vue.js-->
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue(
el : "#app1", //指定绑定的DOM元素
directives :
bindd :
bind : function ()
alert('this is bind function');
,
,
focus:
inserted: function (el,binding,node)
console.log(binding);
el.focus();
,
data :
message : "foucs value"
)
</script>
</html>上面的代码演示了在输入框bind和inserted的时候触发绑定的事件：页面会先弹出一个框，之后input框获得焦点；
上面的demo比较简单，其实每个钩子函数都有几个参数可用，比如我们上面用到的el。其他参数以及含义如下
- el：指令所绑定的元素，可以用来直接操作DOM
- binding：具体的对象
- vnode：编译生成的虚拟节点
binding对象又有一下属性：
- name：去除v-的指令名称
- value：指令绑定的值，如v-focus="name"，则value的值为name
- args：传递给指令的参数，如v-focus:timeout，则args的值为timeout
通过上面的console.log日志打印出的binding对象信息如下：
以上是关于Vue学习系列 -- 自定义指令的主要内容，如果未能解决你的问题，请参考以下文章