<div id="app">
<div class="panel panel-primary">
<div class="panel-body form-inline">
<label>搜索关键字: <input type="text" class="form-control" v-focus /></label>
</div>
</div>
</div>
<script>
//自定义一个全局指令
Vue.directive('focus',{
bind:function(el){ },
inserted:function(el){
el.focus()
},
updated:function(el){ }
})
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
</script>
知识点
bind函数==>和样式相关的操作,一般都可以在 bind 中执行,绑定到元素上的时候,立即执行 bind函数,且只执行一次(注意:在每个函数中,第一个参数永远是 el,表示被绑定了指令的那个元素,这个 el参数是一个元素的原生的JS对象)
inserted函数==>和JS行为有关的操作,最好在 inserted 中 去执行,防止 JS行为不生效,元素插入到DOM中时,执行 inserted函数,只触发一次
updated函数==>当组件 VNode 更新时,执行 updated,可能会触发多次