最近在學(xué)習(xí)vue，正好今日留個(gè)筆記，我自己還在摸索學(xué)習(xí)中，現(xiàn)整理出來以作記錄。

會(huì)使用基本的Render函數(shù)后，就會(huì)想，這怎么用 v-for/v-if/v-model;我寫個(gè)vue Render函數(shù)進(jìn)階

首先是v-if 的轉(zhuǎn)化使用全局組件的v 值決定組件渲染的狀態(tài)，對實(shí)例中傳遞的props的“nnum”值得控制可以自如的切換兩種狀態(tài)顯示。這樣就是和v-if 一樣使用組件了

<div id="app">     <mycom :v="nnum">       <div slot="slot2">hahahhah</div>       <div slot="slot1">ggggggggggggg</div>     </mycom>   </div>   <script>     Vue.component('mycom',{       render:function(createElement){         var s=this;         if(this.v==1){           return createElement('div',            {             domProps:{innerHTML:'component n='+this.n}            })         }else{            return createElement('div',             [this.$slots.slot1,this.$slots.slot2])         }       },       props:{         v:{           type:Number,           default:0         },         n:{           default:'hello'         }       }     });     var app=new Vue({       el:'#app',       data:{         nnum:1       }     }) 

v-for 的使用需要需要使用到map

<div id="app">     <mycom :v="nnum" :ar="arr">       <div slot="slot2">hahahhah</div>       <div slot="slot1">ggggggggggggg</div>     </mycom>   </div>   <script>     Vue.component('mycom',{       render:function(createElement){         if(this.v==1){           return createElement('div',               this.ar.map(function(item){                 return createElement('li',                   {                     domProps:{                       innerHTML:item                     }                   })               })            )         }else{            return createElement('div',             [this.$slots.slot1,this.$slots.slot2])         }       },       props:{         v:{           type:Number,           default:0         },         n:{           default:'hello'         },         ar:{           type:Array,           default:function(){ return [1,23,4,5,6,55,65]}         }        }     });     var app=new Vue({       el:'#app',       data:{         nnum:1,         arr:[1,2,3,4,5,6,7,8]       }     })   </script>   </body> 

只有map方法才能檢測改變，其他的方法不能根據(jù)數(shù)據(jù)的改變能改變相應(yīng)的狀態(tài)下的例子中的arr數(shù)組   依靠 apply的方法來實(shí)現(xiàn)的就不能夠檢測this.ar 的變換來重新計(jì)算

return createElement('div',              Array.apply(null,this.ar.map(function(item){                return createElement('li',                  {                    domProps:{                      innerHTML:'item'                    }                  })              }))