[JavaScript知识库]vue 指令语法总结

1.v-bind

给标签属性设置vue变量的值

语法: v-bind:属性名 = "vue变量"? ?

简写? ?:属性名= "vue变量"

2.v-on?

给标签绑定事件

语法: v-on:事件名 = "要执行的 少量 代码"

v-on: 事件名 ="methods 中的函数"

v-on: 事件名= "methods中的函数 (实参)"

简写: @事件名 = "methods 中的函数"

3.v-on事件对象??

vue事件处理函数中, 拿到事件对象

• 无传参, 通过形参直接接收

• 传参, 通过$event指代事件对象传给事件处理函数

4. v-on修饰符

在事件后面.修饰符名 - 给事件带来更强大的功能

@事件名.修饰符="methods里函数"

• .stop - 阻止事件冒泡

• .prevent - 阻止默认行为

• .once - 程序运行期间, 只触发一次事件处理函数

5. v-on按键修饰符

给键盘事件, 添加修饰符, 增强能力

• @keyup.enter - 监测回车按键

• @keyup.esc - 监测返回按键

6.? v-model

?把value属性和vue数据变量, 双向绑定到一起

语法: v-model="vue数据变量"

7. v-model修饰符

语法:

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

• .number 以parseFloat转成数字类型

• .trim 去除首尾空白字符

• .lazy 在change时触发而非inupt时

?8.? v-text和v-html

?更新DOM对象的innerText/innerHTML

• 语法:

  • v-text="vue数据变量"

  • v-html="vue数据变量"

• 注意: 会覆盖插值表达式

• v-text把值当成普通字符串显示, v-html把值当做html解析

9.? v-show和v-if

?控制标签的隐藏或出现

• 语法:

  • v-show="vue变量"

  • v-if="vue变量"

• 原理

  • v-show 用的display:none隐藏 (频繁切换使用)

  • v-if 直接从DOM树上移除

• 高级

  • v-else使用

10.? v-for

• 语法

  • v-for="(值, 索引) in 目标结构"

  • v-for="值 in 目标结构"

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

• 注意:

  v-for的临时变量名不能用到v-for范围外

?