国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

instein / 1997人閱讀

摘要：活動結束單文件組件使用構建工具創建項目，綜合來看單文件組件應該是最好的定義組件的方式，而且不會帶來額外的模版語法的學習成本。

前端組件化開發已經是一個老生常談的話題了，組件化讓我們的開發效率以及維護成本帶來了質的提升。

當然因為現在的系統越來越復雜龐大，所以開發與維護成本就變得必須要考慮的問題，因此滋生出了目前的三大前端框架 Vue、Angular、React。

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

字符串形式

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

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

模版字面量 ES6 語法，與字符串不同的是，我們可以進行多行書寫，相對單純字符串有很大優勢，體驗更優，但是可能瀏覽器兼容性會存在問題，需要進行轉譯為 ES5 語法。

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

      
      {{ content }}
    

  `
});
內聯模版(inline-template)

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


  {{label}}

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

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

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

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

相比渲染函數的抽象而言，JSX 比較容易一些，對于熟悉 React 的同學是比較友好的。

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

  }
})
單文件組件

使用構建工具 cli 創建項目，綜合來看單文件組件應該是最好的定義組件的方式，而且不會帶來額外的模版語法的學習成本。

以上就是 Vue 中可以定義組件模版的幾種方式，有人可能說，我特么要知道這么多干嘛，只要一種不就行了，我想說兄die多知道幾種可以幫助我們在不同的條件下做出更好的選擇。

比如：你就需要開發一個簡單的頁面，你非要弄個單文件組件，腳手架跑起來，何必呢，你說對不。

我是：劉小登登，一名愛寫作的技術人。
關注公眾號：六小登登，后臺回復「1024」即可免費獲取驚喜福利！后臺回復「加群」邀你進群我會每天全網搜羅好文章給你。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106443.html

相關文章

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

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發給大家，同時發布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

    kumfo 評論0 收藏0

  • 聊一聊BEM設計模式在Vue組件開發中的應用

    摘要：聊一聊設計模式在組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題在寫的時候經常會在命名時絞盡腦汁在團隊多人開發中出現命名沖突在進行組件化開發時如何規范書寫什么是是團隊提出的一種的命名方式，通過這種命名方式可以很好地解決上面遇到的問 聊一聊BEM設計模式在Vue組件開發中的應用 回想一下在你的前端生涯中是否遇到過以下問題1.在寫css的時候經常會在命名class時絞盡腦汁2.在...

    阿羅 評論0 收藏0

  • 聊一聊BEM設計模式在Vue組件開發中的應用

    摘要：聊一聊設計模式在組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題在寫的時候經常會在命名時絞盡腦汁在團隊多人開發中出現命名沖突在進行組件化開發時如何規范書寫什么是是團隊提出的一種的命名方式，通過這種命名方式可以很好地解決上面遇到的問 聊一聊BEM設計模式在Vue組件開發中的應用 回想一下在你的前端生涯中是否遇到過以下問題1.在寫css的時候經常會在命名class時絞盡腦汁2.在...

    LinkedME2016 評論0 收藏0

  • vue 248+個知識點（面試題）為你保駕護航

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

    snowell 評論0 收藏0

  • 7月份前端資源分享

    摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的 更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...

    pingan8787 評論0 收藏0

發表評論

0條評論

instein

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<