Vue常用指令的介绍及应用

1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性

        (1) 每一个HTML标签都有自己的原生默认属性

        HTML标签的每一个属性都有自己独特的功能

        例如 img标签的src属性，a标签的href属性

        (2) Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能

2.在Vue中每一个指令都是以v-开头 （用于区分HTML标签原生属性）

        语法 ： 指令名=“指令值” 例如 v-text = msg

3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。

v-text指令

作用: 设置元素的innerText

语法: v-text="值"

注意点: v-text与插值{{}}区别

v-text: 替换整个innerText

插值{{}}: 只能替换大括号的部分,局部替换

v-html指令

作用: 设置元素的innerHTML

语法: v-HTML="值"

注意点: v-text与插值{{}}区别

v-text: 不能识别字符串中的标签

v-html: 可以识别字符串中的标签

v-on指令（绑定事件）

作用: 给元素绑定事件

语法:

标准语法 v-on: 事件类型='事件处理函数'

简洁语法 @事件类型='事件处理函数'

注意点:

(1)事件类型不要on click mouseenter

(2)事件处理函数写在vue实例的methods对象中

vue事件修饰符

作用: 修饰事件(阻止冒泡 默认跳转)

语法: @事件类型.修饰符 = '事件处理方法'

常用:

.stop: 阻止冒泡

.prevent: 阻止默认form和a跳转

.enter: 监听enter按键

vue方法中的this

1.vue事件方法中的this指向 ： vue实例

2.vue事件方法中访问data对象中的成员 : this.属性名

• vue会将data对象与methods对象中的成员 平铺到 vue实例中

3.注意点： 如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员

vue事件传参

• 1.vue中每一个事件方法都有一个默认参数 ， 就是事件对象

• 2.如果主动给事件传参，则传递的参数 会 覆盖默认参数

• 3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event

  • v-on:click="doClick($event,自定义参数)"

语法: @事件名='事件处理函数(参数)'

注意点:

如果事件处理函数没有传参,默认参数是事件对象

如果事件处理函数有传参,则会覆盖默认的事件对象

如果同时获取 传参+事件对象 ,则可以使用 $event

v-bind指令 (绑定标准属性的值)

• 默认情况下，HTML标签原生属性无法获取vue中的数据

• 如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令

v-bind作用: 原生的属性也可以使用vue的数据

v-bind语法:

标准语法 v-bind:原生属性名="值"

简写语法 :原生属性名="值"

vue样式绑定

v-bind样式绑定: 如果属性名为true,则加载类名,否则不加载

:class="{类名1:属性名,类名2:属性名}"

注意点: 如果类名有-,则需要添加 引号

v-for指令(列表渲染)

v-for作用: 根据数组长度 重复渲染数据

v-for语法(列表渲染):

v-for="(item,index) in 数组名"

v-for注意点: v-for写在哪个标签上面,就会重复生成哪个标签

v-model指令(双向数据绑定)

1.v-model作用 ： 双向数据绑定

2.双向绑定:

2.1 修改表单的值，data中的数据会自动变化

2.2 修改data中的数据，表单的值也会改变

3.语法： v-model="变量名"

4.注意点：

a.v-model只能用于表单元素

b.变量名要定义在data对象中

5.v-model双向绑定意义: 可以快速 获取/设置 表单的值

v-if指令

1.v-if指令作用: 根据条件渲染元素

2.语法:

2.1 单分支: v-if="布尔值"

2.2 双分支: v-else

2.3 多分枝: v-else-if="布尔值"

3.注意点: v-else前面一定要有v-if或者v-else-if

v-show指令

1.v-if指令作用: 设置元素的display实现

2.语法: v-show="布尔值"

3.注意点: v-if与v-show的区别

v-if: 根据条件渲染. 如果条件成立才会渲染,条件不成立不渲染

v-show: 一定会渲染. 只是设置元素的样式display

v-cloak指令(了解)

1.v-cloak指令作用: 设置元素在vue渲染之前的样式

2.语法:

2.1 给元素添加v-cloak指令: v-cloak

2.2 写css样式: [v-cloak]{初始样式}

3.注意点: 就是属性选择器

vue在完成加载后会移除这个行内属性

v-once指令(了解)

1.v-once指令作用: 让元素只被vue渲染一次

2.语法: v-once

3.场景: 商品显示原价和折扣价,当价格变化的时候,原价始终不变(只需要渲染一次)

v-pre指令(了解)

1.v-pre指令作用: 让元素不被vue渲染

2.语法: v-pre

3.场景: vue即使博客类网页,希望告诉读者vue语法.就希望vue语法不需要渲染

vue的key值作用

1.key值作用: 相当于给元素一个身份证,可以让vue虚拟算法更好识别并渲染元素

*在同一个父元素中,子元素的key值必须是唯一的(key值最好是字符串或数字)

2.场景:

2.1 v-if指令: 切换盒子的是谷歌,如果盒子内部dom结构一致,vue算法可能不会更新dom

2.2 v-for: 写v-for指令最好添加key值(推荐字符串或者数字)