vue指令

全局指令（获取焦点）

HTML

?

1	<label>搜索关键字: <input type="text" class="form-control" v-focus/></label>

js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 定义全局的指令  定义时不用写 v- 前缀，但是调用时需要写 v- 前缀 // 参数1：指令的名称，名称前不需要加 v- // 参数2：是一个对象，ta身上有一些指令先关的函数，这些函数可以在特定的阶段，执行相关的操作      Vue.directive('focus',{        inserted:function(el){ //       在每个函数中，第一个参数 永远是el，表示被绑定了指令的那个元素，这个el参数是一个原型的js对象 //       和js行为相关的操作，最好使用inserted函数（一个元素只有插入到DOM之后，才能获取焦点）          el.focus()        }      });          var vm = new Vue({        el:"#app",        data:{},        methods:{}      })

　　

全局指令（改变样式）

HTML

?

1	<label>搜索关键字: <input type="text" class="form-control" v-color/></label>

js

?

1 2 3 4 5 6

Vue.directive('color',{    bind:function(el){ //   设置样式时建议使用      el.style.color = "red"    } });

全局指令（自定义改变样式）

HTML

?

1	<label>搜索关键字: <input type="text" class="form-control" v-color="'gold'"/></label>

js

?

1 2 3 4 5

Vue.directive('color',{    bind:function(el,binding){      el.style.color = binding.value    } });

私有指令（自定义改变样式）

HTML

?

1	<p v-color="'cyan'">{{ msg }}</p>

js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var vm = new Vue({    el:"#app",    data:{       msg:"私有的内部可以有多个指令私有的内部可以有多个指令私有的内部可以有多个指令私有的内部可以有多个指令"    },    methods:{},    directives:{       'color':{ //       color是样式哈，跟样式有关          bind:function(el,binding){            el.style.color = binding.value          }        }    } })

指令函数的简写

大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其他的钩子函数，可以这样写：

HTML

?

1	<p v-color="'cyan'" v-fontsize="30">{{ msg }}</p>

js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var vm = new Vue({     el:"#app",     data:{       msg:"私有的内部可以有多个指令私有的内部可以有多个指令私有的内部可以有多个指令私有的内部可以有多个指令"     },     methods:{}, //    私有的内部可以有多个指令       directives:{ //        这个function等同于把代码写到bind和update里去           'fontsize':function(el,binding){               el.style.fontSize = parseInt(binding.value) + 'px'           }       } })