1 全局注册
需求: 定义color指令-传入一个颜色, 给标签设置文字颜色
main.js定义处修改一下
// 目标: 自定义指令传值 Vue.directive('color', { inserted(el, binding) { el.style.color = binding.value }, update(el, binding) { el.style.color = binding.value } })
<p v-color="colorStr" @click="changeColor">修改文字颜色</p> <script> data() { return { theColor: "red", }; }, methods: { changeColor() { this.theColor = 'blue'; }, }, </script>
总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作
2 局部注册
-
局部指令,需要定义在directives 的选项 用法和全局用法一样
-
局部指令只能在当前组件里面使用
-
当全局指令和局部指令同名时以局部指令为准
//局部指令,需要定义在 directives 的选项 directives: { color: { bind: function(el, binding){ el.style.backgroundColor = binding.value.color; } }, focus: { inserted: function(el) { el.focus(); } } }