前言

Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用

Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

本系列文章从“hello world”开始带你一步步进入Vue的世界

Vue官网：https://cn.vuejs.org/v2/guide/installation.html

步骤

安装

进入Vue官方，选择安装 —> 开发版本，会下载一个vue.js文件

创建项目

新建一个项目，将vue.js放到项目目录中

编写Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>

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

</body>
</html>

上述步骤分析如下：

首先创建Vue的实例
实例内部接收配置项
el表示实例负责管理的区域
data定义一组数据
通过插值表达式{{content}}去接收data中定义的数据

现在我们已经成功运行了我们的HelloWorld程序，为了更深一步的了解Vue实例与el字段的作用，我们来看一下下面这个例子，会输出什么呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>

<div>{{content}}</div>

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

</body>
</html>

运行结果如下所示

扩展

现在有一个需求，两秒后要将“hello world”改变为“bye world”，我们用vue要如何去做呢？

在常规的javascript编码中，我们要改变一个dom上的显示，需要拿到dom后进行再相关操作。而Vue是页面与数据进行绑定，我们不用关心dom，只要数据改变，页面就会跟着变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>

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

    setTimeout(function () {
        app.$data.content = 'bye world'
    }, 2000)
</script>

</body>
</html>