Vue模板语法

graph TD
Vue模板语法 --> 插值语法
Vue模板语法 --> 指令语法

1.插值语法

• 语法：{{JS 表达式}}
• 作用：动态展示数据

扩展：

       表达式和语句区别：
            表达式
              1. 没有分号
              2. 有返回值，可以undefined
            语句： 
              1. 有分号结尾，可以省略分号（运行时自动补全）
              2. 没有返回值

2.指令语法

（1）v-model='JS表达式'

    作用：数据双向绑定（常用于收集表单数据）
         数据能由Model(数据)层流向View(视图)层，进行展示
         数据能由View(视图)层流向Model(数据)层,修改Model层的数据
     

（2） v-bind:xxx='yyy'

    用于单向数据绑定（强制绑定数据）
          常用于父子组件间通信
          简写 :xxx="yyy"

（3）v-on

     用于绑定事件
          v-on:事件名="事件回调函数"
          简写 @事件名="事件回调函数"

（4）v-if/v-else-if/v-else

    - 作用：条件渲染（显示或隐藏的切换）
    - 使用：`v-if="xxx"`
    - 隐藏时，会移除 DOM 元素

（5）v-show

    - 作用：条件渲染（显示或隐藏的切换）
    - 使用：`v-show="xxx"`
    - 隐藏时，通过样式 display:none 来隐藏的（性能开销较小，多次使用用 v-show 较好）

（6）v-for

    - 作用：列表渲染（遍历展示数据）
    - 使用：`v-for="(item, index) in xxx" :key="item.id"`