feat: 更新 vue 示例

docs/vue/_sidebar.md

 - [概述](./README.md)
 - [数据绑定模型](./data-bind.md)
 - [组件模型](./component.md)
+- [修饰符](./modifier.md)
 - [全局 API](./global-api.md)
 - [组合式 API](./composition-api.md)
 - [选项式 API](./options-api.md)

docs/vue/advanced-api.md

@@ -18,10 +18,10 @@
 
   为了方便阅读，当子节点不是插槽对象时，可以省略 prop 参数。
 
-示例 [详情](<!-- VUEJSON.E_rendering.render_render.gitUrl -->)
+- 示例 [详情](<!-- VUEJSON.E_render-function.render_render.gitUrl -->)
 
-::: preview <!-- VUEJSON.E_rendering.render_render.webUrl -->
-<!-- VUEJSON.E_rendering.render_render.code -->
+::: preview <!-- VUEJSON.E_render-function.render_render.webUrl -->
+<!-- VUEJSON.E_render-function.render_render.code -->
 :::
 
 #### mergeProps()
@@ -37,29 +37,16 @@
   - onXxx 事件监听器——多个同名的事件监听器将被合并到一个数组。
   如果你不需要合并行为而是简单覆盖，可以使用原生 object spread 语法来代替。
 
-- 示例
+- 示例 [详情](<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.gitUrl -->)
 
-```ts
-import { mergeProps } from 'vue'
+::: preview <!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.webUrl -->
 
-const one = {
-  class: 'foo',
-  onClick: handlerA
-}
+> 选项式 API
+<!-- VUEJSON.E_render-function.mergeProps_mergeProps-options.code -->
 
-const two = {
-  class: { bar: true },
-  onClick: handlerB
-}
-
-const merged = mergeProps(one, two)
-/**
- {
-   class: 'foo bar',
-   onClick: [handlerA, handlerB]
- }
- */
-```
+> 组合式 API
+<!-- VUEJSON.E_render-function.mergeProps_mergeProps-composition.code -->
+:::
 
 #### cloneVNode()
 
@@ -73,10 +60,32 @@ const merged = mergeProps(one, two)
 
   Vnode 具有特殊的内部属性，因此克隆它并不像 object spread 一样简单。cloneVNode() 处理了大部分这样的内部逻辑。
 
+- 示例 [详情](<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.gitUrl -->)
+
+::: preview <!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.webUrl -->
+
+> 选项式 API
+<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-options.code -->
+
+> 组合式 API
+<!-- VUEJSON.E_render-function.cloneVNode_cloneVNode-composition.code -->
+:::
+
 #### isVNode()
 
 判断一个值是否为 vnode 类型。
 
+- 示例 [详情](<!-- VUEJSON.E_render-function.isVNode_isVNode-options.gitUrl -->)
+
+::: preview <!-- VUEJSON.E_render-function.isVNode_isVNode-options.webUrl -->
+
+> 选项式 API
+<!-- VUEJSON.E_render-function.isVNode_isVNode-options.code -->
+
+> 组合式 API
+<!-- VUEJSON.E_render-function.isVNode_isVNode-composition.code -->
+:::
+
 #### resolveComponent()
 
 按名称手动解析已注册的组件。
@@ -89,14 +98,36 @@ const merged = mergeProps(one, two)
 
   如果组件未找到，会抛出一个运行时警告，并返回组件名字符串。
 
+- 示例 [详情](<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.gitUrl -->)
+
+::: preview <!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.webUrl -->
+
+> 选项式 API
+<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-options.code -->
+
+> 组合式 API
+<!-- VUEJSON.E_render-function.resolveComponent_resolveComponent-composition.code -->
+:::
+
 #### withDirectives()
 
 用于给 vnode 增加自定义指令。
 
-详细信息
+- 详细信息
 
   用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 `[Directive, value, argument, modifiers]` 形式的数组。如果不需要，可以省略数组的尾元素。
 
