写在前面的话
Vue的学习需要大家有一点HTML和JavaScript的基础，不需要太深入，只要达到入门的水平即可。JavaScript主要要学习基础部分和面向对象部分，建议大家看看W3CSchool的教程或者阮一峰的教程。这是我的学习笔记，本人才疏学浅，只为与大家分享，学习笔记主要是按照vue的官方文档以及慕课网购买的Dell老师的仿去哪儿网的vue课程做的记录。
W3cschool：https://www.w3school.com.cn/j...
阮一峰JavaScript教程：http://javascript.ruanyifeng....
阮一峰ES6新特性教程：http://es6.ruanyifeng.com/
另外，编辑器我使用的是HBuildX和Sublime Text3
上手第一个Vue程序--Hello World
1.安装vue
https://cn.vuejs.org/v2/guide...
在vue官网里，可以看到安装方法有很多种。初学者先通过script的方式引入vue，下载开发版vue，并跟随我，在电脑中新建一个vue文件夹，把下载好的vue.js文件拷贝到vue文件夹中，新建一个html文件。
2.编写代码
在html文件中编写如下代码：
<!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>运行结果：
在浏览器中显示hello world
代码解析：
- 第6行代码，使用script标签引入vue.js
- 第9-11行代码，创建了一个id为app的div标签
- 第12-19行代码，在script标签内，写了一段vue语法的代码。代码的意思是，创建了一个Vue实例对象，该对象中有两个属性：el和data。el属性的作用是将vue绑定到id为app的DOM中，data的作用是定义了一个content字符串，内容为hello world。
- 回头看9-11行代码，有一个{{content}}，这就意味着将vue中的content内容输出到这里，将数据绑定到dom中了。如果content内容改变，这里输出也会改变。
与传统JS代码的区别？
var dom = document.getElementById('app');
dom.innerHtml = 'hello world'- 传统的js代码总是在操作DOM
- 而vue呢？封装了抽象了DOM操作，让你只关注视图和数据，以及如何绑定它们
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。