0. 作者有话说

本篇文章中Vue的自定义指令内容比较多，建议着重记忆

1. Vue内置指令

1.1 v-text

<div>{{name}}</div>与<div v-text="name"></div>

1. v-text会拿到name的值，并将div里的文字全部替换掉，插值语法不会
2. v-text不会解析字符串

1.2 v-html

• v-html支持结构的解析，v-text不解析
• v-html会存在安全问题，比如解析结构时可能会包含一些非法字符串

1.3 v-cloak

1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后就会删掉该属性
2. 使用v-cloak配合css可以解决网速慢时页面展示出{{xxx}}的问题

<style>
    [v-cloak]{
        display: none;
    }
</style>
<div id="root">
    <h2 v-cloak>{{name}}</h2>
</div>

1.4 v-once

1. v-once所在节点在初次动态渲染后，就视为静态内容了
2. 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能。

1.5 v-pre

1. 跳过其所在节点的编译过程
2. 可利用它跳过那些没有使用指令语法、没有使用插值语法的节点，会加快编译

<div id="root">
    <h2 v-pre>hello</h2>
    <h2> {{name}} </h2>
    <button @click="change">点击</button>
</div>

2. Vue自定义指令

2.1 指令写法：

• 对象写法，适用于功能比较复杂，对象中包含了多个函数
  • bind (element, binding) 指令与元素成功绑定（一上来）
  • inserted (element, binding) 指令所在元素被插入页面时
  • update(element, binding) 指令所在的模板被重新解析时
• 函数写法，写起来简单，但实现的功能也比较简单
  • 指令何时会被调用：指令与元素成功绑定时被调用（一开始）；指令所在的模板被重新解析时被调用（即模板中使用的所有数据被改变）
  • 即 bind 与 update 的合并

2.2 指令注册：全局指令注册与局部指令注册

• 注册全局指令（函数写法）

Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
})

• 注册局部指令
  bind里面的 el 表示真实dom元素，binding.value就是给了dom元素应该绑定的值

directives : {
   'my-directive' : {
        bind (el, binding) {
        // 原生dom操作
            el.innerHTML = binding.value.toupperCase()
        }
    }
}

2.3 注意事项

• 指令定义时不加 v-，但使用时要加 v-
• directives中的this都是指向 window
• 指令名如果是多个单词，要使用 kebab-case 命名，不要使用 camleCase

2.4 需求一

定义一个 v-big指令，和v-text功能类似，但会把绑定的数值放大10倍

<div id="root">
    <h2>当前的n值是： <span v-text="n"></span></h2>
    <h2>放大10倍的n值是： <span v-big="n"></span></h2>
    <button @click="n++">点我n+1</button>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
          n: 1
        }
        directives:{
          big(el, binding){ //el是真实DOM元素
              el.innerText = binding.value *10
          }
        }
    })
</script>

2.5 需求二

定义一个fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

获取焦点的参数需要

<div id="root">
    <h2>当前的n值是： <span v-text="n"></span></h2>
    <h2>放大10倍的n值是： <span v-big="n"></span></h2>
    <button @click="n++">点我n+1</button>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
          n: 1
        }
        directives:{
            fbind: {
              bind(el, binding){
                  el.value = binding.value
              }
              inserted(el, binding){
                  el.focus() //获取焦点
              }
              update(el, binding){
                  el.value = binding.value //与bind类似
              }
            }
        }
    })
</script>