Vue中render開(kāi)發(fā)的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)Vue中render開(kāi)發(fā)的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)：從2013年開(kāi)始為各行業(yè)開(kāi)拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為超過(guò)千家公司企業(yè)提供了專(zhuān)業(yè)的成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站推廣服務(wù)，按需網(wǎng)站策劃由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶(hù)的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺(jué)效果，策劃師分析客戶(hù)的同行競(jìng)爭(zhēng)對(duì)手，根據(jù)客戶(hù)的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶(hù)同行業(yè)具有領(lǐng)先地位的。

場(chǎng)景

官網(wǎng)描述的場(chǎng)景當(dāng)我們開(kāi)始寫(xiě)一個(gè)通過(guò) level prop 動(dòng)態(tài)生成 heading 標(biāo)簽的組件，你可能很快想到這樣實(shí)現(xiàn)：

<script type="text/x-template" id="anchored-heading-template">
 <h2 v-if="level === 1">
  <slot></slot>
 </h2>
 <h3 v-else-if="level === 2">
  <slot></slot>
 </h3>
 <h4 v-else-if="level === 3">
  <slot></slot>
 </h4>
 <h5 v-else-if="level === 4">
  <slot></slot>
 </h5>
 <h6 v-else-if="level === 5">
  <slot></slot>
 </h6>
 <h7 v-else-if="level === 6">
  <slot></slot>
 </h7>
</script>

Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

在這種場(chǎng)景中使用 template 并不是最好的選擇：首先代碼冗長(zhǎng)，為了在不同級(jí)別的標(biāo)題中插入錨點(diǎn)元素，我們需要重復(fù)地使用 <slot></slot>。

雖然模板在大多數(shù)組件中都非常好用，但是在這里它就不是很簡(jiǎn)潔的了。那么，我們來(lái)嘗試使用 render 函數(shù)重寫(xiě)上面的例子：

Vue.component('anchored-heading', {
 render: function (createElement) {
  return createElement(
   'h' + this.level,  // tag name 標(biāo)簽名稱(chēng)
   this.$slots.default // 子組件中的陣列
  )
 },
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

簡(jiǎn)單清晰很多！簡(jiǎn)單來(lái)說(shuō)，這樣代碼精簡(jiǎn)很多，但是需要非常熟悉 Vue 的實(shí)例屬性。在這個(gè)例子中，你需要知道當(dāng)你不使用 slot 屬性向組件中傳遞內(nèi)容時(shí)，比如 anchored-heading 中的 Hello world!，這些子元素被存儲(chǔ)在組件實(shí)例中的 $slots.default中。

createElement參數(shù)介紹

接下來(lái)你需要熟悉的是如何在 createElement 函數(shù)中生成模板。這里是 createElement 接受的參數(shù)：

createElement(
 // {String | Object | Function}
 // 一個(gè) HTML 標(biāo)簽字符串，組件選項(xiàng)對(duì)象，或者
 // 解析上述任何一種的一個(gè) async 異步函數(shù)，必要參數(shù)。
 'div',

 // {Object}
 // 一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對(duì)象
 // 這樣，您可以在 template 中使用這些屬性?？蛇x參數(shù)。
 {
  // (詳情見(jiàn)下一節(jié))
 },

 // {String | Array}
 // 子節(jié)點(diǎn) (VNodes)，由 `createElement()` 構(gòu)建而成，
 // 或使用字符串來(lái)生成“文本節(jié)點(diǎn)”?？蛇x參數(shù)。
 [
  '先寫(xiě)一些文字',
  createElement('h2', '一則頭條'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)

深入 data 對(duì)象

有一件事要注意：正如在模板語(yǔ)法中，v-bind:class 和 v-bind:style ，會(huì)被特別對(duì)待一樣，在 VNode 數(shù)據(jù)對(duì)象中，下列屬性名是級(jí)別最高的字段。該對(duì)象也允許你綁定普通的 HTML 特性，就像 DOM 屬性一樣，比如 innerHTML (這會(huì)取代 v-html 指令)。

{
 // 和`v-bind:class`一樣的 API
 'class': {
  foo: true,
  bar: false
 },
 // 和`v-bind:style`一樣的 API
 style: {
  color: 'red',
  fontSize: '14px'
 },
 // 正常的 HTML 特性
 attrs: {
  id: 'foo'
 },
 // 組件 props
 props: {
  myProp: 'bar'
 },
 // DOM 屬性
 domProps: {
  innerHTML: 'baz'
 },
 // 事件監(jiān)聽(tīng)器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修飾器
 // 需要手動(dòng)匹配 keyCode。
 on: {
  click: this.clickHandler
 },
 // 僅對(duì)于組件，用于監(jiān)聽(tīng)原生事件，而不是組件內(nèi)部使用
 // `vm.$emit` 觸發(fā)的事件。
 nativeOn: {
  click: this.nativeClickHandler
 },
 // 自定義指令。注意，你無(wú)法對(duì) `binding` 中的 `oldValue`
 // 賦值，因?yàn)?nbsp;Vue 已經(jīng)自動(dòng)為你進(jìn)行了同步。
 directives: [
  {
   name: 'my-custom-directive',
   value: '2',
   expression: '1 + 1',
   arg: 'foo',
   modifiers: {
    bar: true
   }
  }
 ],
 // Scoped slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
  default: props => createElement('span', props.text)
 },
 // 如果組件是其他組件的子組件，需為插槽指定名稱(chēng)
 slot: 'name-of-slot',
 // 其他特殊頂層屬性
 key: 'myKey',
 ref: 'myRef'
}

條件渲染

既然熟讀以上api接下來(lái)咱們就來(lái)點(diǎn)實(shí)戰(zhàn)。

之前這樣寫(xiě)

//HTML
<div id="app">
  <div v-if="isShow">我被你發(fā)現(xiàn)啦?。。?lt;/div>
</div>
<vv-isshow :show="isShow"></vv-isshow>
//js
//組件形式      
Vue.component('vv-isshow', {
  props:['show'],
  template:'<div v-if="show">我被你發(fā)現(xiàn)啦2?。?！</div>',
});
var vm = new Vue({
  el: "#app",
  data: {
    isShow:true
  }
});

render這樣寫(xiě)

//HTML
<div id="app">
  <vv-isshow :show="isShow"><slot>我被你發(fā)現(xiàn)啦3！??！</slot></vv-isshow>
</div>
//js
//組件形式      
Vue.component('vv-isshow', {
  props:{
    show:{
      type: Boolean,
      default: true
    }
  },
  render:function(h){  
    if(this.show ) return h('div',this.$slots.default);
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    isShow:true
  }
});

列表渲染

之前是這樣寫(xiě)的，而且v-for 時(shí)template內(nèi)必須被一個(gè)標(biāo)簽包裹

//HTML
<div id="app">
  <vv-aside v-bind:list="list"></vv-aside>
</div>
//js
//組件形式      
Vue.component('vv-aside', {
  props:['list'],
  methods:{
    handelClick(item){
      console.log(item);
    }
  },
  template:'<div>\
         <div v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</div>\
       </div>',
  //template:'<div v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</div>',錯(cuò)誤     
});
var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      txt: 'javaScript',
      odd: true
    }, {
      id: 2,
      txt: 'Vue',
      odd: false
    }, {
      id: 3,
      txt: 'React',
      odd: true
    }]
  }
});

