Vue框架的模板源碼主要由HTML代碼和Vue語法混合組成。模板源碼是類似于HTML的格式，但是包含了Vue特殊的指令和綁定語法，這使得Vue能夠?qū)?shù)據(jù)和模板相結(jié)合渲染出真實(shí)的DOM元素。

模板源碼中，Vue的指令和表達(dá)式都以 “v-” 開頭，比如常見的v-bind, v-if, v-for等等。這些指令能夠讓我們在視圖中綁定數(shù)據(jù)、控制元素的出現(xiàn)和隱藏、循環(huán)渲染列表等等。除了指令，模板源碼還可以包括JavaScript表達(dá)式、過濾器等功能。

<div id="app">
<h1 v-bind:class="{active: isActive}">{{ message | capitalize }}</h1>
<p v-if="show">現(xiàn)在你看到我了</p>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</div>

上面的代碼段是一個(gè)簡單的Vue模板示例，它包括一個(gè)h1標(biāo)簽、一個(gè)p標(biāo)簽和一個(gè)列表。其中h1標(biāo)簽綁定了一個(gè)isActive屬性，p標(biāo)簽通過v-if指令控制它的顯示和隱藏。列表使用v-for指令循環(huán)渲染，并且為每個(gè)列表項(xiàng)賦予了一個(gè)固定的key。

除了常見的指令和語法外，在Vue模板中還有一些常見的修飾符，比如.lazy, .number, .trim等等。修飾符可以用來改變指令或表達(dá)式的行為，例如將一個(gè)輸入框的v-model與.lazy修飾符一起使用，可以使得用戶輸入時(shí)不會(huì)即時(shí)更新數(shù)據(jù)，而是等到輸入框失去焦點(diǎn)后才更新數(shù)據(jù)。

下面是一個(gè)帶有修飾符的示例代碼：

<input v-model.lazy="message">

上面的代碼中，v-model綁定了一個(gè)message屬性，并加了一個(gè).lazy的修飾符，表示數(shù)據(jù)綁定不會(huì)即時(shí)更新。

總的來說，Vue的模板源碼非常靈活，可以根據(jù)不同的需求組合和定制指令、修飾符等來實(shí)現(xiàn)各種各樣的功能，這也是Vue框架如此流行的一個(gè)重要原因。