Vue.js 简介

落日映苍穹つ 2021-09-07 08:10 259阅读 0赞

### 一、Vue.js 简介 ###

*   *  1.1 认识 Vue.js
     *  1.2 Vue.js 安装
     *  1.3 Vue.js 初体验
     *   *  案例一
         *  案例二
         *  案例三
     *  1.4 Vue.js 的 MVVM
     *  1.5 Vue 实例的 options
     *  1.6 Vue 的生命周期

## 1.1 认识 Vue.js ##

*  Vue (读音 /vjuː/，类似于 view)
 *  Vue 是一套用于构建用户界面的**渐进式框架**，什么是渐进式的呢？
    
     *  渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验体验。
     *  或者如果你希望将更多的业务逻辑使用使用 Vue 实现，那么可以通过 Vue 的核心库以及其生态系统，比如 Core + Vue-roter + Vuex，也可以满足你各种各样的需求。
 *  Vue 有很多特点和 Web 开发中常见的高级功能
    
     *  解耦试图和数据
     *  可复用的组件
     *  前端路由奇数
     *  状态管理
     *  虚拟 DOM

## 1.2 Vue.js 安装 ##

1.  CDN 引入

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

1.  下载后引入

开发环境：https://vuejs.org/js/vue.js
    
    生产环境：https://vuejs.org/js/vue.min.js

1.  NPM 安装

## 1.3 Vue.js 初体验 ##

### 案例一 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70]

<!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">{
       { message }}</div>
    
        <div>{
       { message }} </div>
    
        <script src="../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { message: 'Hello World!' } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 1]  
       通过浏览器可以看到 id 为 app 的 div 显示出了我们在 JS 中定义的 message 对应的值，而另一个 div 并没有显示。

阅读 JS 代码，会发现创建了一个 Vue 对象。并且创建 Vue 对象的时候，传入了一些 options: \{\}

*  \{\} 中包含了 `el` 属性：该属性决定了哪一个元素(element)交由 Vue 框架管理。所以 id 为 app 的元素碰到`{ { message }}`的语法则会让 Vue 框架去解析，最后可以解析出`Hello World`。而第二个 div 并没有交由 Vue 框架管理，所以并不能被 Vue 解析，只能显示原样。
 *  \{\} 中包含了 `data` 属性：该属性中通常会存储一些数据。
    
     *  这些数据可以是我们直接定义出来的，如上。
     *  也可以是来自网络，从服务器加载的。

浏览器执行代码的流程：

*  执行到 11-13 行代码显示出对应的 HTML。
 *  执行到 17 行代码时创建 Vue 实例，并且对原 HTML 进行解析和修改。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 2]  
       接着我们在控制台修改 Vue 实例对象 message 的值，可以看到浏览器的数据也发生了对应的变换。

这种页面随着数据的变化而变化，便称为响应式。

### 案例二 ###

现在，我们需要展示一个更加复杂的数据：列表。

<!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">
            <ul>
                <li v-for="fruit in fruits">
                    {
       { fruit }}
                </li>
            </ul>
        </div>
    
    
        <script src="../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { fruits: ['apple', 'orange', 'banana'] } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 3]  
       同样的，我们继续打开控制台修改Vue 实例对象的数据，可以看到依然是响应式的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 4]

### 案例三 ###

现在我们来实现一个计数器

*  点击 `+` 计数器 +1
 *  点击 `-` 计数器 - 1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 5]

<!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">
            <h2>当前计数：{
       { count }}</h2>
            <button v-on:click="add">+</button>
            <button v-on:click="sub">-</button>
        </div>
    
    
        <script src="../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { count: 0 }, methods: { add() { this.count++; }, sub() { this.count--; } } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 6]

以上便是三个 Vue 的小案例，通过初步体验，相比于通过 JS 操作 DOM，Vue 的代码在实现相同功能时，代码量更加简介。

你可能会疑惑，`v-for`、`v-on:click`、`method` 是什么东西，后续将一一揭露。

## 1.4 Vue.js 的 MVVM ##

*  什么是 MVVM 呢？

**MVVM**（Model–view–viewmodel）是一种软件架构模式。

MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。

*  Vue 的 MVVM

![在这里插入图片描述][20210413204420849.png]

*  **View 层**
    
     *  视图层
     *  在我们前端开发中，通常就是 DOM 层
     *  主要作用是给用户展示各种信息
 *  **Model 层**
    
     *  数据层
     *  数据我能是我们固定的四数据，更多的是来自服务器，从网络请求下来的数据
     *  在上述案例中，便是 Vue 实例中 data 对应的对象
 *  **ViewModel 层**
    
     *  视图模型层
     *  试图模型层是 View 和 Model 沟通的桥梁
     *  一方面它实现了 Data Binding，也就是数据绑定，将 Model 的改变实时反映到 View 中。
     *  另一方面它实现了 DOM Listener，也就是 DOM 监听，当 DOM 发生一些时间（点击、滚动、touch）时，可以被监听到，并在需要的情况下改变对应的 Data。

## 1.5 Vue 实例的 options ##

*  在创建 Vue 实例的时候，我们传入了一个 options 对象。
 *  这个 options 可以包含哪些属性？[options 详细解析][options]
 *  目前需掌握的选项：
    
     *  el

类型：`string | Element`

作用：决定 之后 Vue 实例会管理哪一个 DOM。

*  data

类型：`Object | Function`

作用：Vue 实例对应的数据对象。

*  methods

类型：`{ [key: string]: Function }`

作用：定义属于该 Vue 实例的一些方法，可以在其他地方调用，也可以在指令中使用。

## 1.6 Vue 的生命周期 ##

Vue 实例对象在创建的过程中，并不是一蹴而就，而是经过多个阶段，我们可以在这些阶段自定义一些我们需要做的事。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70]: /images/20210813/d918d628b22f407d8222e03c051c9b6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 1]: /images/20210813/fc00522d64d14c6a95538e569087048a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 2]: /images/20210813/4d2f8d3c7a4e475499f7ab926d13567c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 3]: /images/20210813/3af11e3fda804ed3a59adfa8caa50b2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 4]: /images/20210813/483f14bc797345bab336ec936d222c15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 5]: /images/20210813/419476cbc316407b950f7cb96e7d01c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 6]: /images/20210813/26ef341d83c548a38c773cfa9bf57bb2.png
[20210413204420849.png]: /images/20210813/2cf67e5802a44a43b2560489ef5cd863.png
[options]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 7]: /images/20210813/0162731bdeae4910b740cb9f44914d13.png