指令-自定义全局指令让文本框获取焦点
<label>
搜索关键字:
<!-- 注意:vue中所有指令,在调用时,都可以v-开头-->
<input type="text" class="form-control" v-model="keywords" id="search"v-focus>
</label>
// document.getElementById('search').focus()
//定义全局指令
//参数1:指令的名称,注意,在定义的时候,指令名称前面,不需要加v-前缀
//在调用时候,必须在指令名称前加上v-前缀
//参数2:是对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定阶段执行相关操作
Vue.directive('focus',{
bind:function (el) {//每当指令绑定到元素上的时候,会立即执行切只执行一次
//注意:在每个函数中,第一个参数永远是el,表示被绑定了指令的那个元素是原生的JS对象
//在元素刚绑定指令时候,还没有插入到DOM中去,这时候调用focus方法无效,
// 因为一个元素只有插入DOM后才能获得焦点
// el.focus()
},
inserted:function (el) {//表示元素插入到DOM中时候会执行,只执行一次
el.focus()
// 和JS行为有关的操作,最好在这
},
updated:function () {//当VNode更新的时候会执行updated,可能会触发多次
}
})
//自定义一个设置字体颜色的指令
Vue.directive('color',{
//样式只要通过指令绑定给了元素,不管元素是否插入到页面去,这个元素肯定有了一个内联样式
//将来元素肯定会显示到页面去,这时候,浏览器的渲染引擎必然会解析样式,应用给元素
bind:function (el) {
el.style.color = 'red'
// 和样式相关的操作在此bind
}
})
指令-使用钩子函数的第二个binding参数拿到传递的值
全局指令
<label>
搜索关键字:
<!-- 注意:vue中所有指令,在调用时,都可以v-开头-->
<input type="text" class="form-control" v-model="keywords" id="search"v-focus v-color>
</label>
//自定义一个设置字体颜色的指令
Vue.directive('color',{
//样式只要通过指令绑定给了元素,不管元素是否插入到页面去,这个元素肯定有了一个内联样式
//
bind:function (el) {
el.style.color = 'red'
}
})
<input type="text" class="form-control" v-model="keywords" id="search"v-focus v-color="'blue'">
//自定义一个设置字体颜色的指令
Vue.directive('color',{
//样式只要通过指令绑定给了元素,不管元素是否插入到页面去,这个元素肯定有了一个内联样式
//将来元素肯定会显示到页面去,这时候,浏览器的渲染引擎必然会解析样式,应用给元素
bind:function (el,binding) {
console.log(binding.name)
console.log(binding.value)
console.log(binding.expression)
el.style.color = binding.value
// 和样式相关的操作在此bind
}
})
定义私有指令
<label>
Id:
<input type="text" class="form-control" v-model="id" v-fontweight ="900">
</label>
directives:{
'fontweight':{
bind:function (el,binding) {
el.style.fontWeight = binding.value
}
}
}
简写指令
directives:{
//等同于把代码写到了bind和update中去
'fontsize':function (el,binding) {
el.style.fontsize = parseInt(binding.value) +'px';
}
}