一.插值表达式 插值表达式: 在dom标签中直接插入vue数据变量 {{表达式 }} 二.vue指令 1.v-text="data内变量名" 作用:innerText 输出 2.v-html="data内变量名" 作用:innerHTML输出 3. v-on:事件名="methods内函数" --> 标准语法 @事件名="methods内函数" --> 简写语法 作用:给元素绑定事件 4.v-bind:属性名="vue数据" --> 标准语法 : 属性名="vue数据" --> 简写语法 作用: 让原生属性可以使用vue的数据 注意: 在Vue中,任何属性只要加 :就代表访问Vue的数据 5.v-for="(数组内每一项,数组内每一项索引) in 数组名" 作用:循环渲染元素 注意:v-for指令写在那个标签身上 就代表重复生成那个标签 6.v-model="data内变量" 作用: 1.获取input用户输入内容 2. 与表单形成双向绑定 3. 修改表单value值 data中的数据会自动变化 4. 双向数据绑定: (1) 表单元素的值进行了修改 这个元素的值也会跟着修改 (2)这个变量的值进行了修改 表单元素的值也会跟着修改 注意:v-model 只能用于表单元素 , v-model的指令需要在data中声明 三.事件修饰符 语法: @事件名.修饰符="methods内函数" 作用: 对事件行为进行修饰 修饰符 stop 阻止点击事件冒泡 prevent 用于取消默认事件 self 只会触发自己范围内的事件 不包含子元素 once 只执行一次 如果我们在@click事件上添加.once修饰符 只要点击按钮只会执行一次 passlve 这个修饰符会执行默认方法 常见修饰符 @keydown.enter 监听enter按键 @click.prevent 阻止默认行为 @click.stop 阻止冒泡 四.事件参数 语法: @事件="methods内函数(实参)" methods内函数(形参) 作用: 1. vue中每一个事件方法都有一个默认参数 就是事件对象 2.如果主动给事件传参 则传递参数 会 覆盖默认参数 3.如果希望同时传入 事件对象 + 自定义参数 则可以使用 $event 语法:@事件=" methods内函数(实参,$event)"