vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点

<div id="app">
//v-focus 是自定义的
<input type="text" class="form-control" v-focus/>
</div>//script
<script>
//自定定义指令 v-focus
//使用 Vue.directive()定义全局指令
//其中 参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀
//但是 在调用的时候，必须在指令名称前 加上 v- 前缀来进行调用
//参数2 ：是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus',{
bind: function(el){//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//注意 在每个函数中，第一个参数是el，表示被绑定了指令的那个元素，这个el是一个原生的JS对象，所以el有一些js的方法
//在元素 刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用，因为一个元素只有插入DOM之后才能获取焦点
el.focus()//这个方法不合适 虽然不报错 但是没效果，需要插入到DOM中
//和样式相关的操作，一般都可以在bind中执行
},
inserted: function(el){//元素插入到DOM中的时候，会执行inserted函数，触发一次
//和JS行为有关的操作，最好在inserted中去执行，防止js行为不生效
el.focus()
},
updated: function(){//当组件或VNode更新的时候会执行updated，可能会触发多次}
})
//自定义一个私有的过滤器(局部)
var vm = new Vue({
el:'app',
data:{
msg:''
}，
method:{},
filters:{//定义私有过滤器 过滤器有两个条件 过滤器名称和处理函数

}
})
</script>