如需转载请评论或简信，并注明出处，未经允许不得转载
目录
前言
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>
网友评论