1. Vue(2.0)

    + 一个前端框架
    + 使用
      1. 引入一个第三方 js 文件
        => vue.js 或者 vue.min.js
      2. 准备一个根节点
        => 准备一个标签
        => <div id="app"></div>
        => 将来 Vue 的所有语法都在这个标签内实现渲染, 在标签外不生效
      3. 初始化 Vue
        => new Vue({
          // 关联哪一个 Vue 根节点
          el: '#app'
        })

2. Vue 实例的配置项 !!!!!!!!!!!!!

    + new Vue({
      el: '', // 关联的根节点选择器
      data: {}, // 直接书写数据(属性), 可以直接在 根节点 内使用
      methods: {}, // 直接书写方法, 可以直接在 根节点 内使用
      computed: {}, // 直接书写计算属性, 可以直接在 根节点 内使用
    })

3. 插值表达式

    + 在 Vue 的根节点内直接使用 {{}} 语法, 可以 Vue 实例内的属性(基本属性, 方法, 计算属性, ...)
    + 直接渲染在页面上

4. 内置指令 v-bind

    + 向标签上绑定属性的方法
    + 语法
      => 基础语法: v-bind:属性名="数据"
      => 简化语法: :属性名="数据"
    + 类名绑定
      => :class="{ box: true, content: true }"
      => :class="[ 'box', 'content', 数据 ]"
    + 样式绑定
      => :style="{ color: 'red', fontSize: '200px' }"
      => :style="[ {}, {}, ... ]"

5. 内置指令 v-on

    + 向标签上绑定事件的方法
    + 语法:
      => 基础语法: v-on:事件类型="事件处理函数"
      => 简化语法: @事件类型="事件处理函数"
    + 事件修饰符
      => @事件类型.修饰符="事件处理函数"

6. 内置指令 v-show

    + 通过这个指令决定该标签是否 **显示**
    + <p v-show="数据"></p>
      => 如果该数据的值是 true, 那么该标签显示
      => 如果该数据的值是 false, 那么该标签不显示(display: none;)

7. 内置指令 v-if

    + 通过这个指令决定该标签是否 **渲染**
    + <p v-if="数据"></p>
      => 如果该数据的值是 true, 那么该标签渲染
      => 如果该数据的值是 false, 那么该标签不渲染
    + 可以书写 if else if 语句
      <p v-if="表达式"></p>
      <p v-else-if="表达式"></p>
      <p v-else-if="表达式"></p>
      <p v-else-if="表达式"></p>
      <p v-else></p>

8. 内置指令 v-for

    + 通过这个指令令该标签循环渲染
    + 根据数据进行循环
    + 语法:
      => 遍历数组            !!!!!!!!!!
        -> <p v-for="item, index in 数组"></p>
      => 遍历对象           !!!!!!!!!
        -> <p v-for="val, key in 数组"></p>
    + 注意: 为了保证 DOM 结构的唯一性
      => 我们需要在 v-for 的标签身上加一个 key 属性
      => 动态绑定为 数据id

9. v-model

    + 实现双项数据绑定
      => 当 Vue 实例内的数据改变的时候, 同步更新页面
      => 当页面内渲染的内容改变的时候, 会同步更新 Vue 实例内的数据
    + 一般使用在表单元素上

10. 计算属性 !!!!!!!!!!!记住了

    + 当某些数据的结果, 需要通过一段计算(程序的运行)得到的时候
    + 我们可以使用一个计算属性来获取
    + 优点:
      => 当被计算项没有改变的时候, 不会重复执行代码
      => 而是一直使用之前计算出来的值
      => 只有当被计算项改变的时候, 才会从新执行代码计算出一个最新的值, 缓存起来
    + 语法:
      => 基础语法:
        computed: {
          属性名: function () {}
        }
        -> 该属性只能使用, 不能被修改, 如果需要修改, 只能直接修改被计算项
      => getter 和 setter 语法
        computed: {
          属性名: {
            // get 函数的返回值, 就是该属性的值
            get () {},
            // 当你需要修改该计算属性的时候, 会触发这个 set 函数
            // 并且你修改的值会被当做参数传递给 val
            set (val) {}
          }
        }

11.内置指令 v-text

    => 在标签内书写文本
    => 会把原先标签内的所有内容直接覆盖(这个)
    => 等价于原生 JS 内的 innerText

12.内置指令 v-html

    => 在标签内书写超文本
    => 会把原先标签内的所有内容直接覆盖(这个)
    => 等价于原生 JS 内的 innerHTML

  注意: 插值表达式
    => 不管你写的什么, 会把这一段内容原封不动的显示在页面上
    => 不会解析 html 结构字符串的

13.内置指令 v-cloak

  页面打开的时候会有一个闪烁
    + 原因:
      => 打开页面的时候
      => 首先加载的内容 <p>{{ message }}</p>
      => 通过 new Vue 这段代码执行的时候
        -> 根据 el 去捕获到 div 标签
        -> 把 data 内的数据进行处理和放在实例身上
        -> 用数据去根据 Vue 的语法去渲染组装一个完成后的 html 结构字符串
        -> 把组装好的 html 结构字符串插入到页面内 <p>Hello Vue</p>
      => 当时间出现时间差的时候, 就会闪烁一下
    + 解决:
      => 在 Vue 渲染之前不让标签显示
      => 等到 Vue 渲染之后, 再让标签显示出来
      => <p>{{ message }}</p> 标签让他 display: none
      => <p>Hello Vue</p>     标签让他 display: block
      => 使用一个 v-cloak 指令
        -> 作用: 可以在渲染完毕以后让标签显示
        -> 指令: 当页面渲染完毕以后, 指令是不会在标签上留存的
        -> 还需要利用一段 css 样式来生效

