vue指令语法以及其作用

v-bind

语法

v-bind:属性名='vue变量'

简写: :属性名='vue变量'

作用

给标签属性赋vue变量

v-on

语法

v-on:事件名='method中的函数

v-on:事件名="methods中的函数(实参)"

简写: @事件名='methods中的函数'

作用

给标签绑定事件

v-on中修饰符的用法

用法:@事件类型.修饰符.修饰符='事件处理函数'

时间修饰符有:1.事件修饰符stop prevent2.按键修饰符 enter esc(按键修饰符只能给键盘事件绑定)

v-model

语法:

v-mode='变量名'(暂时只能作用在表单上)

![E6R26JG2YJ~9G`)_CE@(7N.png

作用

双向数据绑定:数据变化->视图自动同步 视图变化->数据自动同步

把vue的'数据变量'和表单上的'value'属性双向绑定在一起

用法

select:v-model要写在select标签上绑定得到是option的value属性

input:checkbox

数组绑定的是input的value属性

非数组绑定的是input的checked属性

v-html-v-text

作用

设置标签的显示内容

用法

v-html(v-text)='vue数据集变量'相当于webapi的innerhtml和innertext

v-if/v-show

作用

用于显示隐藏元素

用法

v-show='vue变量' ------- v-if='vue变量'

区别

v-if控制的是DOM元素的添加和删除

v-show控制的是display:none

v-fro

作用

大多数用于循环创建数组,可以遍历数组/对象/数字/字符串

用法

. v-for='(值变量,索引变量) in 目标结构' :key='唯一的字符串或数字' .v-for='值变量 in 目标结构 '

注意

v-for的临时变量名不能作用到v-for外 统计标签的key值不能重复

v-for更新检测机制

更新监测:

是否修改了原数组,如果修改了就会更新页面,解决方案:重新赋值/this.$set()

就地复用:

..不设置key或key设置为index时会采用该方案

..v-for收到更新需求后,会尽可能的复用元素,减少DON元素的创建

虚拟DOM:

本质是一个js对象,保存了节点信息,可以减少DOM操作,提高渲染性能 在更新页面时,新旧DOM对比,diff算法对比,找到差异后打补丁更新真实DOM

key的作用

无key采用就地复用策略,有key按照key来进行对比

作用:进一步提高渲染性能

动态classh和style

calss

class={类名,布尔值}---------是否应用该类名

style={css样式名:css样式值}------应用css样式