初探前端框架 Vue2 之一

发表于 更新于 阅读次数： 评论数： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

大纲

前言

MVVM 思想

  • M：即 Model（模型），包括数据和一些基本操作
  • V：即 View（视图），页面的渲染结果
  • VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）

在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。当用户操作视图后，开发人员还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的。这样可以将开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上。

  • 一旦 Model 发生了改变，View 上自然就会呈现出来
  • 当用户修改了 View，Model 中的数据也会跟着改变

Vue 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。更多的 Vue 介绍可参考 Vue v2 中文官网、Vue GitHub 项目。

Vue 安装

Script 方式安装

可以直接下载 Vue 的 JS 文件，然后使用 <script> 标签引入，Vue 会被注册为一个全局变量。

CDN 方式安装

1
2
3
4
5
<!-- 开发环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

若使用了原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

1
2
3
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.esm.browser.js'
</script>

NPM 方式安装

NPM 安装步骤

初始化 NodeJs 项目，会自动生成 package.json 和 package-lock.json 文件

1
$ npm install -y

给 NodeJs 项目安装 Vue，安装完成后项目下会多出 node_modules 目录

1
2
3
4
5
# 安装最新版本（适用于开发环境）
$ npm install vue

# 安装指定版本（适用于生产环境）
$ npm install vue@2.7.10

不同构建版本的说明

在 NPM 包的 dist 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：

UMDCommonJSES Module (基于构建工具使用)ES Module (直接用于浏览器)
完整版 vue.jsvue.common.jsvue.esm.jsvue.esm.browser.js
只包含运行时版 vue.runtime.jsvue.runtime.common.jsvue.runtime.esm.js-
完整版 (生产环境)vue.min.js--vue.esm.browser.min.js
只包含运行时版 (生产环境)vue.runtime.min.js---

  • 完整版：同时包含编译器和运行时的版本。

  • 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

  • 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

  • UMD：UMD 版本可以通过 <script> 标签直接用在浏览器中。CDN 的 https://cdn.jsdelivr.net/npm/vue@2.7.10 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。

  • CommonJS：CommonJS 版本用来配合老的打包工具比如 Browserify 或 Webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。

  • ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件：

    • 为打包工具提供的 ESM：为诸如 Webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行 tree-shaking 并将用不到的代码排除出最终的包。为这些打包工具提供的默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)。

    • 为浏览器提供的 ESM (2.6+)：用于在现代浏览器中通过 <script type="module"> 直接导入。

Vue 快速入门

Vue 简单使用说明

  • 使用 Vue 实例管理 DOM
  • DOM 与数据 / 事件等进行相关绑定
  • 开发者只需要关注数据、事件等处理，无需关心视图如何进行更新

声明式渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1> Hello {{name}} </h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "Jack"
            }
        });
    </script>
</body>
</html>
  • 首先通过 new Vue() 来创建 Vue 实例
  • 然后 Vue 的构造函数接收一个对象，对象中有一些属性
    • el：是 element 的缩写，通过 id 选中要渲染的页面标签，在本案例里选中了一个 DIV 标签
    • data：数据，数据是一个对象，里面有很多自定义的属性，都可以渲染到视图中
      • name：指定了一个 name 属性
  • 最后在页面的 h1 标签中，通过 {{name}} 的方式，来渲染刚刚定义的 name 属性

代码运行效果

使用 Vue 的声明式渲染，上述 HTML 代码运行后的效果如下，打开浏览器的 JavaScript 控制台，通过执行 app.name='Peter' 来改变模型，将看到视图会相应地更新

单向绑定

单向绑定，也就是模型变化会引起视图变化（渲染），但是反过来就不行。

v-bind 指令

使用 v-bind 指令绑定 HTML 标签的 attribute（属性）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-bind:title="message">
            鼠标悬停几秒钟，查看此处动态绑定的提示信息！
        </span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        });
    </script>
</body>
</html>

双向绑定

双向绑定，也就是模型变化会引起视图变化（渲染），反之亦然。

v-model 指令

使用 v-model 指令进行双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <label>Please input a number: </label><input type="text" v-model="number" >
        <h1> Hello {{name}}, you {{number}} have books</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "Jack",
                number: "1"
            }
        });
    </script>
</body>
</html>

代码运行效果

使用 v-model 指令进行双向绑定，上述 HTML 代码运行后的效果如下，页面上显示的数字会随输入框的内容一起变化

事件绑定

v-on 指令

使用 v-on 指令绑定点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="number++">Add Books</button>
        <h1> Hello {{name}}, you have {{number}} books</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "Jack",
                number: "1"
            }
        });
    </script>
</body>
</html>

或者在 Vue 实例中定义方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="add">Add Books</button>
        <h1> Hello {{name}}, you have {{number}} books</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "Jack",
                number: "1"
            },
            methods: {
                add () {
                    this.number++;
                }
            },  
        });
    </script>
</body>
</html>

代码运行效果

使用 Vue 的点击事件绑定，上述 HTML 代码运行后的效果如下，点击按钮后，页面上显示的数字会递增

Vue 开发工具

VSCode 插件

  • Vetur - Vue 语法高亮、智能感知、Emmet 等
  • Vue 3 Snippets - Vue2、Vue3 代码片段快速生成

Chrome 浏览器调试插件

应用商店安装

访问 Chrome 应用商店（依赖科学上网），然后在搜索框搜索 Vue Devtools，最后直接点击插件进行安装即可。

源码编译安装

1
2
3
4
5
6
7
8
9
10
11
# 下载源码
$ git clone https://github.com/vuejs/vue-devtools

# 进入源码目录
$ cd vue-devtools

# 安装依赖
$ npm install

# 编译打包
$ npm run build

编译打包成功后会在 shells 下生成 chrome 文件夹，此文件夹就是用来存放编译打包生成的 Chrome 扩展程序。

打开 Chrome 浏览器 > 更多工具 > 扩展程序 > 打开开发者模式，点击加载已解压的扩展程序，找到刚才生成的 chrome 文件夹，选择 vue-devtools > shells > chrome 放入，安装成功后的截图如下：

插件使用说明

Chrome 浏览器打开 Vue 项目的页面后，按下快捷键 F12，点击选择 vue 标签页就可以开始使用插件了