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

需求：当我们进入某个页面，页面中的第一个input会自动获得焦点 光标闪烁，代表可输入

<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中
　　　　},
　　　　inserted: function(el){//元素插入到DOM中的时候，会执行inserted函数，触发一次
　　　　　　
　　　　　　el.focus()
　　　　},
　　　　updated: function(){//当组件或VNode更新的时候会执行updated，可能会触发多次

　　　　}
　　})

　　//自定义一个私有的过滤器(局部)
　　var vm = new Vue({
　　　　el:'app',
　　　　data:{
　　　　　　msg:''
　　　　}，
　　　　method:{},
　　　　filters:{//定义私有过滤器 过滤器有两个条件 过滤器名称和处理函数
　　　　　　
　　　　}
　　})
</script>

 

转载于:https://www.cnblogs.com/xuchao0506/p/10853587.html