14.自定义指令

  自定义指令
    + 内置指令: 都是 Vue 语法自带的指令
    + 自定义指令: 我们自己根据自己的操作需求, 定义一个指令使用

  总结:
    + v-bind:   给标签绑定属性
    + v-on:     给标签绑定事件
    + v-model:  给标签进行双项数据绑定
    + v-if:     决定标签是否渲染
    + v-show:   决定标签是否显示
    + v-for:    循环渲染标签
    + v-text:   给标签插入文本内容
    + v-html:   给标签插入超文本内容
    + 指令的核心意义: 操作 DOM
    + 当你需要在 Vue 内操作 DOM 的时候, 可以使用指令

  自定义指令:
    + 当你需要在页面内需要操作 DOM 的时候, 可以选择使用指令
    + 当内置指令不够你使用的时候, 我们可以自定义一个指令来使用

  例子: 一个文本框需要自动聚焦
    + 当你没有使用 Vue 的时候, 添加 autofocus 是可以实现的
    + 当你使用了 Vue 以后, 添加 autofoxus 不好使了
    + 我们需要在 Vue 渲染完毕后, 操作一下 input 标签, 让他聚焦
      => 操作 DOM 了
      => 可以自定义一个让元素聚焦的指令
      => 把这个指令加在标签身上

  自定义指令分类:
    + 全局自定义指令
      => 可以多个实例共享使用的
      => 可以多个 **组件** 共享使用的
    + 局部自定义指令
      => 只能在当前实例内, 当前组件内使用
      => 其他组件或者实例不能使用

  书写全局自定义指令:
    + 语法: Vue.directive('指令名称', { 该指令配置项 })
      => 注意: 先添加自定义指令, 在进行 new Vue 实例化
  书写局部自定义指令:
    + 在实例配置内添加一个 directives: { 指令名称: { 该指令配置项 } }

15.自定义指令的生命周期

  自定义指令的声明周期
    + 自定义指令的书写
    + 自定义指令的使用:
      => 直接在标签身上使用 v-自定义指令名称
    + 自定义指令的声明周期(钩子函数)
      => 一个指令和DOM 结构的各个时间点
      => 自定义指令的配置, 其实就是在书写各个生命周期函数
        -> bind: 一生只会调用一次, 该指令第一次和该标签绑定在一起的时候会触发
        -> inserted: 该元素被插入到父节点的时候时候会触发
        -> update: 该指定所在的元素变化的时候, 或者该 **组件** 发生变化的时候
        -> unbind: 一生只会调用一次, 该指令与元素解绑的时候
        -> componentUpdated: 该指令所在组件以及后代所有组件更新数据的时候, 更新完毕以后触发
    + 指令 和 DOM 的时间关系
      => 一个指令 和 DOM 结构之间, 各个时间节点
      1: 当该指令被写在标签身上的时候
        => 刚刚打开页面, Vue 刚刚接手页面的时候
        => 还没有开始进行数据和原始结构的组装
        => <input type="text" v-xhl>
      2: Vue 已经全盘接手页面渲染
        => 当 Vue 捕获完毕页面结构, 处理完毕数据
        => 把该标签已经解析完毕, 从新渲染到页面内
        => <input type="text">
      3: 当该标签更新数据
        => 当你在 input 标签内输入内容的时候
        => input 的数据会发生变化
        => 变化之前 和 变化之后
      4. 当该指令标签拆开的时候
        => 当该标签从页面内消失的时候
        => 该指令和标签被分开了
      5. 当指令绑定在组件上的时候
        => 该组件内容及其后代组件全部更新完成以后

  自定义指令的生命周期函数的参数
    + 第一个参数(el): 表示绑定该指令的元素
    + 第二个参数(binding): 表示该指令的绑定信息(是一个对象数据类型)
    + 第三个参数(vNode): 该标签的虚拟 DOM
    + 第四个参数(oldVnode): 只是在 update 和 componentUpdated 声明周期时候有
      -> 表示更新以前旧的 虚拟DOM 节点

16.自定义指令的信息

自定义指令的信息
  指令的使用:
    => v-text="数据"
    => v-bind:src="数据"
    => v-on:mousedown.esc="数据"

  指令中: binding 内的信息
    => name: 该指令的指令名称, 不包含 v- 在内的部分内容
    => expression: 该指令书写在等于号后面的内容
      -> 注意: 是一个表达式, 不是该表达式的结果, 是一个字符串类型
    => value: 该指令书写的值
    => modifires: 该指令书写的时候所写的修饰符, 是一个对象数据类型
    => arg: 书写指令的时候所携带的参数
    => oldValue: 在 update 和 componentUpdated 生命周期的 binding 有作用, 表示修改前的数据