参照菜鸟教程网站的vue.js教程http://www.runoob.com/vue2/vue-start.html
请看我写在代码里的注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js一个简单例子的基础说明系列-[第2个例子]</title>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 我们的数据对象
//除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}//定义一个js变量.即js属性
var xm = '小明';//定义一个js变量.即js属性
var vm = new Vue({
el: '#vue_det',//定义一个vue属性el,要使用vm.$el才能访问
data: data//定义一个vue属性data,要使用vm.$data才能访问
})
// 我们在浏览器控制台访问上面的那些变量和属性,直接通过.的方式
// document的子是vm,vm的子是el和data,document.vm能访问vm,而vm.el这样写是
//访问不到vm的,要这样写vm.$el才能访问,因为el是Vue实例的直接子变量
// data ->{__ob__: wr} //是对象
// xm ->'小明'
// el ->VM113:1 Uncaught ReferenceError: el is not defined //这样是访问不了的,因为el不是js的全局变量/属性
// vm.el ->undefined //这样也不行,要写成vm.$el才对
// vm.$el -><div id="vue-det">...</div> //这样才是访问vue的
</script>
</body>
</html>
