画布 1
模板语法
  基本简介
    1. Vue的模板语法是基于HTML
    2. 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数
    3. 偏爱原生，可直接写渲染 (render) 函数，使用可选的 JSX 语法
  模板插值
    1. 文本插值
      使用“Mustache”语法，即双大括号
      双大括号会将数据解释为普通文本，而非 HTML 代码
      可以使用 v-once 可实现一次性插值
    2. 原始 HTML
      使用v-html输出真正的 HTML
      需要注意：动态渲染 HTML 是非常危险的，容易导致 XSS 攻击
    3. Attribute插值
      通过 v-bind 实现
    4. 使用 JavaScript 表达式
      所有的数据绑定，Vue都提供了完全的 JavaScript 表达式支持
      但每个绑定都只能包含单个表达式
  指令
    1. 介绍
      Vue的指令是指带有 v- 前缀的特殊属性
      大多数指令的预期值是单个 JavaScript 表达式
      指令的职责是，当表达式的值改变时，会响应式地作用于 DOM
    2. 参数
      一些特定指令可以接受特定的参数，指令和参数之间使用冒号隔开，比如v-bind:href="url"
    3. 动态参数
      可以在指令参数中使用 JavaScript 表达式，前提是得用方括号[]括起来
    4. 修饰符
      以半角句号.指明的特殊后缀
  指令的缩写
    1. 常用简写
      v-bind直接省略
      v-on简写为@
    2. 注意事项
      对动态参数值约定
        动态参数预期会求出一个字符串，异常情况下值为 null
        其它非字符串类型的值都将会触发一个警告
      对动态参数表达式约定
        某些字符如空格和引号，放在 HTML attribute 名里是无效的，因此VUe对动态参数表达式有一些语法约束
        可以使用没有空格或引号的表达式，或用计算属性替代一些复杂表达式
      JavaScript 表达式
        模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date
        不应该在模板表达式中试图访问用户定义的全局变量