vue实例创建加入data对象，对象属性发生变化时试图层也发生变化

#当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<div id="app">
   <p>name : {{site}}</p>
   <p>msg : {{url}}</p>
   <p>Alexa : {{alexa}}</p>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { name: "joo", msg: hello world", alexa: 10000}
var vm = new Vue({
    el: '#app',
    data: data
})
// 它们引用相同的对象！
document.write(vm.site === data.site) // true
document.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
 
// 设置data对象也会影响属性
data.alexa = 1234
document.write(vm.alexa) // 1234
//除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
document.write(vm.$data === data) // true
document.write("<br>") // true
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>