【九层之台】Web开发教程：5. Vuejs

Penelope ·

更新时间:2024-11-14

· 734 次阅读

目录5. Vuejs简介Hello Vue!Vue对象datamethodscomputed其他属性绑定控制属性属性值绑定双向绑定事件处理写在后面 5. Vuejs

本章的主要内容是带领大家了解前端框架Vuejs的基础使用方法。Vuejs有自己的官方网站，供大家随时参考学习：https://vuejs.org/ 官方网站上不仅有详细的指南，甚至还有视频教程供大家使用。

简介

如果说轻量级框架Jquery是使用JS对网页的修修补补的话，Vuejs就好像让你开高达。你的所有页面视图代码将首先交给Vuejs框架进行预处理，然后通过Vuejs渲染为最终的网页。因此，通过操作Vuejs框架中的数据，就可以实现对网页显示的动态更新。

这样的一种逻辑模式，被称为MVVM，即Model-View-ViewModel，通过Vuejs框架把核心数据模型和视图相连接，实现自然而高效的应用交互。

举个例子，如果你在做一个电商网页，要实现用户把商品添加进入购物车这个功能。在这里，购物车中的货物数据就是核心数据模型（model），而我们网页上购物车列表等呈现给用户看的HTML元素就是视图（view）。我们的Vuejs框架所做的，就是维持核心数据和视图的统一，但你改变购物车货物的数据时，网页上购物车列表的内容也会被更新。

Vuejs其实还支持组件化，所以成为渐进式的框架，你可以通过拼装组件来实现整个应用的构建。

下面让我们看一看，Vuejs是如何使用的。

Hello Vue!

现在我们又要拿出sublime啦！打开之前玩耍过的index.html所在的文件夹，在HTML文件中写入如下内容（完整代码哦）：


  Hello Vue
  
    {{ message }}

接下来打开index.js并写入如下内容：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

接下来使用浏览器打开index.html，就会发现，页面上并没有显示两个大括号，而是显示出了Hello Vue！这是为什么呢？让我们来学习一下上面代码的工作原理吧：

HTML代码第5行：引入Vuejs库。加载JS库通常被放在head元素中。在通常的网页上，我们往往使用公共CDN引入想要的JS库（这里使用了jsdelivr）。公共CDN就是给大家免费提供库的快速加载的网络服务。 HTML代码倒数第3行：引入我们自己写的脚本文件。通常自己的JS代码在body元素的最后引入，这是为了等待页面元素加载完全，让JS能够正常工作。

：在这里我们定义了一个具有属性id="app"的块元素，这也是Vuejs应用常用的写法。 JS代码第1行：新建Vue对象。因为引入了Vuejs库，我们可以新建一个Vue对象。变量名通常叫app，下面的内容都是新建的Vue对象的内部变量等。 JS代码第2行：在Vue对象内部，通过指定el变量的值，我们可以控制当前Vue对象绑定的HTML元素。el变量的值是一个字符串，与CSS选择器语法相同。 JS代码第3-5行：在Vue对象内部，指定data变量的值（是一个对象），就可以让这个子对象中的所有值被Vuejs框架自动追踪和更新。 HTML代码中的{{ message }}：两个大括号被称为Mustache语法，被两个大括号包含的文本会被Vue对象解析为代码。所以这里就是显示了Vue对象中data对象的message变量的值。

当HTML代码的元素加载完成以后，浏览器开始加载我们自己写的JS代码index.js，这个时候创建的Vue对象会自动接管属性id="app"的块元素和它内部的所有内容。这些内容将会经过Vuejs框架的处理，由Vuejs动态渲染。这部分原理非常复杂不在本篇教程的介绍范围内，有兴趣的读者可以自行学习。

在Vuejs接管的块元素外部写任何Mustache或者Vuejs相关的语法都是无效的。

初步见识到了Vuejs的作用原理以后，我们进一步了解一些Vuejs的使用方法。

Vue对象

首先我们先来了解一下Vue对象的内部写法。

上一节中我们已经讲过了el变量：Vue对象绑定的HTML元素。

