window.onload = function () {
      var c = new Vue({
        el: '#box', //相当于选择器
        data: {
          content: 'ghostwu tell you how to learn vue',
          msg : 'vue中的数据1',
          msg2 : 'vue中的数据2'
        }
      });
}

<div id="box">
  {{content}}
  <br>
  {{msg}}
  <br>
  {{msg2}}
</div>

window.onload = function () {
      var c = new Vue({
        el: '#box', //相当于选择器
        data: {
          content: 'ghostwu tell you how to learn vue',
          msg : 'vue中的数据1',
          msg2 : 'vue中的数据2'
        }
      });
      var c2 = new Vue({
        el: '#box2',
        data: {
          msg: 'this is a paragraphy'
        }
      });
      var c3 = new Vue({
        el: '#box3',
        data: {
          msg2: 'this is box3'
        }
      });
    }
<p id="box2">{{msg}}</p>
<div id="box">
  {{content}}
  <br>
  {{msg}}
  <br>
  {{msg2}}
</div>
 <div id="box3">{{msg2}}</div>

window.onload = function () {
      var c = new Vue({
        el: "body",
        data: {
          msg: 'welcome to study vue!!!'
        }
      });
    }
<input type="text" v-model="msg" id="txt" />
  <input type="text" v-model="msg" id="txt2"/>
  <br/>
  {{msg}}
  <div class="box">
    {{msg}}
  </div>
  <div class="box">
    {{msg}}
  </div>
  <div class="box">
    {{msg}}
  </div>
  <div class="box">
    {{msg}}
  </div>

window.onload = function () {
      var c = new Vue({
        el: 'body',
        data: {
          msg: 'this is a msg',
          msg2 : 'hello world!',
          arr : [ 100, 200, 300 ],
          flag : true,
          json : {
            key1 : '八戒',
            key2 : '悟空',
            key3 : '沙僧'
          },
          num : 100,
        }
      });
    }
{{msg}} <br/>
  {{msg2}} <br/>
  {{arr}} <br/>
  {{flag}} <br/>
  {{json}}<br/>
  {{num}}<br/>

this is a msg 
hello world! 
100,200,300 
true 
[object Object]
100

window.onload = function () {
      var c = new Vue({
        el: '#box',
        data: {
          persons: {
            name1: '八戒',
            name2: '沙增',
            name3: '悟空'
          }
        }
      });
    }
<div id="box">
  <ul>
    <li v-for="value in persons">{{value}}</li>
  </ul>
  <ul>
    <li v-for="a in persons">{{a}}</li>
  </ul>
</div>

window.onload = function () {
      var c = new Vue({
        el : '#box',
        data : {
          arr : [ '张三', 100, '李四', 200 ]
        }
      });
    }

<ul id="box">
   <li v-for="value in arr">{{value}}</li>
 </ul>

<ul id="box">
   <li v-for="value in arr">{{value}}----{{$index}}</li>
</ul>

window.onload = function () {
      var c = new Vue({
        el : '#box',
        data : {
          persons : {
            name1 : "八戒",
            name2 : "悟空",
            name3 : "唐僧"
          }
        }
      });
    }
<ul id="box">
  <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
  <hr/>
  <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li>
  <hr/>
  <li v-for="(k,v) in persons">{{k}}----{{v}}---{{$index}}---{{$key}}</li>
</ul>

八戒---0----name1
悟空---1----name2
唐僧---2----name3
八戒---0----name1
悟空---1----name2
唐僧---2----name3
name1----八戒---0---name1
name2----悟空---1---name2
name3----唐僧---2---name3