超详细：Vue入门

Vue(发音为 /vjuː/，类似 view)是近些年比较流行的前端框架之一，和 React、Angular 并称为前端三大框架。其中 Vue 简单易学的特点成为国内主流，很多公司已经把它列为一个前端开发人员必须要掌握的技术点了。

Vue 简介

Vue2.x官网

Vue3.x 官网

什么是 Vue

目前 Vue 主要有 2.x 和 3.x 两个主流的大版本，由于 Vue3 的普及问题，本书并没有直接使用 3.x 版本，主要教学 2.x 版本。

官网（2.x 版）对 Vue 的定义是：Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

MVVM 思想

Vue 在设计上使用的 MVVM（Model-View-ViewModel）模式，其中

Model：模型，负责存储和提供数据
View：视图，负责页面展示
ViewModel：视图模型，是 View 和 Model 之间的桥梁。它负责处理 View 和 Model 之
间的交互，比如将 Model 的数据转换为 View 可以展示的格式，或者将用户在 View 上
的操作转换为 Model 的数据更新。

MVVM 将 View 的状态和行为抽象，把视图层和业务逻辑层分离，ViewModel 就是完成这些工作的。

MVVM 模式的优势

低耦合：View 可独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化时 Model 可以不变，当 Model 变化时 View 也可以不变。
可重用性：由于三个部分相对独立，所以可重用性高，一个 Model 可以用于多个 View，

一个 ViewModel 的业务逻辑也可以作用于多个 View。
独立开发：同样由于独立性，设计人员可以专注于 View 视图的开发，擅长业务逻辑的开发人员可以专注开发 ViewModel，更易于团队合作。

Vue 入门

Vue 体验

尝试 Vue.js 最简单的方法是使用 Hello World 例子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app1" style="border: 1px solid black;">
        <h3>这是 app1 的作用域</h3>
        <my-component></my-component>
    </div>
    <div id="app2" style="border: 1px solid black;">
        <h3>这是 app2 的作用域</h3>
        <my-component></my-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        // 注册全局组件
        Vue.component('MyComponent', {
            // 注意：template 使用的是模板字符串，可以换行
            template: `<button @click='addCount'>
        全局组件，被点击次数是{{count}}
        </button>`,
            // 注意：组件的 data 必须是函数，数据是独立的，不会相互影响
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                addCount() {
                    this.count++;
                }
            }
        });
        // 创建 Vue 实例 app1
        const app1 = new Vue({
            el: '#app1'
        })
        // 创建 Vue 实例 app2
        const app2 = new Vue({
            el: '#app2'
        })
    </script>
</body>

</html>

这是一段非常简单的 Vue 入门代码，却展示了 Vue 最核心的功能：数据双向绑定。当我们修改输入框中的姓名时，对应绑定的变量 youName 也会实时显示在 H1 标签中，做到同步修改，运行结果如图所示。这极大简化了传统 JS 需要先绑定 blur 事件，读取输入框的值，再选中 H1 标签修改内容的一系列繁琐操作。

Vue 开发步骤梳理

下载或通过 CDN 引用 Vue.js 库

使用一个 JS 的框架或库，通常我们可以下载到本地通过 script 标签引用，或者通过CDN 的方式引入。

(1) Vue 下载地址：

Vue下载地址

点击对应版本进行下载即可。

(2) CDN 引入

内容分发网络（Content Delivery Network，CDN）是一种网络架构，旨在提高用户对互

联网上内容的访问速度和性能。CDN 通过在全球各地部署大量的服务器节点，将内容缓存

到离用户更近的服务器上，从而减少内容传输的距离，提高访问速度和响应时间。当用户

请求访问某个网站或应用程序时，CDN 会自动选择距离用户最近的服务器节点，从该节点

提供内容，而不是直接从原始服务器获取内容。

对于生产环境，推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可

预期的破坏。

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

注意：CDN 加速的优点是成本低、速度快、适合访问量比较大的网站。

创建 View 视图

在 html 代码中，我需要确定一个被 Vue 所管理的范围，表示此范围内的 HTML 内容都交给 Vue 进行解析和变化。下面代码中的 div 就是即将被 Vue 管理的范围。

<div id="app">
    <input type="text" v-model="youName" placeholder="请输入你的姓名">
    <h1>Hello, {{ youName }}!</h1>
</div>

实例化一个 Vue 对象

<script>
    let app = new Vue({
        el: '#app',
        data: {
            youName: ''
        }
    })
</script>

代码中 new 了一个 Vue 对象，其中的 el 属性指定了 ID 选择器选中<div id=”app”>作为 Vue的模板代码，data 为绑定的数据。

绑定和使用数据

在 input 标签使用 v-model 绑定了 data 中的属性 youName，而在 H1 标签内容中 youName属性用一对双花括号包裹，一旦修改了输入框的内容，youName 的值就同时修改了，H1 的内容也同时修改了。

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。

表达式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- JSON 变量 -->
        <p>{{ msg }}</p>
        <!-- 数字类型 -->
        <p>{{ 98 }}</p>
        <!-- 字符串类型 -->
        <p>{{ "Hello Vue!" }}</p>
        <!-- JavaScript 表达式 -->
        <p>{{ "Hello " + name }}</p>
        <p>{{ 10 / 5 }}</p>
        <!-- 三元表达式 -->
        <p>{{ ok ? 'YES' : 'NO' }}</p>
        <p>{{ msg.split('').reverse().join('') }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "Mustache 语法",
                name: "菲菲",
                ok: true
            }
        });
    </script>
</body>

</html>

Vue 指令

指令的概念

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上节提到的插值表达式这里也是可以适用，只是不需要编写双花括号了。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

常用指令

