1.注册全局指令
<div id="app" > <div v-uper="msg"></div> </div>
Vue.directive('uper',{ //uper指令名
inserted:function(el,binding){ //inserted为钩子函数,对于插值操作,在inserted钩子函数中操作。
// 函数的第一个参数el是原生dom对象,、第二个参数binding是用于获
//取当前指令的绑定值(value),表达式(express),指令名(name)
el.innerHTML=binding.value.toUpperCase()
} })
2.创建自定义Vue指令,将dom原生对象打印在控制台上
<div id="app" > <div v-dom>德拉克洞窟</div> //使用指令 </div> Vue.directive('dom',{ //创建全局指令 inserted:function(el,binding){ console.log(el); } })
3.创建全局指令,绑定文本的样式
<div id="app" v-cloak> <div v-color>德拉克洞窟浪费</div> </div> Vue.directive('color',{ bind:function(el,binding){ //对于初始化的操作,在bind钩子函数中进行操作 bind函数只调用一次
el.style.color="red" } })
4.创建局部指令,自动获取焦点
<div id="app" v-cloak> <input type="text" v-focus> //使用局部指令 </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { }, directives: { //创建全局指令
'focus':
{
inserted: function (el, binding)
{
el.focus()
}
} } })