vue 模板_简化版的 vue 页面模板语法

最新推荐文章于 2024-06-11 01:02:06 发布

weixin_39756895

最新推荐文章于 2024-06-11 01:02:06 发布

阅读量1.1k

点赞数

文章标签： vue 模板 vue 登录页面模板 vue登录页面模板

简化的目的：

展现和逻辑分离。让页面模板文件仅仅和展现相关，从而方便做为 GUI Designer / 设计师工具的文件格式。
简化语法变种，方便 transpile 到不同的运行时平台，例如微信小程序。
修复了 jsx 语法不方便表达模板之间的 slot 组合关系的问题

简化后的页面模板使用体验大致如下所述

展现和逻辑分离

和 .vue 一个单文件定义组件不同，我们把组件拆分为 .tm 和 .ts 两个文件，例如

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;
  }
}

当调用 SomeComponent 组件的时候，会创建对应的 SomeComponent.ts 这个类的实例。然后渲染页面的时候，会用 SomeComponent.tm 来渲染。通过 :title 这样的属性来绑定“展现”和“逻辑”，渲染的时候 get myTitle() 这个 getter 属性会被求值。

调用组件可以传参，例如

<SomeComponent myProp1="hello" />

这个时候，从 public readonly myProp1: string 上就可以取到传入的 myProp1 属性。没有传的 myProp2 属性就是 undefined。

对于事件处理，需要做如下声明

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 类似的是都是用 : 和 @ 来表达属性绑定和事件处理。和 vue 不同的是，在绑定的地方只能写属性名字引用对应的属性，不能写复杂的表达式。和微信的 wxml 语法类似，bind:tap 这样的事件绑定的地方，也是只能写一个 event handler 的方法名，不能写表达式。

习惯了在页面模板里写大量逻辑代码的同学会非常不习惯，觉得这是开历史的倒车。但是把逻辑从页面模板里分离之后，这个纯展示的页面模板是非常适合做为 GUI Designer 的持久化格式的，或者从 sketch / figma 这样的设计师工具导出。

零散小组件

为了避免写很多组件，要建很多文件。我们可以把相关的小组件，合并写在一个大文件里。例如这样

<template #default>
   <Header />
   <Body />
   <Footer />
</template
<template #Header>
   ...
</template>
<template #Body>
   ...
</template>
<template #Footer>
   ...
</template>

这么写就省得建立 4 个组件了，合并写到一个组件里。如果没有写 <template #default>，那默认就是包裹在 <template #default> 里的。从语法上来说，也非常类似微信小程序的 wxml 的写法。只是微信小程序的 wxml 没有 <template #default>，而是直接写在了文件的顶层。

也就是这么写

<div>hello</div>

和这么写

<template #default>
  <div>hello</div>
</template>

是等价的

给父组件传复杂参数

在 react / vue 中一个非常常见的做法是用 children 来表达数据属性。例如

<LineChart width={500} height={300} data={data}>
    <XAxis dataKey="name"/>
    <YAxis/>
    <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
</LineChart>

如果是 react 组件，往往会用 React.Children 来遍历这些子节点，从中提取数据做为参数来使用。也就是给一个组件传递 children，有的时候传的是组件，有的时候传的是渲染组件的函数，有的时候传递过去被当成 array/object 使用。这也是 jsx 语法从一开始没有设计好的地方。

这个问题的实质是类 html 语法，限定了属性是简单的字符串。如果我们这么写：

<LineChart XAxis="{ dataKey: "name" }" YAxis CartesianGrid="{ stroke: "#eee", strokeDasharray="5 5" } />

书写体验会非常难受，这一行 LineChart 组件的调用也会非常的长。把这些属性折行之后写成 children，就可以更结构化地进行书写。

为了改进类 html 语法的书写体验，我们在新语法里，增加了 # 的概念。

<LineChart :wdith="500" :height="300" :data="data">
  <attr #XAxis dataKey="name"/>
  <attr #YAxis>true</attr>
  <attr #CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
</LineChart>

用 #xxx 的方式来表达，我是给组件传递了 xxx 属性。这样做为数据使用的 children，和做为组件使用的 children 就被区分开了。

给父组件传递 slot

#xxx 除了可以用来传递 attr 之外，也可以用来传递 slot。slot 分为三种：

