渐进式框架
创建Vue的实例对象，并传入配置对象
< div id=“root”>是一个容器，容器中写的不是原始html代码，而是Vue的模板代码
{{XXX}},xxx会自动读取data中的xxx属性
语法格式
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始Vue</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="vue_det">
<h1>site:{{site}}</h1>
<h1>url:{{url}}</h1>
<h1>site:{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#vue_det',
data:{
site:'zibo',
url:'wwww',
alexa:'11111'
},
methods:{
details:function(){
return this.site+"-学习梦想"
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始Vue</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="vue_det">
<h1>site:{{site}}</h1>
<h1>url:{{url}}</h1>
<h1>Alexa:{{alexa}}</h1>
</div>
//当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
<script type="text/javascript">
var data = {
site: '菜鸟',
url: 'www',
alexa: '255000'
}
var vm = new Vue({
el: '#vue_det',
data: data
})
//它们引用同样的对象
document.write(vm.site == data.site)
document.write('<br />')
//设置属性也会影响到原始数据
vm.site = "whh"
document.write(data.site + '<br />')
data.alexa = 1234
document.write(vm.alexa)
//除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
document.write(vm.$data === data)
document.write("<br />")
document.write(vm.$el === document.getElementById('vue_det'))
</script>
</body>
</html>