Vue基础

一、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

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,

is后面等于的就是自己定义的组件的名称，这样就可以解决上面的bug,同理

同理<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>

ref

页面要获取的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>

点击加一，计数器