UI fragment：例如一个 card 组件有一个 title 区域是可以自定义的。那么可以定义一个名为 title 的 slot，允许使用者传入自己的实现。
会被多次实例化的 template：例如一个 ListView 的每个 ListItem 是可用户自定义的。但是和 card 组件的 title 不同，这里需要用户传入一个“函数”，因为每一行的数据是不一样的。
虚拟节点：微信小程序有一个概念叫虚拟节点。其实是上面所说的 template 的弱化形式。用户传入的是一个“组件名称”，而不是一个“函数”。然后根据传入的组件名字，会多次实例化该组件，达到用户自定义的目的。

我们先来看 UI fragment 形式的表达方式：

定义组件

<div class="container">
   <header>
      <slot :render="header" />
   </header>
   <main>
      <slot :render="children" />
   </main>
   <footer>
      <slot :render="footer" />
   </footer>
</div>

通过 <slot> 来表达，这个地方可以用户自定义。

使用组件

<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> 来表达，传入的是一个具体的实例，而不是可以被多次调用的参数。如果是 React，那么类型就是 ReactNode。

第二种就是传入可被多次实例化的 template

定义组件

<div class="container">
   <header>
      <slot :render="header" title="abc" />
   </header>
   <footer>
      <slot :render="footer" title="xyz" />
   </footer>
</div>

<slot> 渲染的额时候，额外提供了参数

使用组件

<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 会捕获参数，从而可以在 template 内容里引用。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 是一种传递各种复杂属性的写法。相比 jsx 的语法，折行书写更舒服。

引用组件

vue 没有在页面模板里写 import 的语法。最初 vue 是假设所有组件全局可引用的。而我们希望组件必须 import 了才可以使用，这样就方便引入第三方的组件。例如引用微信小程序原生语法书写的组件：

<import from="@vant/weapp/tag/index" as="VantTag"/>
<template #default>
  <view>
    <VantTag />
  </view>
</template>

这里引用的 @vant/weapp 是外部第三方组件，通过 import 就可以直接被使用。import 后的组件可以当作“虚拟节点”传递出去使用。这个是微信小程序特有的概念：

<import from="@app/MyComps/MyHeader" />
<import from="@app/MyComps/MyFooter" />
<template #default>
   <BaseLayout :header="<MyHeader/>" :footer="<MyFooter/>" />
</template>

BaseLayout 要声明自己接受这么两个抽象节点，所以要和普通的 slot 区分开来

<div class="container">
   <header>
      <slot :component="header" title="abc" />
   </header>
   <footer>
      <slot :component="footer" title="xyz" />
   </footer>
</div>

区别就是 <slot :component ..> 代替了 <slot :render ...>。

和 jsx 一样的习惯，如果是小写开头的组件，则是平台 native 的组件。例如 <div> <view> 这些都是不用 import 可以直接使用的。

引用 children

如果组件只有一个 slot 要传，那没有必要给这个 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>

这个实际上等价于

使用组件

<BaseLayout>
   <fragment #children>
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
   </fragment>
</BaseLayout>

也就是普通写法下的子组件，其实是一个 fragment 类型的 slot。

用 slot 来实现分支和循环

有了 slot，就相当于有了回调函数。那么就可以把分支和循环变成内置组件的功能，而不是一种固定语法。比如内置一个叫 <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>

循环

<template #default>
  <ul>
    <dynamic :expand="items" key="id"><MyItem #element></dynamic>
  </ul>
</template>
<template #MyItem>
  <span>{{ #MyItem.firstName }}</span><span>{{ #MyItem.lastName }}
</template>

核心区别

展示和逻辑分离，分成两个文件来写。不允许在页面模板里写表达式
改进 html 传递复杂属性写法不方便的问题，引入写在 tag body 中的 #xxx 属性
把 slot 做为第一等的公民，映射到各种运行时平台的三种 slot 类型
以 slot 为基础，用内置组件代替分支/循环的语法

语法很大程度上是口味问题。不是说这么写一定就比 jsx，vue，wxml 要高级。只是多了一种选择。如果你需要选择一种面向设计师的序列化格式，或者需要支持代码生成，可以考虑考虑上述的类 vue 语法。

weixin_39756895

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 模板_简化版的 vue 页面模板语法

简化的目的：展现和逻辑分离。让页面模板文件仅仅和展现相关，从而方便做为 GUI Designer / 设计师工具的文件格式。简化语法变种，方便 transpile 到不同的运行时平台，例如微信小程序。修复了 jsx 语法不方便表达模板之间的 slot 组合关系的问题简化后的页面模板使用体验大致如下所述展现和逻辑分离和 .vue 一个单文件定义组件不同，我们把组件拆分为 .tm 和 .ts 两个文件...
复制链接

扫一扫