vue指令

v-bind指令

1. 作用 : 动态绑定属性
2. 用法 : v-bind:属性名=“vue变量”
   简写 : :属性名="属性值"

v-on指令

1. 作用 : 绑定事件
2. 用法:
   1. 事件处理函数要写在methods中
   2. v-on:事件名=“事件处理函数”
      简写 : @事件名="事件处理函数"
   3. 传参 : @事件名=“事件处理函数(实参)”
   4. 事件对象
      1. 无传参:第一个参数默认为事件对象
      2. 有传参:手动传入一个$event
   5. 修饰符
      1. 时间修饰符
         1. .prevent : 阻止默认行为
         2. .stop : 阻止冒泡
         3. 用法 : @事件名.修饰符1.修饰符2="事件处理函数"

v-model指令

1. 作用 : 双向绑定数据(目前只用于表单)
2. 用法 :
   1. v-model=“变量”
   2. 下拉框 v-model 要写在 select 上,绑定的是option的value值
   3. 复选框
      1. 绑定的变量是数组 : 绑定的值是value
      2. 非数组 : 绑定的值是 checked
3. 修饰符
   1. .number :转number类型
   2. .trim : 去除首尾空白
   3. .lazy : 将input事件改为change事件

v-html / v-text

1. 作用 : 等同于innerHtml和innerText
2. 用法 : v-html=“变量” / v-text=“变量”

v-show / v-if

1. 作用 : 控制元素显示隐藏
2. 区别:
   1. v-show是给元素添加display:none
   2. v-if 将DOM元素添加 / 删除
   3. v-if可以连接v-else-if使用
3. 用法 : v-show=“变量(布尔值)”(v-if同理)

v-for

1. 作用 : 循环创建元素
2. 用法 : v-for="(循环变量,索引值) in 目标结构" :key=“id”