Day19_05_Vue教程之第一个Vue应用程序

雨点打透心脏的1/2处 2024-02-19 21:39 93阅读 0赞

## Vue教程之第一个Vue应用程序 ##

### 一.兼容性 ###

Vue **不支持** IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有**兼容 ECMAScript 5 的浏览器**。

### 二.下载地址 ###

*  开发版本
    
     *  包含完整的警告和调试模式：[https://vuejs.org/js/vue.js][https_vuejs.org_js_vue.js]
     *  删除了警告，30.96KB min + gzip：[https://vuejs.org/js/vue.min.js][https_vuejs.org_js_vue.min.js]
 *  CDN

### 三.第一个 Vue 应用程序 ###

Vue.js 的核心是实现了 MVVM 模式，它扮演的角色就是 ViewModel 层，那么我们的第一个应用程序就是展示她的 **数据绑定** 功能，操作流程如下：

#### 1. 创建一个 HTML 文件 ####

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>第一个 Vue 应用程序</title>
    </head>
    <body>
    
    </body>
    </html>

#### 2. 引入 Vue.js ####

#### 3. 创建一个 Vue 的实例 ####

说明

*  `el:'#vue'`：绑定元素的 ID;
 *  `data:{message:'Hello Vue!'}`：数据对象中有一个名为 `message` 的属性，并设置了初始值 `Hello Vue!`

#### 4. 将数据绑定到页面元素 ####

<div id="vue">
        {
       {message}}
    </div>

说明：只需要在绑定的元素中使用 `双花括号` 将 Vue 创建的名为 `message` 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果，是不是和 `EL` 表达式非常像？

#{message} => {
       {message}}

#### 5. 完整的 HTML ####

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>第一个 Vue 应用程序</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
        <div id="vue">
            {
       {message}}
        </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
    </body>
    </html>

注：本页面是在 `IDEA` 上创建的 HTML，并使用 `IDEA` 内置的 HTTP 服务器运行.

### 四.测试 Vue ###

为了能够更直观的体验 Vue 带来的数据绑定功能，我们需要在浏览器测试一番，操作流程如下：

*  在 `Chrome` 浏览器上运行第一个 Vue 应用程序，并按 `F12`进入 `开发者工具`  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5YzAwMDY2Ng_size_16_color_FFFFFF_t_70][]
 *  在控制台输入 `vm.message = 'Hello World'` ，然后 `回车`，你会发现浏览器中显示的内容会直接变成 `Hello World`  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5YzAwMDY2Ng_size_16_color_FFFFFF_t_70 1][]

#### 1. 说明 ####

在之前的代码中，我们创建了一个名为 `vm` 的 Vue 实例.

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

此时就可以在控制台直接输入 `vm.message` 来修改值，中间是可以省略 `data` 的，在这个操作中，我们并没有主动操作 DOM，就让页面的内容发生了变化，这就是借助了 Vue 的 **数据绑定** 功能实现的；MVVM 模式中要求 ViewModel 层就是使用 `观察者模式` 来实现数据的监听与绑定，以做到数据与视图的快速响应。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5YzAwMDY2Ng_size_16_color_FFFFFF_t_70 2][]

[https_vuejs.org_js_vue.js]: https://vuejs.org/js/vue.js
[https_vuejs.org_js_vue.min.js]: https://vuejs.org/js/vue.min.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5YzAwMDY2Ng_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d75937f1ffc9471693858347b3c7f913.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5YzAwMDY2Ng_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7e346b2d147e48249d4a3583f010e84f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5YzAwMDY2Ng_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/727b755edb7949b299ff043960434dda.png