+- 示例 [详情](<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.gitUrl -->)
+
+::: preview <!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.webUrl -->
+
+> 选项式 API
+<!-- VUEJSON.E_render-function.withDirectives_withDirectives-options.code -->
+
+> 组合式 API
+<!-- VUEJSON.E_render-function.withDirectives_withDirectives-composition.code -->
+:::
+
 #### withModifiers()
 
 用于向事件处理函数添加内置 [v-on](./built-in.md#v-on) 修饰符。

docs/vue/component.md

@@ -12,43 +12,18 @@
 - 开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割
 - 每个属性通过`=`赋值
 
-
-<!-- TODO -->
-easycom
-
-手动引入
+## 创建及引用组件 @create-and-import-component
 
 ### easycom
 
-#### components 目录下创建组件 @components-directory
-
-在 components 目录新建一个 uvue 文件，按 vue 组件规范编写代码。
-
-组件界面通过 uvue 构造，script 使用 [uts](../uts/README.md) 编写。
-
-返回的类型是组件实例 ComponentPublicInstance
-
-#### uni_modules 组件 @uni-module-components
-
-> uni_module其实不止服务于组件，它可以服务于组件、js库、页面、项目等所有DCloud插件市场所支持的种类。
-
-符合uni_module规范的组件都在项目的`uni_modules`目录下，以插件id为目录存放。（项目模板不放在`uni_modules`目录下）
-
-在HBuilderX中点右键可方便的更新插件，插件作者也可以方便的上传插件。
-
-uni_module有详细的专项文档，请另行查阅[uni_module规范](/plugin/uni_modules.md)。
-
-#### 使用 easycom 组件 @easycom-component
-
 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。`easycom` 将其精简为一步。
 
 只要组件安装在项目的 `components` 目录下或 `uni_modules/插件 id/components` 目录下，并符合 `组件名称/组件名称.(vue|uvue)` 目录结构。就可以不用引用、注册，直接在页面中使用。
 
 - 比如 [uni-rate组件](https://ext.dcloud.net.cn/plugin?id=33)，它导入到项目后，存放在了目录 /uni_modules/uni-rate/uni-rate.vue
 
-  同时它的组件名称也叫 uni-rate，所以这样的组件，不用在 script 里注册和引用。
+  同时它的组件名称也叫 uni-rate，所以这样的组件，不用在 script 里注册和引用。如下：
 
-  如下：
   ```html
   <template>
       <view>
@@ -57,17 +32,28 @@ uni_module有详细的专项文档，请另行查阅[uni_module规范](/plugin/u
     </template>
   <script>
     // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
-    export default {
-      data() {
-        return {
-
-        }
-      }
-    }
+    // ...
   </script>
   ```
 
-### 手动 import 组件
+#### uni_modules 组件 @uni-module-components
+
+> uni_module其实不止服务于组件，它可以服务于组件、js库、页面、项目等所有DCloud插件市场所支持的种类。
+
+符合uni_module规范的组件都在项目的`uni_modules`目录下，以插件id为目录存放。（项目模板不放在`uni_modules`目录下）
+
+在HBuilderX中点右键可方便的更新插件，插件作者也可以方便的上传插件。
+
+uni_module有详细的专项文档，请另行查阅[uni_module规范](https://uniapp.dcloud.net.cn/plugin/uni_modules.html)。
+
+#### easycom组件的类型规范 @easycom-component-type
+
+组件标签名首字母大写，`驼峰+ComponentPublicInstance`，如：
+
+`<test/>` 类型为：TestComponentPublicInstance
+`<uni-data-checkbox/>` 类型为：UniDataCheckboxComponentPublicInstance
+
+### 手动引入组件 @manual-import-component
 
 在新建一个组件后，如果不符合 easycom 规范，则需要手动引入：
 
@@ -80,7 +66,7 @@ uni_module有详细的专项文档，请另行查阅[uni_module规范](/plugin/u
 <!-- 页面（与 child.vue 组件在同级目录 -->
 <template>
   <view>
-    <child></child>
+    <child ref="component1"></child>
   </view>
 </template>
 <script>
@@ -89,12 +75,22 @@ import child from './child.vue'
 export default {
   components: {
     child
+  },
+  data() {
+    return {
+      component1: null as ComponentPublicInstance | null // 手动引入组件时的类型
+    }
   }
 }
 </script>
 ```
 
-## 通信
+#### 手动引入组件的类型规范 @manual-import-component-type
+
+类型为：ComponentPublicInstance
+
+
+## 使用及通信 @use-and-communication
 
 ### 页面与页面通信 @page-page-communication
 
@@ -208,22 +204,13 @@ app.config.globalProperties.globalPropertiesReactiveObj = reactive({
 
 #### 调用 `easycom` 组件方法 @call-easycom-component-method
 
-> 3.97+ 支持 uni_modules 目录下的组件
->
-> 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符，如：a?.b?.()。
+> 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符（如：a?.b?.()）。
 
 easycom组件，用法和内置组件一样。也是使用 `this.$refs` 获取组件并转换为组件的类型，通过 `.`操作符 调用组件方法或设置属性。
 
 **语法**
 
-```(this.$refs['组件ref属性值'] as 驼峰ComponentPublicInstance).foo();```
-
-**easycom组件的类型规范**
-
-组件标签名首字母大写，驼峰+ComponentPublicInstance，如：
-
-`<test/>` 类型为：TestComponentPublicInstance
-`<uni-data-checkbox/>` 类型为：UniDataCheckboxComponentPublicInstance
+```(this.$refs['组件ref属性值'] as 驼峰ComponentPublicInstance)?.foo?.();```
 
 示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-options.gitUrl -->)
 
@@ -243,8 +230,7 @@ easycom组件，用法和内置组件一样。也是使用 `this.$refs` 获取
 
 使用 `ref` 属性拿到组件实例，调用 `easycom` 组件方法时不需要使用 `$callMethod` 方法，直接使用点操作符即可 `.`
 
-> 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符，如：a?.b?.()。
-> 与 ts 不同，在 `()` 前也需要使用 `?.` 操作符。
+> 在调用组件方法的时候如报错 `error: Reference has a nullable type` 则需要使用 `?.` 操作符（如：a?.b?.()）。
 
 示例 [详情](<!-- VUEJSON.E_component-instance.methods_call-method-easycom-uni-modules-options.gitUrl -->)
 
@@ -270,7 +256,7 @@ callMethod可用于所有自定义组件，包括easycom组件也可以使用，
 
 **语法**
 
-```(this.$refs['组件ref属性值'] as ComponentPublicInstance).$callMethod('方法名', ...args)```
+```(this.$refs['组件ref属性值'] as ComponentPublicInstance)?.$callMethod('方法名', ...args)```
 
 **组件类型**
 
@@ -301,7 +287,7 @@ ComponentPublicInstance
 
 **语法**
 
-```(this.$refs['组件ref属性值'] as Uni[xxx]Element).foo();```
+```(this.$refs['组件ref属性值'] as Uni[xxx]Element)?.foo?.();```
 
 **内置组件的element类型规范**
 

docs/vue/modifier.md

+## 事件修饰符 @modifier
+
+### stop
+
+
+<!-- VUEJSON.eventModifiers.stop.description -->
+
+<!-- VUEJSON.eventModifiers.stop.compatibility -->
+
+### prevent
+
+
+<!-- VUEJSON.eventModifiers.prevent.description -->
+
+<!-- VUEJSON.eventModifiers.prevent.compatibility -->
+
+### capture
+
+
+<!-- VUEJSON.eventModifiers.capture.description -->
+
+<!-- VUEJSON.eventModifiers.capture.compatibility -->
+
+### self
+
+
+<!-- VUEJSON.eventModifiers.self.description -->
+
+<!-- VUEJSON.eventModifiers.self.compatibility -->
+
+### once
+
+
+<!-- VUEJSON.eventModifiers.once.description -->
+
+<!-- VUEJSON.eventModifiers.once.compatibility -->
+
+### passive
+
+
+<!-- VUEJSON.eventModifiers.passive.description -->
+
+<!-- VUEJSON.eventModifiers.passive.compatibility -->
+
+## 按键修饰符
+
+### enter
+
+
+<!-- VUEJSON.keyModifiers.enter.description -->
+
+<!-- VUEJSON.keyModifiers.enter.compatibility -->
+
+### tab
+
+
+<!-- VUEJSON.keyModifiers.tab.description -->
+
+<!-- VUEJSON.keyModifiers.tab.compatibility -->
+
+### delete
+
+
+<!-- VUEJSON.keyModifiers.delete.description -->
+
+<!-- VUEJSON.keyModifiers.delete.compatibility -->
+
+### esc
+
+
+<!-- VUEJSON.keyModifiers.esc.description -->
+
+<!-- VUEJSON.keyModifiers.esc.compatibility -->
+
+### space
+
+
+<!-- VUEJSON.keyModifiers.space.description -->
+
+<!-- VUEJSON.keyModifiers.space.compatibility -->
+
+### up
+
+
+<!-- VUEJSON.keyModifiers.up.description -->
+
+<!-- VUEJSON.keyModifiers.up.compatibility -->
+
+### down
+
+
+<!-- VUEJSON.keyModifiers.down.description -->
+
+<!-- VUEJSON.keyModifiers.down.compatibility -->
+
+### left
+
+
+<!-- VUEJSON.keyModifiers.left.description -->
+
+<!-- VUEJSON.keyModifiers.left.compatibility -->
+
+### right
+
+
+<!-- VUEJSON.keyModifiers.right.description -->
+
+<!-- VUEJSON.keyModifiers.right.compatibility -->
+
+## 鼠标按键修饰符
+
+### left
+
+
+<!-- VUEJSON.mouseModifiers.left.description -->
+
+<!-- VUEJSON.mouseModifiers.left.compatibility -->
+
+### right
+
+
+<!-- VUEJSON.mouseModifiers.right.description -->
+
+<!-- VUEJSON.mouseModifiers.right.compatibility -->
+
+### middle
+
+
+<!-- VUEJSON.mouseModifiers.middle.description -->
+
+<!-- VUEJSON.mouseModifiers.middle.compatibility -->
+
+## 系统按键修饰符
+
+### ctrl
+
+
+<!-- VUEJSON.systemModifiers.ctrl.description -->
+
+<!-- VUEJSON.systemModifiers.ctrl.compatibility -->
+
+### alt
+
+
+<!-- VUEJSON.systemModifiers.alt.description -->
+
+<!-- VUEJSON.systemModifiers.alt.compatibility -->
+
+### shift
+
+
+<!-- VUEJSON.systemModifiers.shift.description -->
+
+<!-- VUEJSON.systemModifiers.shift.compatibility -->
+
+### meta
+
+
+<!-- VUEJSON.systemModifiers.meta.description -->
+
+<!-- VUEJSON.systemModifiers.meta.compatibility -->
+
+### exact
+
+
+<!-- VUEJSON.systemModifiers.exact.description -->
+
+<!-- VUEJSON.systemModifiers.exact.compatibility -->
+
+## props 修饰符
+
+### sync
+
+
+<!-- VUEJSON.propsModifiers.sync.description -->
+
+<!-- VUEJSON.propsModifiers.sync.compatibility -->
+
+## v-model 修饰符
+
+### lazy
+
+
+<!-- VUEJSON.vModelModifiers.lazy.description -->
+
+<!-- VUEJSON.vModelModifiers.lazy.compatibility -->
+
+### number
+
+
+<!-- VUEJSON.vModelModifiers.number.description -->
+
+<!-- VUEJSON.vModelModifiers.number.compatibility -->
+
+### trim
+
+
+<!-- VUEJSON.vModelModifiers.trim.description -->
+
+<!-- VUEJSON.vModelModifiers.trim.compatibility -->

docs/vue/options-api.md

@@ -18,7 +18,7 @@
 <!-- VUEJSON.E_component-instance.data_data-options.code -->
 :::
 
-### props
+#### props
 
 用于声明一个组件的 props。
 
@@ -104,10 +104,10 @@
 
 - 选项式 API
 
-示例 [详情](<!-- VUEJSON.E_rendering.render_render.gitUrl -->)
+示例 [详情](<!-- VUEJSON.E_render-function.render_render.gitUrl -->)
 
-::: preview <!-- VUEJSON.E_rendering.render_render.webUrl -->
-<!-- VUEJSON.E_rendering.render_render.code -->
+::: preview <!-- VUEJSON.E_render-function.render_render.webUrl -->
+<!-- VUEJSON.E_render-function.render_render.code -->
 :::
 
 #### slots
@@ -398,10 +398,10 @@
 
 用于命令式地创建侦听器的 API。
 
-示例 [详情](<!-- VUEJSON.E_component-instance.watch-function_watch-function.gitUrl -->)
+示例 [详情](<!-- VUEJSON.E_reactivity.core_watch_watch-options.gitUrl -->)
 
-::: preview <!-- VUEJSON.E_component-instance.watch-function_watch-function.webUrl -->
-<!-- VUEJSON.E_component-instance.watch-function_watch-function.code -->
+::: preview <!-- VUEJSON.E_reactivity.core_watch_watch-options.webUrl -->
+<!-- VUEJSON.E_reactivity.core_watch_watch-options.code -->
 :::