Vue / Vue指令、事件修饰符、事件参数

一.插值表达式

插值表达式: 在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)"