成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

聊一聊Vue組件模版，你知道它有幾種定義方式嗎？

instein / 2044人閱讀

摘要：活動(dòng)結(jié)束單文件組件使用構(gòu)建工具創(chuàng)建項(xiàng)目，綜合來(lái)看單文件組件應(yīng)該是最好的定義組件的方式，而且不會(huì)帶來(lái)額外的模版語(yǔ)法的學(xué)習(xí)成本。

前端組件化開(kāi)發(fā)已經(jīng)是一個(gè)老生常談的話題了，組件化讓我們的開(kāi)發(fā)效率以及維護(hù)成本帶來(lái)了質(zhì)的提升。

當(dāng)然因?yàn)楝F(xiàn)在的系統(tǒng)越來(lái)越復(fù)雜龐大，所以開(kāi)發(fā)與維護(hù)成本就變得必須要考慮的問(wèn)題，因此滋生出了目前的三大前端框架 Vue、Angular、React。

那今天我們就來(lái)看看 Vue 中有哪些定義組件模版的方式以及他們之間的一些差別。

字符串形式

Vue 最簡(jiǎn)單直接的一種定義組件模版的方式，但是方式寫(xiě)起來(lái)很不友好，就像我們以前拼接 HTML 元素是一樣的，很痛苦，所以我們并不常用

Vue.component("my-button", {
  data: function () {
    return {
      label: "是兄弟就來(lái)砍我"
    }
  },
  template: ""
});
模版字面量

模版字面量 ES6 語(yǔ)法，與字符串不同的是，我們可以進(jìn)行多行書(shū)寫(xiě)，相對(duì)單純字符串有很大優(yōu)勢(shì)，體驗(yàn)更優(yōu)，但是可能瀏覽器兼容性會(huì)存在問(wèn)題，需要進(jìn)行轉(zhuǎn)譯為 ES5 語(yǔ)法。

Vue.component("my-content", {
  data: function () {
    return {
      label: "是兄弟就來(lái)砍我",
      content: "刀刀暴擊"
    }
  },
  template: `
    

      
      {{ content }}
    

  `
});
內(nèi)聯(lián)模版(inline-template)

與 「X-template」模版定義方式被稱為模版定義的替代品，把內(nèi)容定義在組件標(biāo)簽元素的內(nèi)部，而不是作為 slot 內(nèi)容分發(fā)，方式比較靈活，但是給讓我們組件的模版與其他屬性分離開(kāi)。


  {{label}}

Vue.component("my-label", {
  data: function () {
    return {
      label: "趕緊上車(chē)吧，兄die"
    }
  }
})
X-template

定義一個(gè) Vue.component("my-label", { template: "#label-template", data: function () { return { label: "趕緊上車(chē)吧，兄die" } } }) 渲染函數(shù)

渲染函數(shù)需要 JavaScript 完全的編程能力，而且比模版更接近編譯，但需要我們非常熟悉 Vue的實(shí)例屬性，也會(huì)更加的抽象。像 v-if v-for 指令就可以用 JavaScript 語(yǔ)法輕松實(shí)現(xiàn)。

Vue.component("my-label", {
  data: function () {
    return {
      items: ["來(lái)就送！", "來(lái)就送！", "來(lái)就送！"]
    }
  },
  render: function (createElement) {
    if (this.items.length) {
      return createElement("ul", this.items.map(function (item) {
        return createElement("li", item)
      }))
    } else {
      return createElement("p", "活動(dòng)結(jié)束")
    }
  }
})
JSX

相比渲染函數(shù)的抽象而言，JSX 比較容易一些，對(duì)于熟悉 React 的同學(xué)是比較友好的。

Vue.component("my-label", {
  data: function () {
    return {
      label: ["活動(dòng)結(jié)束"]
    }
  },
  render(){
    return 
{this.label}

  }
})
單文件組件

使用構(gòu)建工具 cli 創(chuàng)建項(xiàng)目，綜合來(lái)看單文件組件應(yīng)該是最好的定義組件的方式，而且不會(huì)帶來(lái)額外的模版語(yǔ)法的學(xué)習(xí)成本。

以上就是 Vue 中可以定義組件模版的幾種方式，有人可能說(shuō)，我特么要知道這么多干嘛，只要一種不就行了，我想說(shuō)兄die多知道幾種可以幫助我們?cè)诓煌臈l件下做出更好的選擇。

比如：你就需要開(kāi)發(fā)一個(gè)簡(jiǎn)單的頁(yè)面，你非要弄個(gè)單文件組件，腳手架跑起來(lái)，何必呢，你說(shuō)對(duì)不。

