Skip to content

U
unidocs-uni-app-x-zh

DCloud / unidocs-uni-app-x-zh

通知 144
Star 2
Fork 33
U
unidocs-uni-app-x-zh
提交 46f0c45e 编写于 作者: D DCloud_LXH
浏览文件
操作

feat: 更新 vue 示例

上级 45a486a9
展开全部 隐藏空白更改
内联 并排
Showing with 302 addition and 1272 deletion
docs/.vuepress/utils/vueJson.json
浏览文件 @ 46f0c45e
此差异已折叠。
docs/vue/_sidebar.md
浏览文件 @ 46f0c45e
- [概述](./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
浏览文件 @ 46f0c45e
......@@ -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
浏览文件 @ 46f0c45e
......@@ -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 0 → 100644
浏览文件 @ 46f0c45e
## 事件修饰符 @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
浏览文件 @ 46f0c45e
......@@ -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 -->
:::
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或