<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 1.导入vue的包 --> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-color="'blue'"/> <input type="text" v-focus/> <h3 v-fontWeight>{{msg}}</h3> </div> <script> //自定义指令 Vue.directive()定义全局指令 //其中:参数1,指令的名称,在定义的时候,不用加v-前缀 但是在调用的时候需要添加v-前缀。 //参数2:是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的函数。 Vue.directive('focus', { bind:function(el){//每当指令绑定到元素的时候,会立即执行这个bing函数,只执行一次 //注意:在每个函数中,第一个参数永远是el,表示被绑定了指令的那个元素,是一个原生js对象 //在元素刚绑定课指令的时候,还没有插入到DOM中去,这时候调用focus方法没有作用 //因为,一个元素,只有插入到DOM之后,才能获取焦点 }, inserted:function(el){//表示元素插入到dom中的时候,会执行这个函数 【触发一次】 el.focus(); }, updated:function(el){//当vNode(组件)更新的时候,会执行update,可能会触发多次 } }) Vue.directive("color",{ bind:function(el,binding){//第二个参数binding,binding具体忘记了请看vue官网 //和样式相关的操作,一般都可以在bind执行 el.style.color=binding.value}, inserted:function(el){//和js行为有关的操作,最好放在inserted中去执行,放在bind不生效 }, updated:function(el){} }) var vm=new Vue({ el:"#app", data: { msg:"hello" }, //自定义私有指令 记住 私有指令都带s directives: { //入了一晚上坑,此处命名不能大写,不能大写,!!!!! fontweight: { bind:function(el){console.log(el)}, } } }) </script> </body> </html>
加油,一点一点学习,虽然忘记的很快,但是还是要把经常用的努力记住