data

data变量的值应当是一个对象，包含了需要在Vuejs框架中渲染的变量。注意，如果data变量中包含数组，数组元素不会被Vuejs自动追踪和更新，需要使用this.$set()函数，或者在改变以后使用this.$forceUpdate()强制重新渲染。

methods

methods变量的值应当是一个对象，对象内部的每一个变量的值都必须是一个函数。所有需要在Vuejs框架内实现的交互，或者需要访问Vue对象内部的函数过程都必须写在methods对象内部。在methods函数内部，可以用this直接访问当前Vue对象的其他函数或者data中的数据（不需要再添加methods或者data）。例如，在某个函数中可以用this.message直接访问上一节中data对象中的message变量。

computed

computed与methods类似，应当包含函数。在Vuejs框架中，计算属性computed是指一组自动更新的变量，这些变量可能与其他变量有一定的依赖关系（通过一个函数计算出来）。计算属性保证，当Vue对象中的变量有更新的时候，依赖被更新变量的计算属性值也会被更新。

例如：

data: {
  a: 1,
  b: 2
},
computed: {
  sum: function() {
    return this.a + this.b;
  }
}

无论变量a和b如何变化，计算属性sum始终会保持为它们的和。

其他

其他一些内容包括监视属性watch，可以在变量发生变化的时候触发特殊函数。还有生命周期函数。

生命周期函数是指，在Vue对象从创建到最终被浏览器销毁的各个阶段，你可以自己定义执行一些函数过程。

例如，在Vue对象被创建的时候，你可以执行一部分初始化操作：

created: function() {
  console.log("Vue object is created!");
}

具体的生命周期文档详见官网上的章节。

属性绑定

除了最开始介绍的Mustache语法直接控制网页显示的内容，Vuejs框架还通过在HTML代码中加入特殊的属性，来协助控制网页的内容和渲染。

控制属性

Vuejs框架可以通过控制属性来控制HTML元素的渲染情况。

v-if属性：控制当前HTML元素是否渲染。 v-else属性：没有属性值，与v-if连用。 v-show属性：控制当前HTML元素是否显示。 v-for属性：循环渲染。

这些属性的值均为字符串，会被Vuejs框架解析为代码。

v-if和v-show的区别：如果HTML元素不渲染，DOM上直接没有这个元素。如果HTML元素不显示，只是它被设置了CSS属性display: none;而已，它还可以具有其它功能。

例如HTML中写（放在id="app"的块元素里面）：

A
others

在JS中的data对象中的变量choice的值，就会直接影响网页上这两个元素的渲染情况。

再例如，data对象中具有变量list: ["A", "B", "C", "D", "E"]，则下列代码会自动循环渲染出这个数组的所有项。

{{ l }}

就好像循环一样，生成了循环变量l，指代的是列表中的每一项。（注意，虽然用的是in，但是指代的是数组中的值，不是下标）

尝试一下吧！

属性值绑定

有时候我们还需要控制元素的属性，比如动态改变元素的CSS（控制style属性），或者直接增加CSS类名（控制class属性），这个时候我们可以使用属性修饰符v-bind。

例如：

Example

在原有属性之前添加修饰符和冒号，就可以让引号内的内容被解析为代码（一个变量的值）。修改exStyle的值就可以动态更新style属性的值。

同时，因为属性值绑定使用非常多，我们可以省略v-bind，只留一个冒号：

Example

。

style和class属性值绑定还有更多用法，请参考官网教程。

双向绑定

如果需要操作的元素是一个输入框input或者textarea，则可以使用双向绑定v-model：

在这个代码中，首先绑定了属性placeholder的值到变量tip上，这个绑定是单向的，改变变量tip的值可以改变属性placeholder。接下来双向绑定了输入内容到变量content上，如果改变变量content的值，输入框的内容会更新；如果用户改变了输入框的内容，变量content也会更新。

事件处理

为了实现用户对网页的操作，Vuejs框架提供了事件属性，使用属性修饰符v-on来控制。

例如：