vue.direactive 是什么?
在vue框架中,我们开发者,时常使用vue自带的指令,比如v-on,v-for,v-modal等等。
同样的,vue提供给开发者一些钩子,用以帮助开发者自定义vue指令,用法和v-on等是一样的。
vue.direactive如何使用?
//在html方面,直接在标签上绑定,但是要添加上v-
<div id="app">
<!--#ff4200如果不用单引号引上的话会被当作data里的变量,数字则无影响-->
<input type="text" id="text" v-color="'#ff4200'">
</div>
//在js方面,通过Vue.direactive实现全局的directive
//这个vue钩子一共有两个参数,
//第一参数是字符串,字符串就是自定义指令的名称,用到标签上的时候,需要添加v-
//第二参数是对象,对象里面有三个比较特殊的方法,bind是其中一个
Vue.directive('color', {
bind: function (el,binding) { //形参名字可随意,但一般是这么写
console.log(binding.name) //color
console.log(binding.value) //#ff4200
}
})
vue.direactive第二个参数中三个重要的方法
//注册一个全局自定义指令
Vue.directive('focus', {
//每当指令绑定到元素上时,会立即执行这个bind函数,只执行一次
bind: function () {
},
//inserted表示元素插入到DOM中时,会执行inserted函数,
//insert方法只触发一次,el表示被绑定的那个标签元素
inserted: function (el) {
el.focus()
},
//当VNode更新时会执行updated,可能触发多次
updated:function(){
}
})
和js行为有关的操作,最好在inserted中执行,和css相关的操作都可在bind中执行
bind inserted updated 三个方法的参数
这三个方法都有两个参数,第一个参数是绑定自定义指令的元素标签本身,第二个参数是binding对象
其中binding对象有三个重要的属性name,value,expresstion
name: 自定义指令的名称是一个字符串,不包括v-
value: 就是自定义指令被赋予的值
expression: 就是自定义指令等于符号后面“”内的所有内容,可以是一个表达式,值的本身是一个字符串
<div id="app">
<!--#ff4200如果不用单引号引上的话会被当作data里的变量,数字则无影响-->
<input type="text" id="text" v-color="1+1">
</div>
Vue.directive('color', {
bind: function (el,binding) { //形参名字可随意,但一般是这么写
console.log(binding.name) //color
console.log(binding.value) //2
console.log(binding.expression) // 1+1
}
})