指令：扩展html标签功能，属性   :  v-xxx

1、v-model   一般表单元素（input） 双向数据绑定

引入vue.js

<script src = "vue.js"></script>

<script>

　　window.onload = function(){

　　var abc = new Vue({

　　　　el:'#box',//选择器 class id 标签

　　　　data:{
　　　　　　age:12,
　　　　　　msg:'welcome vue',
　　　　　　arr:['a','b','c'],
　　　　　　json:{a:'1',b:'2',c:'3'}
　　　　}//json字符串
　　});　　

     }

</script>
<body>
    <div id = "box">
　　　　　<input type = "text" v-model = "msg">
　　　　　<br>
        {{msg}}
　　　　　<ul>
　　　　　　　<li v-for = "value in arr">{{value}}</li>　
　　　　　　
　　　　 </ul>
    </div>
</body>

2、v-for 循环

<body>
    <div id = "box">
　　　　　<input type = "text" v-model = "msg">
　　　　　<br>
        {{msg}}
　　　　　<ul>
　　　　　　　<li v-for = "value in arr">
                        {{value}}    {{$index}}           
                    </li>　
　　　　 </ul>
             <ul>
　　　　　　　<li v-for = "value in json">
                        {{value}}    {{$index}}    {{$key}}       
                    </li>　
　　　　 </ul>
            <ul>
　　　　　　　<li v-for = "(k,v) in json">
                        {{k}}    {{v}}       {{$index}}  {{$key}}
                    </li>　
　　　　 </ul>
    </div>
</body>