Vue.js 使用了基於 HTML 的模板語法,允許開發者宣告式地將 DOM 綁定至底層 Vue 實例的資料。所有 Vue.js 的範本都是合法的 HTML ,所以能被遵循規範的瀏覽器和 HTML 解析器解析。
在Vue中定義元件模板有很多選擇。在我看來,至少有七種不同的方式:
字串
#模板文字
#X-Templates
內聯
#渲染功能
-
JSX
單頁元件
在本文中,我們將逐一介紹每種方法的範例,並討論其優缺點,以便您了解在任何特定情況下使用哪種方法最好。
1、字串
預設情況下,範本將定義為JS檔案中的字串。我想我們都同意字串中的模板是非常難以理解的。除了廣泛的瀏覽器支援之外,這個方法沒有什麼特別之處。
Vue.component('my-checkbox', { template: `<div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"> </div><div class="title">{{ title }}</div></div>`, data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });
2、模板文字
#ES6模板字面量(“backticks”)允許您跨多行定義模板,這是在常規Javascript字串中無法做到的。雖然為了安全起見,您可能仍然應該轉換為ES5,但現在許多新瀏覽器都支援這些命令,並且更容易閱讀。
不過,這種方法並不完美;我發現大多數ide在語法高亮、製表符、換行等方面仍然讓您感到痛苦。
Vue.component('my-checkbox', { template: ` < div class = "checkbox-wrapper"@click = "check" > <div: class = "{ checkbox: true, checked: checked }" ></div> <div class="title">{{ title }}</div ></div>`, data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });/
3、X-Templates
使用此方法,您的範本將在index.html檔案中的腳本標記中定義。腳本標記由文字/x-template標記,並由元件定義中的id引用。
我喜歡這種方法,它允許您用正確的HTML標記編寫HTML,但缺點是它將模板與元件定義的其餘部分分開。
Vue.component('my-checkbox', { template: '#checkbox-template', data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });
<script type="text/x-template" id="checkbox-template"> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title">{{ title }}</div> </div> </script>
4、內嵌模板
#透過將inline-template屬性,您可以向Vue表明內部內容是其模板,而不是將其視為分散式內容。
它的缺點與x-templates相同,但一個優點是內容在HTML範本中的正確位置,因此可以在頁面載入時呈現,而不是等到Javascript執行時。
Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });
<my-checkbox inline-template> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title">{{ title }}</div> </div> </my-checkbox>
5、渲染功能
呈現函數要求您將模板定義為Javascript物件。它們顯然是模板選項中最冗長和抽象的。
但是,這樣做的好處是模板更接近編譯器,並且允許您存取完整的Javascript功能,而不是指令提供的子集。
Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } }, render(createElement) { return createElement( 'div', { attrs: { 'class': 'checkbox-wrapper' }, on: { click: this.check } }, [ createElement( 'div', { 'class': { checkbox: true, checked: this.checked } } ), createElement( 'div', { attrs: { 'class': 'title' } }, [ this.title ] ) ] ); } });
6、JSX
Vue中最有爭議的範本選項是JSX。有些開發人員認為JSX醜陋、不直觀,是對Vue精神的背叛。
JSX要求您先轉換,因為瀏覽器無法讀取它。但是,如果需要使用呈現函數,JSX肯定是定義模板的一種不那麼抽象的方法。
Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } }, render() { return <div class="checkbox-wrapper" onClick={ this.check }> <div class={{ checkbox: true, checked: this.checked }}></div> <div class="title">{ this.title }</div> </div> } });
7、單一檔案元件
#只要您對在設定中使用建置工具感到滿意,單一檔案元件就是範本選項之王。它們帶來了兩方面的好處:允許您在編寫標記的同時將所有元件定義保存在一個檔案中。
它們需要換位,而且有些ide不支援這種檔案類型的語法高亮顯示,但在其他方面很難打敗它們。
<template> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title">{{ title }}</div> </div> </template> <script> export default { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } } </script>
您可能會爭辯說,有更多的模板定義的可能性,因為您可以使用模板預處理程序,例如Pug與SFCs!
哪個最好?
當然沒有一種完美的方式,每一種都應該根據你的用例來判斷。我認為最好的開發人員會意識到所有可能性,並將每個開發人員作為他們的Vue.js工具帶中的工具!
英文原文網址:https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/
相關推薦:
更多程式相關知識,請造訪:程式設計入門! !
以上是Vue.js中定義元件範本的幾種方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

VueUse 是 Anthony Fu 的一个开源项目,它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合,希望对大家有所帮助!

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

如何使用VueRouter4.x?下面本篇文章就来给大家分享快速上手教程,介绍一下10分钟快速上手VueRouter4.x的方法,希望对大家有所帮助!

本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目,都是非常棒的项目,希望当中有您想要收藏的那一个。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3漢化版
中文版,非常好用

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)