说明
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
至于为什么要学Vue呢？一是因为Vue是热门的前端框架，而是可以通过Vue来实现前后端分离。
参考资料
官方文档：http://vuejs.org/v2/guide/syntax.html
中文文档: https://cn.vuejs.org/v2/guide/syntax.html
菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html
Vue的安装
在使用之前，需要安装Vue.js。
1.下载vue.js用<script>标签引入
以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
下载链接：https://vuejs.org/js/vue.min.js
引入代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 引入Vue.min.js -->
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"Hello World!"
}
})
</script>
</body>
</html>
打开网页查看如下，即引入成功
2.使用CDN
建议下载到本地引入使用。
-
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
-
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
-
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "Hello World!"
}
})
</script>
</body>
</html>
可能加载有些慢，所以建议本地引入。
第一个Vue程序
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
// 选项
})第一个Vue实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 可以通过"{{属性名}}"来输出Vue对象的属性 -->
<h1>属性字段msg：{{msg}}</h1>
<!-- 可以通过"{{函数名()}}"来输出函数返回值，记住使用函数需要加小括号 -->
<h1>函数方法print：{{print()}}</h1>
</div>
<script type="text/javascript">
new Vue({
// el这个参数必有,对应的是DOM元素,可以是id名称,表示vue挂载在id="app"的DOM元素上,id="app"所在的区域也是vue数据要渲染的区域
el: "#app",
// data参数用于定义字段属性,在这里只有一个名为msg的属性,值是"Hello World!"
data: {
msg: "Hello World!"
},
// mthod参数用于定义函数方法,可以通过return来返回函数值,多个函数用逗号(,)隔开
methods: {
// "print"指的是函数名,后面的function(){}是函数的具体内容
print: function() {
return "您好，Vue！";
}
}
})
</script>
</body>
</html>
代码解释说明：
- el参数表示vue的数据渲染全部发生在挂载的这个DOM元素下，该元素外部不受影响的。
- data参数用于定义字段属性,在这里只有一个名为msg的属性,值是"Hello World!"
- mthod参数用于定义函数方法,可以通过return来返回函数值,多个函数用逗号(,)隔开
- "print"指的是函数名,后面的function(){}是函数的具体内容
- 可以通过"{{属性名}}"来输出Vue对象的属性
- 可以通过"{{函数名()}}"来输出函数返回值，记住使用函数需要加小括号
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
上面的实例HTML用浏览器打开如下：
