-bind
给标签属性设置vue变量的值
语法: v-bind:属性名 = "vue变量"
简写 :属性名= "vue变量"
-on
给标签绑定事件
语法: v-on:事件名 = "要执行的 少量 代码"
v-on: 事件名 ="methods 中的函数"
v-on: 事件名= "methods中的函数 (实参)"
简写: @事件名 = "methods 中的函数"
-on事件对象
vue事件处理函数中, 拿到事件对象
无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数
4. v-on修饰符
在事件后面.修饰符名 - 给事件带来更强大的功能
@事件名.修饰符="methods里函数"
.stop - 阻止事件冒泡
.prevent - 阻止默认行为
.once - 程序运行期间, 只触发一次事件处理函数
5. v-on按键修饰符
给键盘事件, 添加修饰符, 增强能力
@ - 监测回车按键
@ - 监测返回按键
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范围外