我是：劉小登登，一名愛(ài)寫(xiě)作的技術(shù)人。
關(guān)注公眾號(hào)：六小登登，后臺(tái)回復(fù)「1024」即可免費(fèi)獲取驚喜福利！后臺(tái)回復(fù)「加群」邀你進(jìn)群我會(huì)每天全網(wǎng)搜羅好文章給你。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106443.html

相關(guān)文章

  • React 328道最全面試題(持續(xù)更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅(jiān)持每天花分鐘來(lái)學(xué)習(xí)與思考。 今天的React題沒(méi)有太多的故事…… 半個(gè)月前出了248個(gè)Vue的知識(shí)點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請(qǐng)，我又找了20多個(gè)React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時(shí)發(fā)布在了前端面試每日3+1的React專(zhuān)題，希望對(duì)大家有所幫助，同時(shí)大...

    kumfo 評(píng)論0 收藏0

  • 聊一聊BEM設(shè)計(jì)模式在Vue組件開(kāi)發(fā)中的應(yīng)用

    摘要：聊一聊設(shè)計(jì)模式在組件開(kāi)發(fā)中的應(yīng)用回想一下在你的前端生涯中是否遇到過(guò)以下問(wèn)題在寫(xiě)的時(shí)候經(jīng)常會(huì)在命名時(shí)絞盡腦汁在團(tuán)隊(duì)多人開(kāi)發(fā)中出現(xiàn)命名沖突在進(jìn)行組件化開(kāi)發(fā)時(shí)如何規(guī)范書(shū)寫(xiě)什么是是團(tuán)隊(duì)提出的一種的命名方式，通過(guò)這種命名方式可以很好地解決上面遇到的問(wèn) 聊一聊BEM設(shè)計(jì)模式在Vue組件開(kāi)發(fā)中的應(yīng)用 回想一下在你的前端生涯中是否遇到過(guò)以下問(wèn)題1.在寫(xiě)css的時(shí)候經(jīng)常會(huì)在命名class時(shí)絞盡腦汁2.在...

    阿羅 評(píng)論0 收藏0

  • 聊一聊BEM設(shè)計(jì)模式在Vue組件開(kāi)發(fā)中的應(yīng)用

    摘要：聊一聊設(shè)計(jì)模式在組件開(kāi)發(fā)中的應(yīng)用回想一下在你的前端生涯中是否遇到過(guò)以下問(wèn)題在寫(xiě)的時(shí)候經(jīng)常會(huì)在命名時(shí)絞盡腦汁在團(tuán)隊(duì)多人開(kāi)發(fā)中出現(xiàn)命名沖突在進(jìn)行組件化開(kāi)發(fā)時(shí)如何規(guī)范書(shū)寫(xiě)什么是是團(tuán)隊(duì)提出的一種的命名方式，通過(guò)這種命名方式可以很好地解決上面遇到的問(wèn) 聊一聊BEM設(shè)計(jì)模式在Vue組件開(kāi)發(fā)中的應(yīng)用 回想一下在你的前端生涯中是否遇到過(guò)以下問(wèn)題1.在寫(xiě)css的時(shí)候經(jīng)常會(huì)在命名class時(shí)絞盡腦汁2.在...

    LinkedME2016 評(píng)論0 收藏0

  • vue 248+個(gè)知識(shí)點(diǎn)（面試題）為你保駕護(hù)航

    摘要：要招一個(gè)會(huì)的開(kāi)發(fā)者作為面試官的你，你還會(huì)每次都只是問(wèn)這些老土的問(wèn)題嗎你對(duì)的理解是什么你知道什么是雙向綁定嗎你了解它的原理嗎說(shuō)說(shuō)的生命周期有哪些組件通訊有哪些你用過(guò)嗎作為面試者的你，在網(wǎng)上搜索下面試題及答案，看完后你是不是覺(jué)得自己掌握了武林秘 showImg(https://segmentfault.com/img/bVburrG?w=533&h=300); 要招一個(gè)會(huì)vue的開(kāi)發(fā)者： ...

    snowell 評(píng)論0 收藏0

  • 7月份前端資源分享

    摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機(jī)化排序算法實(shí)現(xiàn)學(xué)習(xí)筆記數(shù)組隨機(jī)排序個(gè)變態(tài)題解析上個(gè)變態(tài)題解析下中的數(shù)字前端開(kāi)發(fā)筆記本過(guò)目不忘正則表達(dá)式聊一聊前端存儲(chǔ)那些事兒一鍵分享到各種寫(xiě)給剛?cè)腴T(mén)的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...

    pingan8787 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

instein

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<