常用指令自定义指令钩子函数

常用指令
1. v-bind
2. v-model
3. v-show
4. v-if else
5. v-for
6. v-html
7. v-text
8. v-on
9. v-cloak
部分指令详解
1. v-text 指令用来向标签中添加文本内容
  html
```
   <h1 v-text="hello"></h1>
   
   <h1>{{hello}}</h1>
```
2. v-html 用来将 html 代码片段插入到标签中
  html
```
   <p v-html="html"></p>
```
3. 使用 pre 标签展示代码
  html
```
   
```
4. v-pre 不渲染这一块内容按照原本的展示就可以了
  html
```
   <span v-pre>{{js}}</span>
```
5. v-cloak
  1. vue 加载晚(比较慢) 渲染页面的时候 vue 还没有接管这个标签容器
  2. vue 没有加载完成的时候就不要展示了影响美观
  3. 我们借助 v-cloak 属性将标签隐藏掉当 vue 加载完成的时候 v-cloak 会被移出掉
  4. v-cloak指令的作用：防止页面加载时出现闪烁问题（解决插值表达式的闪烁问题）；
  5. 插值表达式的闪烁问题原因：代码加载的时候先加载HTML，把插值语法当做HTML内容加载到页面上，当加载完js文件后才把插值语法替换掉，所以我们会看到闪烁问题。
  6. html
```
   <p v-cloak>{{hello}}</p>
```
    css
```
   [v-cloak] {
       display: none;
   }
```
6. v-once 只有在开始时渲染后续数据更新也不会渲染只渲染一次
html
```
   <p v-once>{{num}}</p>
```
1. v-memo 只有数组中的内容发生改变标签才会重新渲染
  html
```
   
   
   <p v-memo="[num1 === num2]">{{num}}</p>
```
全局注册自定义指令
1. app.directive(自定义指令的名称, 函数|对象)
2. js
```
   app.directive('focus', function (el, prop) {
      console.log(el, prop)
      //   将光标聚焦到当前标签上
      el.focus()
   })
```
  注解：
  1. el: 指令所挂载的元素
  2. prop: 是一个对象包含指令操作的属性，属性值，修饰符等等
  3. prop 对象中
    1. arg 属性指的是指令绑定的属性名称，
    2. value 指令绑的属性值
    3. instance 指的是 vm 实例对象
    4. modifiers 包含指令的修饰符
    5. dir: 包含了指令所使用到的一些方法

自定义指令局部注册

   // 写在实例中就是局部注册
   directives: {
      // 自定义指令实现 v-text
      abc(el, prop) {
         el.innerText = prop.value
      }
   }

钩子函数

钩子函数就是在合适的时机调用合适的方法这些方法就被称为钩子函数
分类
1. created：在绑定元素的 attribute 或事件监听器被应用之前调用
2. beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
3. mounted：在绑定元素的父组件被挂载后调用。
4. beforeUpdate：在更新包含组件的 VNode 之前调用。
5. updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
6. beforeUnmount：在卸载绑定元素的父组件之前调用
7. unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

实例：

   directives: {
      abc: {
         //   如果自定义指令写成函数形式 执行的只有两个时期 mounted updated
         created(el, prop) {
            // 指令绑定上 绑定的属性及方法还未生效
            console.log('created')
            console.log(el.title) // 获取不到
         },
         beforeMount(el, prop) {
            console.log(el.title) // 可以获取到属性 但是标签元素并没有渲染到页面中
            //   console.log(document.querySelector('p')) // null
            console.log('beforeMount')
         },
         mounted(el, prop) {
            // 挂载时开启定时器
            el.timer = setInterval(function () {
               console.log('开始计时了')
               prop.instance.time++
            }, 1000)
            console.log(el.title) // 可以获取属性 标签已经渲染到页面中了
            console.log(document.querySelector('p'))
            console.log('mounted')
         },
         beforeUpdate(el, prop) {
            // 准备开始更新的时候执行这个方法
            console.log('beforeUpdate')
         },
         updated(el, prop) {
            // 更新完成的时候执行
            console.log('updated')
         },
         beforeUnmount(el, prop) {
            // 开始卸载时调用
            // console.log('即将要离开了， 很舍不得', prop.instance.timer)
            // 卸载时清除定时器
            clearInterval(el.timer)
         },
         unmounted(el, prop) {
            // 卸载完成时调用 做一些收尾的工作
            console.log('拜拜了您嘞!!')
         }
      }
   }

常用指令 自定义指令 钩子函数 ​

常用指令自定义指令钩子函数