vue教材-第二章数据绑定与生命周期|江阴雨辰互联

2023年7月18日发(作者：)

第二章数据绑定与生命周期

本章要点：

 模板语法

 Vue属性绑定

 Vue双向数据绑定

 Vue计算属性Computed

 计算属性与methods的区别

 Vue生命周期

Vue是一个MVVM框架，核心功能就是实现双向的数据绑定。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。Vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

这样一来，就彻底变革了之前DOM的开发方式，之前DOM驱动的开发方式尤其是以jQuery为主的开发时代，都是DOM变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的开发时代，远远抛弃了DOM开发主导的时代了。图2-1 MVVM模型

2.1 Vue 模板语法

使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue

实例的数据。的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进

DOM 的系统。数据绑定最常见的形式就是使用 “Mustache” 语法“{{}}”（双大括号）的文本插值。

下面主要从文本插值，HTML，JavaScript 表达式，属性绑定，样式绑定，双向数据绑定这几个方面来介绍模板语法。

2.1.1 文本插值

Vue支持动态渲染文本，即在修改属性的同时，实时渲染文本内容。文本插值以“{{}}”和v-html指令形式插入，然后输出纯文本。

【例2-1】插值

new Vue({

el: '#app',

data: {

message: '用户名' +

'密码'

//这里不支持换行，如果要换行用单引号括起来用+号连接。

}

}); 运行结果如图2-2：

图2-2 插值

2.1.2 表达式绑定

对于所有的数据绑定，Vue支持JavaScript的所有表达式，当然Vue还可以支持表达中的任何计算、函数处理等。

例如：

1. {{ number + 1 }}

2. {{ ok ? 'YES' : 'NO' }}

3. {{ ('').reverse().join('') }}

每个绑定只能包含单个表达式，下面代码都不会生效

2. {{ var a = 1 }}

4. {{ if (ok) { return message } }}

【例2-2】使用JavaScript表达式绑定

我的年龄是：{{ age *2 }}岁

运行结果如图2-3所示

图2-3 使用JavaScript表达式绑定

对于JavaScript表达式在模板中的使用，只适用于简单表达式，复杂的可以用后面要学习的计算属性computed实现。

2.1.3 属性绑定

Vue中不能直接使用{{ expression }}语法进行绑定html的标签，而是用它特有的v-bind指令。

绑定的语法结构：

<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名">

例如:

【例2-3】演示Vue属性绑定

首页

产品

服务

关于

运行结果如图2-4所示图2-4 属性绑定

专家提示：

等价于

2.1.4 输出纯HTML

由于Vue对于输出绑定的内容提前做了encode编码，保障在绑定到页面上显示的时候不至于被xss攻击。但某些场景下，我们确保后台数据是安全的，那么我们就要在网页中显示原生的HTML标签。Vue提供了v-html指令。

【例2-4】输出纯HTML

运行结果如图2-5 图2-5 输出纯HTML

2.1.5 样式绑定

对于普通的属性的绑定，只能用上面讲的绑定属性的方法。而Vue专门加强了class和style的属性的绑定，可以进行更复杂的对象绑定、数组绑定、样式绑定和类绑定等。

1 绑定样式对象

项目中经常我们需要对样式进行切换，比如：div的显示和隐藏，某些标签active（激活）等。Vue提供的对象绑定样式的方式就很容易做这些事情。

2 混合普通的HTML标签样式类及绑定样式对象

v-bind:class 指令可以与普通的 class 属性共存。

3 绑定data中的样式对象

直接在html属性中的双引号内写对象，还是很不爽，也没有智能提示，很容易写错。

Vue可以让我们直接把绑定的class字符串指向data的一个对象，这样就非常方便了，既可以有智能提示，又可以很复杂进行编辑。

v-bind:class="classObject">

4 绑定样式数组

其实绑定数组，就是绑定样式对象的延续。

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

当然还有很多其他很有趣的支持，就不赘述了。

5 内联样式绑定

内联样式的绑定，非常类似于样式类的操作。v-bind:style 的对象语法十分直观，看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）。

内联样式绑定

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，会自动侦测并添加相应的前缀。

6 绑定的数据过滤器

过滤器本质就是数据在呈现之前先进行过滤和筛选。官网上写的不错，我就不再赘述，下面是官网的描述：允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在

