vue指令的作用、语法及应用场景

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:事件只能触发一次