深入理解vue Render函數(shù)
最近在學(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),對(duì)實(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方法才能檢測(cè)改變,其他的方法不能根據(jù)數(shù)據(jù)的改變能改變相應(yīng)的狀態(tài)下的例子中的arr數(shù)組 依靠 apply的方法來實(shí)現(xiàn)的就不能夠檢測(cè)this.ar 的變換來重新計(jì)算
return createElement('div', Array.apply(null,this.ar.map(function(item){ return createElement('li', { domProps:{ innerHTML:'item' } }) }))
<body> <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', Array.apply(null,this.ar.map(function(item){ return createElement('li', { domProps:{ innerHTML:'item' } }) })) ) } }, 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:2, arr:[1,2,3,4,5,6,7,8] } }) </script> </body>
v-model 使用domProps來實(shí)現(xiàn)雙向綁定
使用對(duì)value:賦值可以將數(shù)據(jù)綁定給 input 的默認(rèn)值,但是對(duì)input 的修改并不能傳遞給vue 這涉及到組件的通信問題,
所以想實(shí)現(xiàn)雙向綁定,只能自己寫事件來出發(fā) vue shu'j的傳遞
domProps:{value:self.v }
<body> <div id="app"> <mycom :v="nnum" :ar="arr"> <div slot="slot2">hahahhah</div> <div slot="slot1">ggggggggggggg</div> </mycom> <div>{{nnum}}</div> </div> <script> Vue.component('mycom',{ render:function(createElement){ var self=this; var inp=createElement('input', { domProps:{ value:self.v } }); return createElement('div',[inp]) }, 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:100, arr:[1,2,3,4,5,6,7,8] } }) </script> </body>
通過input觸發(fā)undateValue來更新 app中的nnum 值(差點(diǎn)沒轉(zhuǎn)過彎來,render過于復(fù)雜后,真的是自己找罪受)
<div id="app"> <mycom :v="nnum" :ar="arr" @input="updateValue"> </mycom> <div>{{nnum}}</div> </div> <script> Vue.component('mycom',{ render:function(createElement){ var self=this; var inp=createElement('input', { domProps:{ value:self.v }, on:{ input:function(event){ self.$emit('input',event.target.value) } } }); return createElement('div',[inp]) }, props:{ v:{ type:Number, default:0 }, n:{ default:'hello' }, ar:{ type:Array, default:function(){ return [1,23,4,5,6,55,65]} } }, methods:{ update:function(){ } } }); var app=new Vue({ el:'#app', data:{ nnum:100, arr:[1,2,3,4,5,6,7,8] }, methods:{ updateValue:function(value){ this.nnum=parseFloat(value); } } }) </script> </body>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue elementui form表單驗(yàn)證的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11Vue項(xiàng)目WebPack打包刪除注釋和console
這篇文章主要介紹了Vue項(xiàng)目WebPack打包刪除注釋和console,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐
在項(xiàng)目開發(fā)中,我們經(jīng)常會(huì)遇到表單保存的功能,本文主要介紹了v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-05-05vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取,slot,router路由功能示例
這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取,slot,router路由功能,結(jié)合實(shí)例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過程中,需要注意文件的格式和轉(zhuǎn)換方式,以及插件和組件的使用方法和注意事項(xiàng),需要的朋友可以參考下2023-05-05Vuejs入門教程之Vue生命周期,數(shù)據(jù),手動(dòng)掛載,指令,過濾器
本篇文章主要介紹了Vuejs入門教程之Vue生命周期,數(shù)據(jù),手動(dòng)掛載,指令,過濾器的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04