标签：注意 ext color dom console model 自定义属性 rect 属性
自定义指令
默认设置的核心指令( v-model，v-bind，v-for，v-if,v-on等 ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。
自定义指令相当于为元素添加一个自定义属性，只不过是以v-开头的
自定义自定义指令的语法
注意：在vue中使用时候，要加上v-，在定义的时候，要去除v-
自定义指令和自定属性，当元素渲染的时候该属性会被删除，后者不会被删除
当我们为一个dom元素绑定一个自定义指令的时候，自定义指令会为这个元素单独创建一份自定义指令实例化对象，不是共通的。
在自定义指令中我们通过vm属性可以访问到vue的实例化对象，通过vue实例化对象，可以控制vue实例化对象 中容器元素内的其他元素
this.vm.color = ‘red‘ //实例化对象中有color这个属性
定义自定义指令时候，我们通常定义在最前面，这样在实例化的时候才能获取到里面的内容
Vue.direvtive,这个方法接受两个参数
第一个参数是指令名称 v-去掉
第二个参数表示可以是一个对象，也可以是一个函数update函数
当是一个对象时候，有三个方法
Bind：开始绑定的回调函数
在自定义自指令被绑定到元素上执行的一个方法，这个方法在自定义指令生命中只执行一次
作用域是自定义指令实例化对象
参数是没有
Update：内容更新时的回调函数
这个方法每当其内容跟新时候都会调用一次
并且在绑定指令时候也会调用，这次是update的第一次调用，这一次只有一个参数，就是传入的数据，如果没有数据传入，那么他就是undefined
从第二次调用开始，他有两个参数
第一个参数表示新的值
第二个参数表示旧的的值
作用域就是指令实例化对象
当第二个参数是一个函数的时候，就是表示update函数
Unbind 解除绑定时候的回调函数
<div id="app">
<input type="text" v-model="msg">
<div v-hello-directive="msg">hello</div>
</div>
Vue.directive(‘hello-directive‘, {
bind: function () {
//开始绑定的回调函数
},
update: function (newValue, oldValue) {
//内容更新时的回调函数
},
unbind: function () {
//解除绑定时候的回调函数
}
})
var app = new Vue({
el: ‘#app‘,
data: {
msg: ‘‘
}
})
Eg://输入校验
Vue.direvtive,这个方法接受两个参数
第二个参数表示可以是一个对象
<div id="app">
<input type="text" v-model="userName">
<p v-check-username="userName"></p>
</div>
Vue.directive(‘check-username‘, {
bind: function () {},
update: function (newValue, oldValue) {console.log(this)
// 判断userName值在长度只能在4-20个字符之间
// 如果不在，我们在p标签中显示 ’长度只能在4-20个字符之间‘
if (newValue.length > 20 || newValue.length < 4 && newValue.length > 0) {
this.el.innerHTML = ‘长度只能在4-20个字符之间‘;
} else {
this.el.innerHTML = ‘‘;
}
}
})
Vue.direvtive,这个方法接受两个参数
第二个参数是一个函数就是update函数
Vue.directive(‘check-username‘, function (newValue, oldValue) {
if (newValue.length > 20 || newValue.length < 4 && newValue.length > 0) {
this.el.innerHTML = ‘长度只能在4-20个字符之间‘;
} else {
this.el.innerHTML = ‘‘;
}
})
标签：注意 ext color dom console model 自定义属性 rect 属性
原文地址：http://www.cnblogs.com/kelly2017/p/7137489.html
