目的：快速入门Vue，学习分为四个部分：
Vue基础本地应用网络应用综合应用我们查看官方文档：https://cn.vuejs.org/v2/guide/installation.html，导入开发版本的vue.js文件，并且制作第一个简单Vue项目输出：你好，Vue！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{message}} </div> <script> var app = new Vue({ el:"#app", data:{ message:"你好！VUE！", } }) </script> </body> </html>效果如图： 总结步骤： 1、导入开发版本的vue.js。 2、创建Vue实例对象,设置el属性和data属性。 3、使用简洁的模板语法把数据渲染到页面上。
el是用来设置vue实例挂载（管理）的元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue</title> <script src="js/vue.js"></script> </head> <body> {{message}} <div id="app"> {{message}} <span>{{message}}</span> </div> <script> var app = new Vue({ el:"#app", data:{ message:"你好！VUE！", } }) </script> </body> </html>效果如图： 问：vue实例的作用范围？ vue会管理el选项命中的元素及其内部的后代元素。
问：是否可以使用其他选择器？ 可以使用标签、class、id选择器，建议使用id选择器。
问：是否可以设置其他的dom元素？ 可以使用其他的双标签，不能使用html和body。
vue中用到的数据定义在data中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{message}} {{me.name}} {{me.sex}} <h2>去过的城市：</h2> <li>{{home[0]}}</li> <li>{{home[1]}}</li> </div> <script> var app = new Vue({ el:"#app", data:{ message:"下面我来介绍一下我自己：", <!-- array:[],obj:{}, --> me:{name:"李华",sex:"男"}, home:["北京","上海","广州"] } }) </script> </body> </html>效果如图： data中可以写复杂类型的数据，例如对象、数组等。 渲染复杂类型数据时，遵守js的语法即可。
