首先我们打开Vue.js官网，进入到Vue.js安装 。需要注意的是Vue.js是不兼容IE8以下的浏览器的，因为IE8无法模拟 ECMAScript 5 特性。
当我们去学习使用Vue.js的时候，我们希望快速入门Vue.js的使用，因此我们采用使用script标签的方式，引入Vue.js。
我们使用的开发版本，该版本包含了所有的警告的提示信息。
下载好Vue.js开发版本文件后，我们可以创建一个开发目录在该开发目录下包含了两个文件，一个是index.html，一个是我们下载下来的Vue.js文件。
接下来我们在index.html创建一个基本的结构，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
接下来假设我们想在id为app显示文本内容为HelloWorld，原生的方式我们可以这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
</head>
<body>
<div id="app">
</div>
<script>
var dom = document.getElementById('app');
dom.innerHTML = 'HelloWorld';
</script>
</body>
</html>
同样的功能，使用Vue.js我们可以这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{content}}
</div>
<script>
var app = new Vue({
el: '#app',//Vue实例负责管理的区域
data:{
content: 'HelloWorld'//该数据，可以使用插值表达式调用
}
});
</script>
</body>
</html>
Vue.js和原生DOM最大的区别就是，Vue.js不需要关注DOM的操作了，而是把精力关注在数据的管理上。
