vue 模板_简化版的 vue 页面模板语法
簡化的目的：
- 展現(xiàn)和邏輯分離。讓頁面模板文件僅僅和展現(xiàn)相關(guān)，從而方便做為 GUI Designer / 設(shè)計(jì)師工具的文件格式。
- 簡化語法變種，方便 transpile 到不同的運(yùn)行時(shí)平臺(tái)，例如微信小程序。
- 修復(fù)了 jsx 語法不方便表達(dá)模板之間的 slot 組合關(guān)系的問題
簡化后的頁面模板使用體驗(yàn)大致如下所述
展現(xiàn)和邏輯分離
和 .vue 一個(gè)單文件定義組件不同，我們把組件拆分為 .tm 和 .ts 兩個(gè)文件，例如
SomeComponent.tm
<html><body><div :title="myTitle" /></body>
</html>SomeComponent.ts
import * as Biz from '@triones/biz-kernel';
export class SomeComponent extends Biz.MarkupView {public readonly myProp1: string;public readonly myProp2?: string;public get myTitle() {return '..some title...' + this.myProp1;}
}當(dāng)調(diào)用 SomeComponent 組件的時(shí)候，會(huì)創(chuàng)建對(duì)應(yīng)的 SomeComponent.ts 這個(gè)類的實(shí)例。然后渲染頁面的時(shí)候，會(huì)用 SomeComponent.tm 來渲染。通過 :title 這樣的屬性來綁定“展現(xiàn)”和“邏輯”，渲染的時(shí)候 get myTitle() 這個(gè) getter 屬性會(huì)被求值。
調(diào)用組件可以傳參，例如
<SomeComponent myProp1="hello" />這個(gè)時(shí)候，從 public readonly myProp1: string 上就可以取到傳入的 myProp1 屬性。沒有傳的 myProp2 屬性就是 undefined。
對(duì)于事件處理，需要做如下聲明
SomeComponent.tm
<html><body><button @onClick="sayHello">hello</button></body>
</html>SomeComponent.ts
import * as Biz from '@triones/biz-kernel';
export class SomeComponent extends Biz.MarkupView {public sayHello() {// ...}
}和 vue 類似的是都是用 : 和 @ 來表達(dá)屬性綁定和事件處理。和 vue 不同的是，在綁定的地方只能寫屬性名字引用對(duì)應(yīng)的屬性，不能寫復(fù)雜的表達(dá)式。和微信的 wxml 語法類似，bind:tap 這樣的事件綁定的地方，也是只能寫一個(gè) event handler 的方法名，不能寫表達(dá)式。
習(xí)慣了在頁面模板里寫大量邏輯代碼的同學(xué)會(huì)非常不習(xí)慣，覺得這是開歷史的倒車。但是把邏輯從頁面模板里分離之后，這個(gè)純展示的頁面模板是非常適合做為 GUI Designer 的持久化格式的，或者從 sketch / figma 這樣的設(shè)計(jì)師工具導(dǎo)出。
零散小組件
為了避免寫很多組件，要建很多文件。我們可以把相關(guān)的小組件，合并寫在一個(gè)大文件里。例如這樣
<template #default><Header /><Body /><Footer />
</template
<template #Header>...
</template>
<template #Body>...
</template>
<template #Footer>...
</template>這么寫就省得建立 4 個(gè)組件了，合并寫到一個(gè)組件里。如果沒有寫 <template #default>，那默認(rèn)就是包裹在 <template #default> 里的。從語法上來說，也非常類似微信小程序的 wxml 的寫法。只是微信小程序的 wxml 沒有 <template #default>，而是直接寫在了文件的頂層。
也就是這么寫
<div>hello</div>和這么寫
<template #default><div>hello</div>
</template>是等價(jià)的
給父組件傳復(fù)雜參數(shù)
在 react / vue 中一個(gè)非常常見的做法是用 children 來表達(dá)數(shù)據(jù)屬性。例如
<LineChart width={500} height={300} data={data}><XAxis dataKey="name"/><YAxis/><CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
</LineChart>如果是 react 組件，往往會(huì)用 React.Children 來遍歷這些子節(jié)點(diǎn)，從中提取數(shù)據(jù)做為參數(shù)來使用。也就是給一個(gè)組件傳遞 children，有的時(shí)候傳的是組件，有的時(shí)候傳的是渲染組件的函數(shù)，有的時(shí)候傳遞過去被當(dāng)成 array/object 使用。這也是 jsx 語法從一開始沒有設(shè)計(jì)好的地方。
這個(gè)問題的實(shí)質(zhì)是類 html 語法，限定了屬性是簡單的字符串。如果我們這么寫：
<LineChart XAxis="{ dataKey: "name" }" YAxis CartesianGrid="{ stroke: "#eee", strokeDasharray="5 5" } />書寫體驗(yàn)會(huì)非常難受，這一行 LineChart 組件的調(diào)用也會(huì)非常的長。把這些屬性折行之后寫成 children，就可以更結(jié)構(gòu)化地進(jìn)行書寫。
為了改進(jìn)類 html 語法的書寫體驗(yàn)，我們?cè)谛抡Z法里，增加了 # 的概念。
<LineChart :wdith="500" :height="300" :data="data"><attr #XAxis dataKey="name"/><attr #YAxis>true</attr><attr #CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
</LineChart>用 #xxx 的方式來表達(dá)，我是給組件傳遞了 xxx 屬性。這樣做為數(shù)據(jù)使用的 children，和做為組件使用的 children 就被區(qū)分開了。
給父組件傳遞 slot
#xxx 除了可以用來傳遞 attr 之外，也可以用來傳遞 slot。slot 分為三種：
- UI fragment：例如一個(gè) card 組件有一個(gè) title 區(qū)域是可以自定義的。那么可以定義一個(gè)名為 title 的 slot，允許使用者傳入自己的實(shí)現(xiàn)。
- 會(huì)被多次實(shí)例化的 template：例如一個(gè) ListView 的每個(gè) ListItem 是可用戶自定義的。但是和 card 組件的 title 不同，這里需要用戶傳入一個(gè)“函數(shù)”，因?yàn)槊恳恍械臄?shù)據(jù)是不一樣的。
- 虛擬節(jié)點(diǎn)：微信小程序有一個(gè)概念叫虛擬節(jié)點(diǎn)。其實(shí)是上面所說的 template 的弱化形式。用戶傳入的是一個(gè)“組件名稱”，而不是一個(gè)“函數(shù)”。然后根據(jù)傳入的組件名字，會(huì)多次實(shí)例化該組件，達(dá)到用戶自定義的目的。
我們先來看 UI fragment 形式的表達(dá)方式：
定義組件
<div class="container"><header><slot :render="header" /></header><main><slot :render="children" /></main><footer><slot :render="footer" /></footer>
</div>通過 <slot> 來表達(dá)，這個(gè)地方可以用戶自定義。
使用組件
<BaseLayout><fragment #header><h1>Here might be a page title</h1></fragment><fragment #children><p>A paragraph for the main content.</p><p>And another one.</p></fragment><fragment #footer><p>Here's some contact info</p></fragment>
</BaseLayout>這里用 <fragment> 來表達(dá)，傳入的是一個(gè)具體的實(shí)例，而不是可以被多次調(diào)用的參數(shù)。如果是 React，那么類型就是 ReactNode。
第二種就是傳入可被多次實(shí)例化的 template
定義組件
<div class="container"><header><slot :render="header" title="abc" /></header><footer><slot :render="footer" title="xyz" /></footer>
</div><slot> 渲染的額時(shí)候，額外提供了參數(shù)
使用組件
<BaseLayout><template #header><h1>Here might be a page title: {{ #header.title }}</h1></template><template #footer><p>Here's some contact info: {{ #footer.title }}</p></template>
</BaseLayout>傳入 template 和 fragment 不同，template 會(huì)捕獲參數(shù)，從而可以在 template 內(nèi)容里引用。template 比 fragment 更常用，所以有一種簡寫形式：
使用組件
<BaseLayout><h1 #header>Here might be a page title: {{ #header.title }}</h1><p #footer>Here's some contact info: {{ #footer.title }}</p>
</BaseLayout>綜上 #xxx 是一種傳遞各種復(fù)雜屬性的寫法。相比 jsx 的語法，折行書寫更舒服。
引用組件
vue 沒有在頁面模板里寫 import 的語法。最初 vue 是假設(shè)所有組件全局可引用的。而我們希望組件必須 import 了才可以使用，這樣就方便引入第三方的組件。例如引用微信小程序原生語法書寫的組件：
<import from="@vant/weapp/tag/index" as="VantTag"/>
<template #default><view><VantTag /></view>
</template>這里引用的 @vant/weapp 是外部第三方組件，通過 import 就可以直接被使用。import 后的組件可以當(dāng)作“虛擬節(jié)點(diǎn)”傳遞出去使用。這個(gè)是微信小程序特有的概念：
<import from="@app/MyComps/MyHeader" />
<import from="@app/MyComps/MyFooter" />
<template #default><BaseLayout :header="<MyHeader/>" :footer="<MyFooter/>" />
</template>BaseLayout 要聲明自己接受這么兩個(gè)抽象節(jié)點(diǎn)，所以要和普通的 slot 區(qū)分開來
<div class="container"><header><slot :component="header" title="abc" /></header><footer><slot :component="footer" title="xyz" /></footer>
</div>區(qū)別就是 <slot :component ..> 代替了 <slot :render ...>。
和 jsx 一樣的習(xí)慣，如果是小寫開頭的組件，則是平臺(tái) native 的組件。例如 <div> <view> 這些都是不用 import 可以直接使用的。
引用 children
如果組件只有一個(gè) slot 要傳，那沒有必要給這個(gè) slot 命名了。缺省的 slot 名字就叫 children
定義組件
<div class="container"><main><slot :render="children" /></main>
</div>使用組件
<BaseLayout><p>A paragraph for the main content.</p><p>And another one.</p>
</BaseLayout>這個(gè)實(shí)際上等價(jià)于
使用組件
<BaseLayout><fragment #children><p>A paragraph for the main content.</p><p>And another one.</p></fragment>
</BaseLayout>也就是普通寫法下的子組件，其實(shí)是一個(gè) fragment 類型的 slot。
用 slot 來實(shí)現(xiàn)分支和循環(huán)
有了 slot，就相當(dāng)于有了回調(diào)函數(shù)。那么就可以把分支和循環(huán)變成內(nèi)置組件的功能，而不是一種固定語法。比如內(nèi)置一個(gè)叫 <dynamic> 的組件
<dynamic :visible="vip"><p>you are vip</p>
</dynamic>分支
<dynamic :slot="userType"><fragment #vip><p>you are vip</p></fragment><fragment #normal><p>you are normal</p></fragment>
</dynamic>循環(huán)
<template #default><ul><dynamic :expand="items" key="id"><MyItem #element></dynamic></ul>
</template>
<template #MyItem><span>{{ #MyItem.firstName }}</span><span>{{ #MyItem.lastName }}
</template>核心區(qū)別
- 展示和邏輯分離，分成兩個(gè)文件來寫。不允許在頁面模板里寫表達(dá)式
- 改進(jìn) html 傳遞復(fù)雜屬性寫法不方便的問題，引入寫在 tag body 中的 #xxx 屬性
- 把 slot 做為第一等的公民，映射到各種運(yùn)行時(shí)平臺(tái)的三種 slot 類型
- 以 slot 為基礎(chǔ)，用內(nèi)置組件代替分支/循環(huán)的語法
語法很大程度上是口味問題。不是說這么寫一定就比 jsx，vue，wxml 要高級(jí)。只是多了一種選擇。如果你需要選擇一種面向設(shè)計(jì)師的序列化格式，或者需要支持代碼生成，可以考慮考慮上述的類 vue 語法。
總結(jié)
以上是生活随笔為你收集整理的vue 模板_简化版的 vue 页面模板语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 好听的门厂名字大全集
- 下一篇： 设计一个扩展自抽象类geometrico