详解Vue2基本语法第二弹

绑定样式

1、Class样式

写法

:class="xxx",xxx可以是字符串、对象、数组

2、style样式

• :style="{fontSize:xxx}"，其中xxx是动态值

• :style="[a,b]"，其中a,b是样式对象

条件渲染

1、v-if

写法

（1）v-if="表达式"

（2）v-else-if="表达式"

（3）v-else="表达式"

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if与v-else-if可以一起使用，但要求结构不能被打断

2、v-show

写法：v-show="表达式"

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

列表渲染

v-for指令

1、用于展示列表数据

2、语法

v-for="(item,index) in xxx" :key="yyy"

3、可遍历：数组、对象、字符串、指定次数

key的原理

react、vue中的key有什么作用？

1、虚拟DOM中key的作用

key是虚拟DOM对象的标识，当数据发生变化时，vue会根据【新数据】生成新的虚拟【DOM】，随后vue进行新旧虚拟DOM的对比，比较规则如下：

2、对比规则

（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：

1. 若虚拟DOM中内容不变，直接使用之前的真实DOM
2. 旧虚拟DOM中未找到与新虚拟DOM相同的key，则创建新的真实DOM随后渲染到页面中

3、用index作为key可能会引发的问题

（1）若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。

（2）如果结构中还包含输入类的DOM：会产生错误DOM更新导致界面有问题。

4、开发中如何使用key

（1）最好使用每条数据唯一标识作为key，比如id、手机号、学号等唯一值

（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染页面作为展示，使用index也可以

vue监视数据的原理：

1、vue会监视data中所有层次的数据

2、如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据

（1）对象中后添加的属性，vue默认不做响应式处理

（2）如需给后添加的属性做响应式，请使用以下API

Vue.set(target,propertyName/index,value)或

vm.$set(target,propertyName/index,value)

3、如何监测数组中的数据

通过包裹数组更新元素的方法实现，本质是做了两件事情

（1）调用原生对应的方法对数组进行更新

（2）重新解析模板，进而更新页面

4、在vue修改数组中的某一个元素一定要用到如下方法

（1）使用这些API：push()、shift()、unshift()、splice()、sort()、reverse()

（2）Vue.set()或vm.$set()

特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

收集表单数据

• 若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value值

• 若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值

• 若：<input type="checkbox"/>

1、没有配置input的value属性，那么收集的就是checked（勾选或未勾选，是布尔值）

2、配置input的value属性：

（1）v-model的初始值是非数组，那么收集的就是checked

（2）v-model的初始值是数组，那么收集的就是value组成的数组

---

v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

内置指令

• v-text：

1、作用：向其所在的节点中渲染文本内容

2、与插值语法的区别：v-text 会替换掉节点内的内容，{{xxx}}则不会

• v-html:

1、作用：向指定节点中渲染包含html结构的内容

2、与插值语法的区别：

（1）v-html会替换掉节点中所有的内容，{{xxx}}则不会

（2）v-html可以识别HTML结构

3、严重注意：v-html有安全性问题

（1）在网站上动态渲染任意html是非常危险的，容易导致XSS攻击

（2）一定要在可信的内容上使用v-html，永远不要在用户提交的内容上

• v-cloak：

1、本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性

2、使用css配合v-cloak可以解决网速慢时页面展示出的{{xxx}}的问题

• v-once:

1、v-once所在的节点在初次动态渲染后，就视为静态内容了

2、以后数据的改变不会引起v-once所在结构的更新，可以用于性能优化

• v-pre:

1、跳过其所在节点的编译过程

2、可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译