<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue原理探析</title>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <!--2.div的设计-->
    <div id="vue_det">
      <h1>site : {{site}}</h1>
      <h1>url:{{url}}</h1>
      <h1>alexa:{{alexa}}</h1>
    </div>
    <!--3.js的设计,将之前的代码分解.-->
    <script>
      //1.数据对象,实际是json格式;
      var data={site:"CSDN中国",url:"www.csdn.net",alexa:88888};
      //2.Vue对象的实例，需要实例化,new Vue({})
      var vm=new Vue({
        el:'#vue_det',
        data:data
      });
      //3.测试引用是否相同的对象 ；
      console.log(vm.site===data.site);
                        //从vm进行测试
      vm.site="www.51cto.com";
      console.log(data.site);
                        //从data数据端测试
      data.alexa=9999;
      console.log(vm.alexa);
    </script>
  </body>
</html>

Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

VUE第三篇 入门后续_json格式