vue2.0 之 directive指令 ，自定义
指令
一、定义：
指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用.
五个钩子函数：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次， 指令与元素解绑时调用。
各函数都有参数，以下是官方提供的几个参数：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。
以下是一些指令的使用方法, 以及对应的例子片段.
1、v-xxx
这将实例化一个指令, 但不接受任何参数. 可以通过这种类型的指令对DOM元素做一些操作.
2、v-xxx="value"
这将传递一个值给指令, 并且该指令根据该值计算出要做的操作.
<div v-if="stateExample">I will show up if stateExample is true</div>
3、v-xxx="'string'"
这将把'string'作为一个表达式.
<p v-html="'<strong>this is an example of a string in some text</strong>'"></p>
4、v-xxx:arg="value"
这允许我们传入一个参数给指令. 下面的例子中, 绑定到一个类, 将其样式化为一个对象, 单独存储.
<div v-bind:class="someClassObject"></div>
5、v-example:arg.modifier="value"
使用修饰语. 下面的例子中, 允许在点击事件时, 调用preventDefault().
<button v-on:submit.prevent="onSubmit"></button>
二、注册
指令跟组件一样需要注册才能使用，同样有两种方式，
1）全局注册:
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册（传入一个简单的指令函数）
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')2）局部注册：
new Vue({
directives:{
dirName1:{
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
}，
dirName2:{
//定义指令，同理
}
}
});
// 注册（传入一个简单的指令函数）
new Vue({
directives:{
dirName1: function () {}，
dirName2: function () {}
}
});三、自定义指令
1、对象字面量
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})2、传参 调用方法
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@1.4.0/lib/index.js"></script>
<style>
@import url("https://unpkg.com/element-ui@1.4.0/lib/theme-default/index.css");
</style>
<style>
*{
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div >
<div v-test="fn">my-directive</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
fn () {
console.log('test')
console.log(this) // vue实例
}
},
directives: {
'test': {
bind: function (el, binding) {
// console.log(el, this, binding.value) // this->window
binding.value.call(el);
// 同样结果
// var func = binding.value;
// func(); // 调用了fn方法
}
}
}
})
</script>
<style>
</style>3、传参 调用方法
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>vue API</title>
<style>
[v-cloak] { display: none; }
input { border: 1px solid #eee; }
</style>
</head>
<body>
<div v-cloak>
<div v-test="{methodsF: fail1, methodsS: succ1, input_value: value}">
<span>{{value}}</span>
<input type="text" v-model="value">
</div>
<div v-test="{methodsF: fail2, methodsS: succ2, input_value: value2}">
<span>{{value2}}</span>
<input type="text" v-model="value2">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script>
Vue.directive('test', {
bind: function(el, binding) { // el是绑定指令的元素
var value = binding.value; // 传递给指令的值
console.log(value)
el.handlerFail = function () { // This directive.handler
value.methodsF.call(this);
};
el.handlerSucc = function () { // This directive.handler this-->el, value.methodsS
value.methodsS.call(this);
};
el.getElementsByTagName('input')[0].addEventListener('blur', function () {
checkout(el.getElementsByTagName('input')[0].value);
});
function checkout (value) {
var filter = /^1[358]\d{9}$/;
if (!filter.test(value)) {
el.handlerFail()
}else{
el.handlerSucc()
}
}
}
})
var demo = new Vue({
el: '#test',
data: function() {
return {
value: '',
value2: ''
}
},
methods: {
fail1: function() {
// alert('触发外部fn')
console.log(this)
console.log('手机号码格式不正确！')
},
succ1: function() {
// alert('触发外部fn')
console.log('1格式正确！')
},
fail2: function() {
// alert('触发外部fn')
console.log('手机2号码格式不正确！')
},
succ2: function() {
// alert('触发外部fn')
console.log('2格式正确！')
}
}
});
</script>
</body>
</html>