1.v-bind
动态绑定标签的属性,意味着设置的值是一个变量
语法: v-bind : 属性名='属性值可以是Vue变量'
简写: 可以写成 :
2. v-on
语法:v-on:事件类型='事件处理函数'
简写: @事件名='methods里面的函数名'
事件处理函数需要在methods中声明
怎么在methods中的函数内部访问data中定义的变量?
直接使用: this.变量名即可
事件处理函数可以传参, 事件绑定的地方加上小括号并不是调用,二十事件触发时再传递参数
v-on事件修饰符
语法:直接在事件类型后面接.就可以了
无传参:直接接收形参e就是事件对象
有传参:手动传入$event实参即可
v-on按键修饰符
只有键盘事件可以使用
3.v-model
双向绑定(表单元素<====>Vue变量)
指令目前只用在表单元素
语法:v-model=
作用:当用户修改表单元素的value属性时,会自动将最新的数据存入绑定的变量中,当变量被修改时,会同步给表单元素的value属性
下拉选择框select的注意事项
v-model要写在select标签上
它绑定的是option的value属性
checkbox绑定的变量类型分为两种情况
1.数组:
将用户勾选的checkbox中的value值放到数组中
本质上绑定的是value属性
2.非数组(统一当成boolean,一般用于全选功能)
将复选框的勾选状态同步到vue变量中
本质绑定的是checked属性
v-model修饰符
.number : 以parseFloat转正数字类型
.trim : 去除首尾空白字符
.lazy : 在change时触发
本质是一个语法糖
它一共做了两件事:
给元素绑定一个value属性,单向的数据流
给元素绑定一个input事件,数据修改的时候反向同步给父组件
4. v-html / text
语法:v-html="Vue数据变量"
会覆盖插值表达式
因为插值表达式先被解析,指令执行晚
5. v-show / if
语法: v-show / if="Vue变量"
v-show使用display:none隐藏
v-if直接从DOM树上面移除
v-if和v-else必须连在一起
v-if有较高的切换渲染开销
v-show有较高的初始渲染开销
6. v-for
语法: v-for="(值变量,索引变量) in 目标结构" :key=
key的作用:
无key,就地更新
有key,按照key比较
key值的要求?
唯一不重复的字符串或者数值
key应该怎么用?
有id用id没id用索引