render這樣寫(xiě)

//HTML
<div id="app">
  <vv-aside v-bind:list="list"></vv-aside>
</div>
//js
//側(cè)邊欄
Vue.component('vv-aside', {
  render: function(h) {
    var _this = this,
      ayy = this.list.map((v) => {
        return h('div', {
          'class': {
            odd: v.odd
          },
          attrs: {
            title: v.txt
          },
          on: {
            click: function() {
              return _this.handelClick(v);
            }
          }
        }, v.txt);
      });
    return h('div', ayy);

  },
  props: {
    list: {
      type: Array,
      default: () => {
        return this.list || [];
      }
    }
  },
  methods: {
    handelClick: function(item) {
      console.log(item, "item");
    }
  }
});
var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      txt: 'javaScript',
      odd: true
    }, {
      id: 2,
      txt: 'Vue',
      odd: false
    }, {
      id: 3,
      txt: 'React',
      odd: true
    }]
  }
});

v-model

之前的寫(xiě)法

//HTML
<div id="app">
  <vv-models v-model="txt" :txt="txt"></vv-models>
</div>
//js
//input
Vue.component('vv-models', {
  props: ['txt'],
  template: '<div>\
         <p>看官你輸入的是:{{txtcout}}</p>\
         <input v-model="txtcout" type="text" />\
       </div>',
  computed: {
    txtcout:{
      get(){
        return this.txt;
      },
      set(val){
        this.$emit('input', val);
      }
      
    }
  }
});
var vm = new Vue({
  el: "#app",
  data: {
    txt: '', 
  }
});

render這樣寫(xiě)

//HTML
<div id="app">
  <vv-models v-model="txt" :txt="txt"></vv-models>
</div>
//js
//input
Vue.component('vv-models', {
  props: {
    txt: {
      type: String,
      default: ''
    }
  },
  render: function(h) {
    var self=this;
    return h('div',[h('p','你猜我輸入的是啥：'+this.txt),h('input',{
      on:{
        input(event){
          self.$emit('input', event.target.value);
        }
      }
    })] );
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    txt: '', 
  }
});

感謝各位的閱讀！關(guān)于“Vue中render開(kāi)發(fā)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：Vue中render開(kāi)發(fā)的示例分析-創(chuàng)新互聯(lián)
分享路徑：http://muchs.cn/article42/djjsec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、App開(kāi)發(fā)、App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容