vue2官网教程（vue2.0教程）



1.1.1 绑定 class 样式

Vue 中绑定 class 的三种方式：

1. 字符串写法
2. 数组写法
3. 对象写法

这段代码演示了在 Vue 中绑定 class 的三种方式：

1.1.2 绑定 style 样式

Vue 中绑定样式有两种方式：

1. 对象写法
2. 数组写法

这段代码演示了在 Vue 中绑定样式的两种方式：

在 Vue 中，条件渲染是一种根据数据的值来动态显示或隐藏 DOM 元素的技术。

1.2.1. v - if 和 v - else - if 和 v - else

v-if 指令用于根据表达式的值来决定是否渲染一个元素，如果表达式返回 true，则元素被渲染，表达式返回 false 则不被渲染。v-else-if 和 v-else 则用于在 v-if 之后添加额外的条件逻辑。

1.2.2. v-show

v-show 指令也用于根据表达式的值来控制元素的显示与隐藏，但是与 v-if 不同的是，无论条件是否为真，被绑定的元素始终会被渲染到 DOM 中，只是通过 CSS 的 display 属性来控制显示与隐藏而已。

1.2.3 v - if 与 template 的配合使用

template 是 Vue 中的一个虚拟标签，用来包裹多个元素，但不会被渲染为实际的 DOM 元素。它常用于条件渲染指令，实现条件渲染而不引入额外的 DOM 元素。

1.3.1 v-for

在 Vue 中，v-for 指令用于迭代数组或对象，并为每项数据渲染出对应的元素，语法格式为：

其中 item 是形参，可以任意指定，代表数组中的每一项，items 是要遍历的数组。

1.3.2 key 的作用

虚拟 DOM 中 key 的作用：

在 Vue.js 中，当渲染列表或者进行动态数据更新时，Vue 会使用虚拟 DOM 来描述真实 DOM 的结构。而 key 就是虚拟 DOM 对象的标识，它的作用在于帮助 Vue 识别每个虚拟 DOM 节点的唯一性。

虚拟 DOM 对比算法规则：

在更新虚拟 DOM 时，Vue 需要比较新旧虚拟 DOM，以确定具体的更新操作。比较的规则如下：

• 当在旧虚拟 DOM 中找到与新虚拟 DOM 相同的 key 时：
  • 若虚拟 DOM 中内容没变，则直接使用之前的真实 DOM，不做更新操作。
  • 若虚拟 DOM 中内容发生了变化，则生成新的真实 DOM，并替换页面中之前的真实 DOM。
• 当在旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key 时：
  • 创建新的真实 DOM，并将其渲染到页面中。

在选择 key 时，我们应该考虑以下几点：

1. 最好使用每条数据的唯一标识作为 key，例如 id、手机号、身份证号、学号等具有唯一性的值。
2. 如果确定不会对数据进行逆序添加、逆序删除等破坏顺序的操作，并且仅用于渲染列表用于展示，那么使用 index 作为 key 是没有问题的。

1.3.3 Vue 监测数据改变的原理

当 Vue 实例创建时，会对 data 中的数据进行加工。加工的过程主要包括以下步骤：

1. 配置 Getter 和 Setter：

Vue 会遍历 data 中的每个属性，并为每个属性配置 getter 和 setter 方法。

2. 代理：

加工完成后，Vue 将 data 中的数据拷贝到 _vm.data 中，此时就可以通过 this.xxx 的方式直接访 data 中的数据，而不需要通过 _vm.data.xxx 的形式。

3. 数据监听：

在 setter 方法中，Vue 实现了一种调用机制，当数据被修改时，会调用 setter 方法。 setter 方法中写了一个引用，这个引用能够引起模板的重新解析。

通过以上步骤，Vue 实现了数据的响应式监测，使数据变化能够自动更新相关视图，从实现了 Vue 监测数据改的原理。

1.3.4 Vue.set 和 this.$set 方法

Vue 使用 setter 来实现监测对象中的数据，所以我们在创建 Vue 实例时就需要传入要监测的数据，对于后追加的属性，Vue 默认不会做响应式处理。

若要让后添加的属性也具有响应式，需要使用 Vue 提供的 API：

• Vue.set
• this.$set ，

举个例子：

当然还可以通过这两个方法修改某个对象的属性值。

1.3.5 数组的数据监视

如何监测数组中的数据？

通过封装数组更新元素和原生数组方法实现，其本质就是做了两件事：

1. 调用原生对应的方法对数组进行更新
2. 重新解析模板，进而更新页面

在 Vue 修改数组中的某个元素一定要用以下的方法：

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

这些方法已经被 Vue 重写，能够触发响应式更新，这些方法的本质是两步：首先调用原生数组方法对数组进行更新，然后重新解析模板，从而更新页面。

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

另外，也可以使用 Vue.set() 或 vm.$set() 方法来修改数组中的元素。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/31730.html