Vue自定义指令

自定义指令-注册

目标

自定义指令文档

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

html+css的复用的主要形式是组件

你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

讲解

获取标签, 扩展额外的功能

局部注册

07_UseDirective.vue - 只能在当前组件.vue文件中使用

​

​

全局注册

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

总结: 全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用

小结

我们为什么要自定义指令?

1. 在Vue内置指令满足不了需求时, 可以自己定义使用

自定义指令-传值

目标

使用自定义指令, 传入一个值

讲解

需求: 定义color指令-传入一个颜色, 给标签设置文字颜色

main.js定义处修改一下

// 目标: 自定义指令传值
Vue.directive('color', {
  inserted(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
})

Direct.vue处更改一下

修改文字颜色
​

总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作

小结

1. 指令如何传值?

   1. v-指令名="值"

2. 指令值变化触发什么方法?

   1. 自定义指令的update方法而非inserted方法