mustache 插值的尾部，由“管道符”指示：

Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。如果在其他指令中实现更复杂的数据变换，应该使用计算属性。

过滤器函数总接受表达式的值作为第一个参数。

new Vue({

// ...

filters: {

capitalize: function (value) {

if (!value) return ''

value = ng()

return (0).toUpperCase() + (1)

}

});

过滤器可以串联：

过滤器是 JavaScript 函数，因此可以接受参数：

//这里，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

2.1.6 数据双向绑定

上面的例子我们大多讲的是单向的 js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？ HTML中只有表达能接受用户的输入，最简单的演示双向绑定的就是文本框了。

Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。

【例2-5】数据双向绑定

请输入信息：

您输入的信息是：{{ msg }}

运行结果如图2-6所示图2-6 双向数据绑定

最终的结果就是：你改变input文本框的内容的时候，p标签中的内容会跟着进行改变，是不是很神奇呢！

关于其他表单的绑定的语法我就不赘述了，还是参考官网吧。

vue提供了大量的绑定的语法和方法，非常方便我们进行数据的绑定，尤其它是双向的数据绑定，极大的减少了我们DOM操作的麻烦程度。

2.2 计算属性

2.2.1 计算属性

在做数据绑定时候,数据要进行处理之后才能展示到html页面上，虽然vue提供了非常好的表达式绑定的方法，但是只能应对低强度的需求。比如：把一个日期按照规定格式进行输出，可能就需要我们对日期对象做一些格式化，如使用表达式可能就捉襟见肘了。

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。 Vue对象提供了computed属性，可以让我们开发者在里面可以放置一些方法，协助我们绑定数据操作，这些方法可以跟data中的属性一样用，但注意这些方法用的时候不要加()。

我们把上面的例子用计算属性的方式重写一下，如下示例：

【例2-6】computed计算属性的使用

显示信息: "{{ message }}"

显示翻转信息: "{{ reversedMessage }}"

运行结果如图2-7所示图2-7 computed计算属性的使用

除了上例简单的用法，计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

【例2-7】computed计算属性和methods的多数据使用

商品计价系统

商品1价格

商品1数量

商品1的总价为：￥{{}}元，商品2的总价为：￥{{}}元，汇总价格为：￥{{price}}元

运行结果如图2-8所示图2-8 computed计算属性和methods的多数据使用

2.2.2 getter和setter

每一个计算属性都包含一个getter 和一个setter ，上面的示例都是计算属性的默认用法，只是利用了getter 来读取。

在你需要时，也可以提供一个setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作，例如：

【例2-8】getter和setter的使用

姓

名

您的姓名：{{fullName}}

运行结果如图2-9所示

图2-9 getter和setter的使用

绝大多数情况下，我们只会用默认的getter 方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter 都声明。

2.2.3 计算属性缓存

除了使用计算属性外，我们也可以通过在表达式中调用方法来达到同样的效果，如： //HTML中：

// 在组件中

methods: {

reverseTitle: function () {

return ('').reverse().join('');

}

我们可以将同一函数定义为一个方法而不是一个计算属性，两种方式的最终结果确实是完全相同的。只是一个使用reverseTitle()取值，一个使用reverseTitle取值。

然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

2.2.4 计算属性与methods的区别

computed可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

computed和methods的区别：

computed: {

}

reversedText: function() {

return (',').reverse().join(',');

}

methods: {

}

reversedText: function() {

return (',').reverse().join(',');

}

两个结果输出的结果是一样的，但两者之间的差别就是在计算结果不发生改变的情况下，computed 的方法只被调用了一次，即便是多处多次调用，computed 也只被调用一次，这就是 computed缓存的优势。computed一般使用简单的表达式对内容进行简单的转换与使用过滤器对内容进行简单的转换用的比较多。

2.3生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就Vue的生命周期。

2.3.1 Vue生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

Vue 生命周期共分为 8 个阶段:

beforeCreate（创建前）-> created（创建后）->beforeMount(载入前)->mounted（载入后）->beforeUpdate（更新前）->updated（更新后）->beforeDestroy（销毁前）->destroyed（销毁后）

2.3.2钩子函数

Vue提供的可以注册的8钩子函数都在上图片的有标注。他们分别是： 1 beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2 created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data

observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el