内容输出指令 v-text、v-html，条件渲染指令 v-if、 v-else、v-show，列表渲染指令 v-for，数据绑定指令 v-model、v-bind，事件绑定指令 v-on等。

内容输出指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 使用插值表达式 -->
        <p>{{ msg }}</p>
        <!-- 使用 v-text 指令 -->
        <p v-text="msg"></p>
        <!-- 使用 v-html 指令 -->
        <p v-html="msg"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: '<h1>Hello Vue!</h1>',
            }
        });
    </script>
</body>

</html>

条件渲染指令

作为模板语言，条件判断也是必不可少的，其中 v-if 和 v-else 指令是控制元素是否需要出现在 DOM 树结构中，注意 v-else 指令必须紧跟着 v-if 指令的后面，中间不能添加其他元素。而 v-show 是控制元素是否需要显示在界面中，此元素会一直存在于 DOM 树结构中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-if="ok">我是 v-if 指令控制的 DIV</div>
        <div v-else>我是 v-else 指令控制的 DIV</div>
        <div v-show="show">我是 v-show 指令控制的 DIV</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                ok: true,
                show: true
            }
        });
    </script>
</body>

</html>

我们设置数据 ok 为 true，show 也为 true，查看浏览器运行效果，并键入 F12 打开“开发者工具”中的 Elements 选项卡，查看对应的 DOM 结构，可以发现我们写了 3 个 DIV 元素，但是在 DOM 结构中只有 v-if 和 v-show 的 DIV 存在，v-else 对应的 DIV 因为不满足条件，被删除了。

接下来我们把 ok 和 show 都设置为 false，再查看结果。

data : {
    ok : false,
    show : false
}

运行结果如图所示，页面只显示了 v-else 指令内容，而 v-show 是通过将 CSS 样式中 display设置为 none 的方式隐藏的，依然存在于 DOM 结构中。

下面我们总结一下 v-if 和 v-show 的区别，v-if 控制的是元素是否需要出现在 DOM 结构中，作用是添加和删除元素，v-show 控制的是元素的隐藏和显示，无论是否显示都一直在 DOM 结构中。

从结果来看 v-if 和 v-show 都是元素是否渲染在界面上，那么使用时就可以随便选么？当然不是，它们各自的使用场景如下：

v-if 指令有更高的切换消耗，因为条件成立时是需要通过添加元素改变 DOM 树结构的，不成立时又要删除元素且内部指令不执行，如果频繁的显示和隐藏性能消耗大，适合首次加载时判断是否需要渲染，后续不再更改条件。
v-show 无论条件是否成立，元素都必须添加到 DOM 树中，所以有更高的初始渲染消耗，通过 CSS 样式来控制是否显示，性能消耗小，适合频繁切换显示隐藏的元素。

列表渲染指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 使用 v-for 修饰的 li 标签会重复生成 -->
            <!-- course 是循环元素（课程），index 是下标 -->
            <li v-for="(course,index) in courses" :key="index">
                {{index}} 、课程：{{course.name}}
                <ul>
                    <!-- 嵌套循环，显示课程的章节信息 -->
                    <li v-for="(chapter,idx) in course.chapters" :key="idx">
                        {{idx}} 、章节：{{chapter.name}} 课时：{{chapter.lesson}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                courses: [
                    {
                        name: "前端框架入门", chapters: [
                            { name: "Vue.js", lesson: 4 },
                            { name: "React.js", lesson: 8 },
                            { name: "Angular.js", lesson: 16 }
                        ]
                    },
                    {
                        name: "后端框架入门", chapters: [
                            { name: "MyBatis", lesson: 8 },
                            { name: "Spring", lesson: 8 },
                            { name: "SpringMVC", lesson: 16 }
                        ]
                    }
                ]
            }
        });
    </script>
</body>

</html>

数据绑定指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 写死 src，不能动态改变 -->
        <img src="images/vue.png" />
        <!-- 使用 v-bind 指令，可动态改变 src -->
        <img v-bind:src="imageSrc" />
        <!-- 简写写法 -->
        <img :src="imageSrc" />
        <!-- 绑定对象，则属性值为 true 的添加，false 的不添加 -->
        <p v-bind:class="{ classA: hasA, classB: hasB }">段落 1</p>
        <!-- 绑定数组，则数组中的样式都会添加 -->
        <p v-bind:class="classArray">段落 2</p>
    </div>
    <script src=" https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                imageSrc: 'images/vue.png',
                hasA: false,
                hasB: true,
                classArray: ['classA', 'classC']
            }
        });
        setTimeout(function () {
            // 3 秒后修改图片属性值，查看图片是不是变化了
            app.imageSrc = 'images/react.png';
        }, 3000);
    </script>
</body>

</html>

我们需要等待 3 秒后，可以看到后面两张图片的变化，因为我们通过 Vue 实例对象修改了 imageSrc 这个属性，导致用 v-bind:src 绑定此属性的两张图片的 src 跟着变化。再看”开发者工具”中的 Elements 选项卡，会发现段落 1 中只用到了类样式 classB，因为 hasB 为 true值。段落 2 则使用了数组，所以类样式 ClassA 和 ClassC 都存在。

事件绑定指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .container {
            width: 400px;
            margin: 0 auto;
            text-align: center;
        }

        .square {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
    <div id="app" class="container">
        <div class="square" v-show="show"></div>
        <br />
        <button @click="toggle()">点击切换</button>
        <!-- <button v-on:click="toggle()">点击切换</button> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                show: true
            },
            // 事件函数需定义在 methods 中
            methods: {
                // ES6 对象函数的简写方式
                toggle() {
                    this.show = !this.show;
                }
            }
        });
    </script>
</body>

</html>