前端組件化開發已經是一個老生常談的話題了，組件化讓我們的開發效率以及維護成本帶來了質的提升。
當然因為現在的系統越來越復雜龐大，所以開發與維護成本就變得必須要考慮的問題，因此滋生出了目前的三大前端框架 Vue、Angular、React。
那今天我們就來看看 Vue 中有哪些定義組件模版的方式以及他們之間的一些差別。
字符串形式
Vue 最簡單直接的一種定義組件模版的方式，但是方式寫起來很不友好，就像我們以前拼接 HTML 元素是一樣的，很痛苦，所以我們并不常用
Vue.component("my-button", { data: function () { return { label: "是兄弟就來砍我" } }, template: "<button>{{label}}</button>"});模版字面量
模版字面量 ES6 語法，與字符串不同的是，我們可以進行多行書寫，相對單純字符串有很大優勢，體驗更優，但是可能瀏覽器兼容性會存在問題，需要進行轉譯為 ES5 語法。
Vue.component("my-content", { data: function () { return { label: "是兄弟就來砍我", content: "刀刀暴擊" } }, template: ` <div> <button>{{ label }}</button> <span>{{ content }}</span> </div> `});內聯模版(inline-template)
與 「X-template」模版定義方式被稱為模版定義的替代品，把內容定義在組件標簽元素的內部，而不是作為 slot 內容分發，方式比較靈活，但是給讓我們組件的模版與其他屬性分離開。
<my-label inline-template> <span>{{label}}</span></my-label>Vue.component('my-label', { data: function () { return { label: "趕緊上車吧，兄die" } }})X-template
定義一個 <script> 標簽，標記 text/x-template 類型，通過 id 鏈接。
<script type="text/x-template" id="label-template"> <span>{{label}}</span></script>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 <div>{this.label}</div> }})單文件組件
使用構建工具 cli 創建項目，綜合來看單文件組件應該是最好的定義組件的方式，而且不會帶來額外的模版語法的學習成本。
<template> <div> <ul> <li v-for="(item, index) in items" :key="index">{{item}}</li> </ul> </div></template><script>export default { data() { return { items: ["我砍", "我砍", "我砍"] }; }};</script>以上就是 Vue 中可以定義組件模版的幾種方式，有人可能說，我特么要知道這么多干嘛，只要一種不就行了，我想說兄die多知道幾種可以幫助我們在不同的條件下做出更好的選擇。
比如：你就需要開發一個簡單的頁面，你非要弄個單文件組件，腳手架跑起來，何必呢，你說對不。
總結
以上所述是小編給大家介紹的Vue 中可以定義組件模版的幾種方式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
