初探Vue.js——Hello World_vue.js hello world-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38207472/article/details/90413323

本文介绍了Vue.js，它是用于构建用户界面的渐进式框架，不支持IE8及以下版本。有完善中文文档，网址为https://cn.vuejs.org/ 。给出安装步骤，还分别用原生JavaScript和Vue.js实现了Hello World，让开发者初步了解Vue.js使用。

一、初识Vue.js

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

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

3、生命周期
在这里插入图片描述
图1：Vue的生命周期（见官网）

二、中文文档

1、优势所在

Vue.js虽然非常的年轻，但是它对初学者非常的友好。Vue.js有着非常完善的中文文档，方便开发者或者学习者查阅

2、网址

https://cn.vuejs.org/

三、安装步骤

1、打开安装网址
这里给出官方安装网址：https://cn.vuejs.org/v2/guide/installation.html

2、点击安装
在这里我们会发现，这一页中，网站给我们提供了教程，从最入门的安装开始，相信从这里，我们会收获良多。

3、选择安装方式
在这里插入图片描述
作为初学者，我们选择开发版本，因为它会给我们提供更加规范的审查，帮助我们养成良好的习惯。

4、点击开发版本

我们发现是Vue.js的库，于是这里有两种方法，一种是 CTRL+A 复制所有代码，在本地创建一个叫vue.js的JS文件，粘贴进去。如下图所示：

另一种方法就是官网给我们提供的链接，如下图所示：

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

四、Hello World

任何语言学习的第一课，就是实现"Hello World"的打印，学习Vue也不例外。
1、原生JavaScript实现
首先我们先用原生的JS来实现，等一下我们来看看区别。代码如下所示：
是不是非常熟悉，先声明一个dom变量，获取#app对用的dom结构，然后再在其中填入需要打印的文字就可以啦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <div id="app"></div>
    <script>
        let dom = document.getElementById("app");
        dom.innerHTML = "Hello World";
    </script>
</body>
</html>

浏览器打开，我们发现出现了Hello World

2、Vue.js实现

接下来，我们用Vue来实现。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <!--  引用在线Vue库  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--  引用本地Vue库  -->
    <!--  <script src="vue.js"></script>-->
</head>
<body>
    <div id="app">{{content}}</div>

    <script>
        var text = new Vue({
            el: "#app",
            data: {
                content: "hello world"
            }
        })
    </script>
</body>
</html>

注意！我在这里示范了两种引入Vue库文件的方法，和从前运用其他框架的方法是一样的，大家可以根据需要进行引用。

我们打开网页，咦！是不是也出现了Hello World? 那就说明你成功写了第一个Vue网页，迈进了Vue的大门。

那么<script></script>那段代码是什么意思呢？别急，往下看。

1）首先我们定义了一个叫text的Vue实例

var text = new Vue({

})

2）el: "#app"就是让这个Vue实例接管id=app的DOM里的所有数据

3）接着，我们设置一个叫content的数据为“hello world”。注意啦！这里的数据只有在id=app的DOM里才有作用

var text = new Vue({
    el: "#app",
    data: {
        content: "hello world"
    }
})

4）添加插值表达式，加入content这组数据，如下面这种{{**}}表达方式，意思就是就是在id=app的这个div里显示content这组数据的内容

<div id="app">{{content}}</div>

到这里，你明白了吗？我们只需要关心数据就可以了，不再关心DOM。

3、扩展

如果你还不够理解，看一下以下这段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <!--  引用在线Vue库  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--  引用本地Vue库  -->
    <!--  <script src="vue.js"></script>-->
</head>
<body>
    <div id="app">{{content}}</div>

    <script>
        var text = new Vue({
            el: "#app",
            data: {
                content: "hello world"
            }
        })
        setTimeout(()=>{
            text.$data.content = "Are you sure?"
        },2000)
    </script>
</body>
</html>

打开网页，等待两秒，文本内容是不是变成了"Are you sure?"？数据放什么，页面就会显示什么啦！