1.v-model
作用:表单值和data数据建立双向数据绑定
语法:v-model="data数据"
应用场景:设置 + 获取表单的值
2.v-for
作用:遍历数组,重复生成相同的元素
语法: v-for="(item,index) in 数组名"
需要注意: v-for写在谁身上,就会重复生成谁
应用场景:一般用来渲染 数组
3.v-bind 一般简写成:
作用:让html属性可以使用vue的数据
简洁语法:<标签名:属性名="属性值"></标签名>
:style="{样式名:样式值}"
:class="{类名:布尔值}"
布尔值和样式值 既可以是字面量 也可以 是data中的数据
4.v-on 简写 @
作用:给元素绑定事件
简洁语法:@事件类型=“事件方法”
应用场景:
1.行内事件:<标签名 @click="js代码"></标签名> 注意:用于处理事件代码不能超2行
2.无参数事件:<标签名 @click=“方法名”></标签名> 注意:方法名必须要在methods中声明
3.有参数事件:<标签名 @click=“方法名(实参,$event)”></标签名>
补充v-on指令修饰符:修饰事件触发行为
.stop:阻止冒泡
.prevent:阻止默认跳转
.enter:输入框enter事件
.once:事件只能触发一次