欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入理解vue Render函數(shù)

 更新時間:2017年07月19日 14:33:01   作者:v折耳  
本篇文章主要介紹了深入理解vue Render函數(shù),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

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

首先是v-if 的轉(zhuǎn)化使用全局組件的v 值決定組件渲染的狀態(tài),對實例中傳遞的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的方法來實現(xiàn)的就不能夠檢測this.ar 的變換來重新計算

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來實現(xiàn)雙向綁定

使用對value:賦值可以將數(shù)據(jù)綁定給 input 的默認(rèn)值,但是對input 的修改并不能傳遞給vue  這涉及到組件的通信問題,
所以想實現(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> 

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法

    詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法

    本篇文章主要介紹了詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • vue elementui form表單驗證的實現(xiàn)

    vue elementui form表單驗證的實現(xiàn)

    這篇文章主要介紹了vue elementui form表單驗證的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue項目中引入js-base64方式

    vue項目中引入js-base64方式

    這篇文章主要介紹了vue項目中引入js-base64方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue項目WebPack打包刪除注釋和console

    Vue項目WebPack打包刪除注釋和console

    這篇文章主要介紹了Vue項目WebPack打包刪除注釋和console,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 如何去除element-ui中table的hover效果

    如何去除element-ui中table的hover效果

    這篇文章主要介紹了如何去除element-ui中table的hover效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue2響應(yīng)式的缺點(diǎn)影響

    vue2響應(yīng)式的缺點(diǎn)影響

    這篇文章主要介紹了vue2響應(yīng)式的缺點(diǎn)影響,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-05-05
  • v-for中動態(tài)校驗el-form表單項的實踐

    v-for中動態(tài)校驗el-form表單項的實踐

    在項目開發(fā)中,我們經(jīng)常會遇到表單保存的功能,本文主要介紹了v-for中動態(tài)校驗el-form表單項的實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>
    2022-05-05
  • vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取,slot,router路由功能示例

    vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取,slot,router路由功能示例

    這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取,slot,router路由功能,結(jié)合實例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下
    2019-03-03
  • Vue實現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能

    Vue實現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能

    這篇文章主要介紹了如何在Vue中實現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實現(xiàn)過程中,需要注意文件的格式和轉(zhuǎn)換方式,以及插件和組件的使用方法和注意事項,需要的朋友可以參考下
    2023-05-05
  • Vuejs入門教程之Vue生命周期,數(shù)據(jù),手動掛載,指令,過濾器

    Vuejs入門教程之Vue生命周期,數(shù)據(jù),手動掛載,指令,過濾器

    本篇文章主要介紹了Vuejs入門教程之Vue生命周期,數(shù)據(jù),手動掛載,指令,過濾器的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04

最新評論