指令：扩展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>