一、v-for
v-bind简写 ：，:key值后注意不要跟差值表达式，要跟字段或者js表达式
v-for的key值不用index，好性能，一般key值取接口里定义的唯一字段，如：id
1 <body> 2 <!--push pop shift unshift splice reverse sort--> 3 <div id="app"> 4 <div v-for='(item,index) of list' 5 :key='item.id' 6 > 7 {{item.text}}----{{index}} 8 </div> 9 </div> 10 </body> 11 <script> 12 var vm = new Vue({ 13 el:'#app', 14 data:{ 15 list:[{ 16 id:'001', 17 text:'nice' 18 },{ 19 id:'002', 20 text:'to' 21 },{ 22 id:'003', 23 text:'meet' 24 }, 25 26 ] 27 } 28 }) 29 </script>
v-for ,如果想修改数组内容不能通过数组下标的方式去添加，那样只会改变数据，页面内容不会有变化，可以通过以下方式去修改
1.通过变异方法:push pop shift unshift splice reverse sort
2.改变数据引用
3.set方法,如改变数组下标为2的text值从"meet"变成“you”
Vue.set(vm.list,2,{text:'meet3' }) 或 vm.$set(vm.list,2,{text:'you'})
二、组件使用中的细节
1 <body> 2 <div id="app"> 3 <table> 4 <tbody> 5 <row></row> 6 <row></row> 7 <row></row> 8 9 </tbody> 10 </table> 11 </div> 12 </body> 13 <script> 14 Vue.component('row',{ 15 template:"<tr><td>Data</td></tr>" 16 }) 17 var vm = new Vue({ 18 el:'#app', 19 data:{ 20 }, 21 methods: { 22 } 23 }) 24 </script>
(1)is,上面的代码写会有一个小bug,就是插入的组件不是显示在tbody里，而是显示在table同级，为了解决这个问题，要用到is,
<tbody>
<tr is='row'></tr>
<tr is='row'></tr>
<tr is='row'></tr>
</tbody>
is后面等于的就是自己定义的组件的名称，这样就可以解决上面的bug,同理
<ul>
<li is='组价名字'></li>
</ul>
同理<ol>
<li is='组价名字'></li>
</ol>
同理<select>
<option is='组价名字'></option>
</select>
(2) ref,vue中获取dom元素
1 <body> 2 <div id="app"> 3 <div ref="hello" @click="handleClick">hello</div> 4 </div> 5 </body> 6 <script> 7 var vm = new Vue({ 8 el:'#app', 9 data:{ 10 }, 11 methods: { 12 handleClick:function() { 13 alert(vm.$refs.hello.innerHTML) 14 } 15 } 16 }) 17 </script>
页面要获取的dom元素定义ref,在js里通过vm.$refs来获取ref的名称并进行操作
（3）组件里的data必须是函数，且要返回一个对象
因为Vue实例里的data对象只会调用一次，所以用data:{}形式，组件里的对象可能会调用多次，所以定义成函数来返回对象的母的，保证每个子组件都有一份独立的数据存储，写成
data:function(){
return {}
}形式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>计数器</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <count @change="handelChange" ref="one"></count> 11 <count @change="handelChange" ref="two"></count> 12 <div>{{total}}</div> 13 </div> 14 </body> 15 <script> 16 Vue.component('count',{ 17 template:'<div @click="handelClick">{{number}}</div>', 18 data:function() { 19 return { 20 number:0, 21 22 } 23 }, 24 methods:{ 25 handelClick:function() { 26 this.number++, 27 this.$emit('change') 28 } 29 } 30 }) 31 var vm = new Vue({ 32 el:'#app', 33 data:{ 34 total:0 35 }, 36 methods: { 37 handelChange:function(){ 38 this.total = this.$refs.one.number + this.$refs.two.number 39 } 40 } 41 }) 42 </script> 43 </html>