Vue-指令

Vue指令

1 . Vue语法-插值表达式

• 在DOM中插入内容
• 语法：{{表达式/vue变量}}
• vue的变量在data函数内, return的对象

2 .Vue指令-v-bind:

• 给标签属性赋Vue变量
• 语法：v-bind:属性名=“vue变量”
• 简写：:属性名=“vue变量”

3.Vue指令-v-on事件绑定

• 绑定绑定事件
• 语法：v-on:事件名="methods中的函数"
• 语法：v-on:事件名="methods中的函数（参数）"
• 简写：@事件名="methods中的函数（参数）/methods中的函数"

4.Vue指令-事件对象

• vue事件处理函数中, 拿到事件对象（函数中的参数）
• 语法1：无传参, 通过形参直接接收
• 语法2：传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    //语法1
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    //语法2
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>
<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

5.Vue指令-鼠标修饰符

• 语法：@事件名.修饰符="methods里函数"
• 修饰符：.stop - 阻止事件冒泡
• .prevent - 阻止默认行为

6.Vue指令-按键修饰符

• 给键盘事件, 绑定修饰符
• 语法：
• @keyup.enter - 监测回车按键
• @keyup.esc - 监测返回按键

7.Vue指令-v-model双向绑定1

• 把表单值和Vue变量双向绑定（一定要有value值，因为双向绑定的是value）
• 语法：v-model="vue数据变量"
• 注意：本阶段v-model只能用在表单元素上

8.Vue指令-v-model双向绑定2

• 在复选框使用(重点: 有区别)
• 在单选框使用：（有value）
• 下拉菜单：（有value）

1> 遇到复选框，vue变量应该为数组

2> 非数组 - 关联的是checked属性

3> 数组 - 关联的是value属性

9.Vue指令-v-model修饰符

语法：v-model.修饰符="vue数据变量"

1> .number 以parseFloat转成数字类型

2> .trim 去除首尾空白字符

3> .lazy 在change时触发而非inupt时

10.Vue指令-v-html

• 设置内容,这个命令会识别html的标签
• 语法：v-html="vue数据变量"
• 注意: 会覆盖插值表达式

11.Vue指令-v-show和v-if

控制标签显示或隐藏

语法：v-show="vue变量"

           v-if="vue变量"

两者区别：

• v-show 用的display:none隐藏 (频繁切换使用)
• v-if 直接从DOM树上移除（删除）
• 高级的用法（v-if 与 v-else一起搭配使用，方便通过变量控制一套标签出现/隐藏）

12.Vue指令-v-for

数据循环生成标签（可以遍历数组 / 对象 / 数字 / 字符串）

语法：

• v-for="(值变量, 索引变量) in 目标结构" ：key = "值变量"
• v-for="值变量 in 目标结构" :key="值变量"

内容会持续更新！！！