鍍金池/ 問答/HTML5  HTML/ template標(biāo)簽在vue組件中扮演怎樣的角色?

template標(biāo)簽在vue組件中扮演怎樣的角色?

最開始一直覺得template包裹一個(gè)組件 代表著之后的部分為一個(gè)整體
后來發(fā)現(xiàn)其他人代碼中出現(xiàn)template嵌套的情況 就是很多嵌套div外都會(huì)包裹template 例如

<template>
   <div>
      <template>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
    </template>
    <template>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
    </template>
    <template>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
    </template>
    <template>
            <div>
                <div>
                    <div></div>
                </div>
            </div>
    </template>
   </div>
 </template>

補(bǔ)充:這里的template不是指最外層的template 是單文件組件內(nèi)部的template

1、這樣寫是否有什么好處?
2、template有什么明確語義?
3、在vue組件當(dāng)中與div相比有何異同?

回答
編輯回答
帥到炸

你可以把template理解成占位符

2017年12月16日 12:02
編輯回答
耍太極

應(yīng)該是將之間的字符串 編譯成html語言的

2017年1月26日 09:17
編輯回答
絯孑氣

我的理解template應(yīng)該是告訴vue-loader這個(gè)是html標(biāo)簽,需要編譯處理。和style標(biāo)簽和script標(biāo)簽區(qū)分開來,如果不加這個(gè)標(biāo)簽的話那只能用div或者其他標(biāo)簽,但是這樣在使用的時(shí)候就容易出問題,寫代碼的時(shí)候可能給跟div加一下樣式啥的,如果沒有template標(biāo)簽,不好處理

2017年11月30日 03:11
編輯回答
情未了

這種寫法基本沒用。
除了最外層template表示api里的template: '字符串模板',內(nèi)層的template是要配合v-ifv-for做分組使用的。

2018年3月9日 07:08
編輯回答
哚蕾咪

首先明確一點(diǎn):你所說的組件是不是單文件組件?
如果是的話,單文件組件必須要用 <template> 標(biāo)簽來指定渲染模板。

至于這樣寫有什么好處,template 有什么明確語義,這個(gè)可以在文檔中看到說明:

HTML <template> 元素是一種用于保存客戶端內(nèi)容的機(jī)制,該內(nèi)容在頁(yè)面加載時(shí)不被渲染,但可以在運(yùn)行時(shí)使用 JavaScript 進(jìn)行實(shí)例化。

可以將一個(gè)模板視為正在被存儲(chǔ)以供隨后在文檔中使用的一個(gè)內(nèi)容片段。

雖然, 在加載頁(yè)面的同時(shí),解析器確實(shí)處理 <template>元素的內(nèi)容,這樣做只是確保這些內(nèi)容是有效的; 然而,元素的內(nèi)容不會(huì)被渲染。

希望對(duì)你有幫助

2017年2月13日 08:50