Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
3e12b0af
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
3e12b0af
编写于
3月 04, 2024
作者:
G
git_robot
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新 vueJson.json
上级
9be6e32c
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
1 addition
and
1 deletion
+1
-1
docs/.vuepress/utils/vueJson.json
docs/.vuepress/utils/vueJson.json
+1
-1
未找到文件。
docs/.vuepress/utils/vueJson.json
浏览文件 @
3e12b0af
{
"template"
:{
"name"
:
"#### template"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| lang | Any | - | [lang](#template-lang-values) |
\n\n
##### lang @template-lang-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| html | html |
\n
| pug | pug |
\n\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### template 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| √ | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
""
},
"slot"
:{
"name"
:
"#### slot"
,
"description"
:
"> 组件类型：string
\n\n
\\
<slot> 元素作为组件模板之中的内容分发插槽。
\\
<slot> 元素自身将被替换。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| name | string | - | 用于命名插槽。 |"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### slot 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| √ | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#slot)
\n
"
},
"script"
:{
"name"
:
"#### script"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| setup | Any | - | - |
\n
| lang | Any | - | [lang](#script-lang-values) |
\n\n
##### lang @script-lang-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| ts | typescript |
\n
| uts | uts |
\n\n\n
###### lang 兼容性
\n
| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| ts | x | x | x |
\n
| uts | 4.0 | x | 4.0 |
\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"##### script 属性兼容性
\n
| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| setup | 4.0 | x | 4.0 |
\n\n
##### script 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| √ | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
""
},
"style"
:{
"name"
:
"#### style"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| lang | Any | - | [lang](#style-lang-values) |
\n
| scoped | Any | - | - |
\n
| module | Any | - | - |
\n\n
##### lang @style-lang-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| scss | - |
\n
| less | - |
\n
| stylus | - |
\n\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"##### style 属性兼容性
\n
| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| lang | √ | x | 4.0 |
\n
| scoped | x | x | 4.0 |
\n
| module | x | x | 4.0 |
\n\n
##### style 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| √ | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
""
},
"keep-alive"
:{
"name"
:
"#### keep-alive"
,
"description"
:
"> 组件类型：string
\n\n
\\
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和
\\
<transition> 相似，
\\
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| include | string | - | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |
\n
| exclude | string | - | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |
\n
| max | string | - | 最多可以缓存多少组件实例。 |"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### keep-alive 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 4.0 | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)
\n
"
},
"component"
:{
"name"
:
"#### component"
,
"description"
:
"> 组件类型：string
\n\n
渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| is | Any | - | - |
\n
| inline-template | Any | - | - |"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### component 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.99 | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#component)
\n
"
},
"transition"
:{
"name"
:
"#### transition"
,
"description"
:
"> 组件类型：string
\n\n
\\
<transition> 元素作为单个元素/组件的过渡效果。
\\
<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为
\"
v
\"
|
\n
| appear | string(b) | - | 是否在初始渲染时使用过渡。默认为 false。 |
\n
| css | string(b) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |
\n
| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为
\"
transition
\"
和
\"
animation
\"
。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 [type](#transition-type-values) |
\n
| mode | string | - | 控制离开/进入的过渡时间序列。有效的模式有
\"
out-in
\"
和
\"
in-out
\"
；默认同时生效。 [mode](#transition-mode-values) |
\n
| duration | string | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |
\n
| enter-class | Any | - | - |
\n
| leave-class | Any | - | - |
\n
| appear-class | Any | - | - |
\n
| enter-to-class | Any | - | - |
\n
| leave-to-class | Any | - | - |
\n
| appear-to-class | Any | - | - |
\n
| enter-active-class | Any | - | - |
\n
| leave-active-class | Any | - | - |
\n
| appear-active-class | Any | - | - |
\n
| @before-enter | Any | - | - |
\n
| @before-leave | Any | - | - |
\n
| @before-appear | Any | - | - |
\n
| @enter | Any | - | - |
\n
| @leave | Any | - | - |
\n
| @appear | Any | - | - |
\n
| @after-enter | Any | - | - |
\n
| @after-leave | Any | - | - |
\n
| @after-appear | Any | - | - |
\n
| @enter-cancelled | Any | - | - |
\n
| @leave-cancelled | string | - | v-show only |
\n
| @appear-cancelled | Any | - | - |
\n\n
##### type @transition-type-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| transition | - |
\n
| animation | - |
\n\n\n\n
##### mode @transition-mode-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| out-in | - |
\n
| in-out | - |
\n\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### transition 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| x | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition)
\n
"
},
"transition-group"
:{
"name"
:
"#### transition-group"
,
"description"
:
"> 组件类型：string
\n\n
\\
<transition-group> 元素作为多个元素/组件的过渡效果。
\\
<transition-group> 渲染一个真实的 DOM 元素。默认渲染
\\
<span>，可以通过 tag 属性配置哪个元素应该被渲染。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| tag | string | - | 默认为 span。 |
\n
| move-class | string | - | 覆盖移动过渡期间应用的 CSS 类。 |
\n
| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为
\"
v
\"
|
\n
| appear | string(b) | - | 是否在初始渲染时使用过渡。默认为 false。 |
\n
| css | string(b) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |
\n
| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为
\"
transition
\"
和
\"
animation
\"
。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 [type](#transition-group-type-values) |
\n
| mode | Any | - | - |
\n
| duration | string | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |
\n
| enter-class | Any | - | - |
\n
| leave-class | Any | - | - |
\n
| appear-class | Any | - | - |
\n
| enter-to-class | Any | - | - |
\n
| leave-to-class | Any | - | - |
\n
| appear-to-class | Any | - | - |
\n
| enter-active-class | Any | - | - |
\n
| leave-active-class | Any | - | - |
\n
| appear-active-class | Any | - | - |
\n
| @before-enter | Any | - | - |
\n
| @before-leave | Any | - | - |
\n
| @before-appear | Any | - | - |
\n
| @enter | Any | - | - |
\n
| @leave | Any | - | - |
\n
| @appear | Any | - | - |
\n
| @after-enter | Any | - | - |
\n
| @after-leave | Any | - | - |
\n
| @after-appear | Any | - | - |
\n
| @enter-cancelled | Any | - | - |
\n
| @leave-cancelled | string | - | v-show only |
\n
| @appear-cancelled | Any | - | - |
\n\n
##### type @transition-group-type-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| transition | - |
\n
| animation | - |
\n\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### transition-group 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| x | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)
\n
"
},
"teleport"
:{
"name"
:
"#### teleport"
,
"description"
:
"> 组件类型：string
\n\n
Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| to | string | - | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动
\\
<teleport> 内容的目标元素 |
\n
| disabled | boolean | - | 此可选属性可用于禁用
\\
<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了
\\
<teleport> 的位置渲染。 |"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### teleport 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 4.0 | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)
\n
"
},
"application"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| createApp() | 5.0 | √ | x | 4.0 |
\n
| createSSRApp() | 5.0 | √ | x | 4.0 |
\n
| app.mount() | 5.0 | √ | x | 4.0 |
\n
| app.unmount() | 5.0 | √ | x | 4.0 |
\n
| app.component() | 5.0 | √ | x | 4.0 |
\n
| app.directive() | - | - | - | - |
\n
| app.use() | 5.0 | 3.99 | x | 4.0 |
\n
| app.mixin() | 5.0 | 3.99 | x | 4.0 |
\n
| app.provide() | 5.0 | 3.99 | x | 4.0 |
\n
| app.runWithContext() | - | - | - | - |
\n
| app.version | 5.0 | √ | x | 4.0 |
\n
| app.config | - | - | - | - |
\n
| app.config.errorHandler | 5.0 | x | x | 4.0 |
\n
| app.config.warnHandler | - | - | - | - |
\n
| app.config.performance | - | - | - | - |
\n
| app.config.compilerOptions | - | - | - | - |
\n
| app.config.globalProperties | 5.0 | 3.99 | x | 4.0 |
\n
| app.config.optionMergeStrategies | - | - | - | - |"
,
"example"
:
""
},
"general"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| version | 5.0 | √ | x | 4.0 |
\n
| nextTick() | 5.0 | √ | x | 4.0 |
\n
| defineComponent() | 5.0 | x | x | 4.0 |
\n
| defineAsyncComponent() | - | - | - | - |
\n
| defineCustomElement() | - | - | - | - |"
,
"example"
:
""
},
"reactivity_core"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| ref() | √ | x | 4.0 |
\n
| computed() | √ | x | 4.0 |
\n
| reactive() | √ | x | 4.0 |
\n
| readonly() | 4.0 | x | 4.0 |
\n
| watchEffect() | 4.0 | x | 4.0 |
\n
| watchPostEffect() | 4.0 | x | 4.0 |
\n
| watchSyncEffect() | 4.0 | x | 4.0 |
\n
| watch() | 4.0 | x | 4.0 |"
,
"example"
:
""
},
"reactivity_utilities"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| isRef() | 4.0 | x | 4.0 |
\n
| unref() | 4.0 | x | 4.0 |
\n
| isReactive() | 4.0 | x | 4.0 |
\n
| isReadonly() | 4.0 | x | 4.0 |
\n
| toRef() | 4.0 | x | 4.0 |
\n
| toValue() | 4.0 | x | x |
\n
| toRefs() | 4.0 | x | 4.0 |
\n
| isProxy() | 4.0 | x | 4.0 |"
,
"example"
:
""
},
"reactivity_advanced"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| shallowReactive() | 5.0 | 4.0 | x | 4.0 |
\n
| shallowRef() | 5.0 | 4.0 | x | 4.0 |
\n
| toRaw() | 5.0 | 4.0 | x | 4.0 |
\n
| triggerRef() | 5.0 | 4.0 | x | x |
\n
| customRef() | 5.0 | 4.0 | x | 4.0 |
\n
| shallowReadonly() | 5.0 | 4.0 | x | 4.0 |
\n
| markRaw() | - | - | - | - |
\n
| effectScope() | 5.0 | 4.0 | x | 4.0 |
\n
| getCurrentScope() | 5.0 | 4.0 | x | 4.0 |
\n
| onScopeDispose() | 5.0 | 4.0 | x | 4.0 |"
,
"example"
:
""
},
"composition_lifecycle"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| onMounted() | 5.0 | 4.0 | x | 4.0 |
\n
| onUpdated() | 5.0 | 4.0 | x | 4.0 |
\n
| onUnmounted() | 5.0 | 4.0 | x | 4.0 |
\n
| onBeforeMount() | 5.0 | 4.0 | x | 4.0 |
\n
| onBeforeUpdate() | 5.0 | 4.0 | x | 4.0 |
\n
| onBeforeUnmount() | 5.0 | 4.0 | x | 4.0 |
\n
| onErrorCaptured() | - | - | - | - |
\n
| onRenderTracked() | - | - | - | - |
\n
| onRenderTriggered() | - | - | - | - |
\n
| onActivated() | 5.0 | x | x | 4.0 |
\n
| onDeactivated() | 5.0 | x | x | 4.0 |
\n
| onServerPrefetch() | - | - | - | - |"
,
"example"
:
"#### 页面生命周期 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition-api/lifecycle/page-lifecycle/page-lifecycle.uvue)
\n
```html
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex:1
\"
>
\r\n
<!-- #endif -->
\r\n
<view class=
\"
page container
\"
>
\r\n
<text>page lifecycle</text>
\r\n
<button class=
\"
uni-common-mt
\"
@click=
\"
scrollToBottom
\"
>scrollToBottom</button>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n
<script setup>
\n
import { state, setLifeCycleNum } from '@/store/index.uts'
\n
\n
const isScrolled = ref(false)
\n
\r\n
onLoad((_: OnLoadOptions) => {
\r\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 100)
\r\n
})
\r\n
onPageShow(() => {
\r\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\r\n
onReady(() => {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\r\n
onPullDownRefresh(() => {
\r\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\r\n
onPageScroll((_) => {
\n
// 自动化测试
\r\n
isScrolled.value = true
\r\n
})
\r\n
onReachBottom(() => {
\n
// 自动化测试
\r\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\r\n
onBackPress((_: OnBackPressOptions): boolean | null => {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum - 10)
\n
return null
\r\n
})
\r\n
onPageHide(() => {
\n
// 自动化测试
\r\n
setLifeCycleNum(state.lifeCycleNum - 10)
\r\n
})
\r\n
onUnload(() => {
\n
// 自动化测试
\r\n
setLifeCycleNum(state.lifeCycleNum - 100)
\r\n
})
\r\n
onResize((_) => {
\r\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\n
\n
// 自动化测试
\n
const getLifeCycleNum = () : number => {
\n
return state.lifeCycleNum
\n
}
\n
// 自动化测试
\n
const pageSetLifeCycleNum = (num: number) => {
\n
setLifeCycleNum(num)
\n
}
\n
\n
// 自动化测试
\n
const pullDownRefresh = () => {
\n
uni.startPullDownRefresh({
\n
success() {
\n
setTimeout(() => {
\n
uni.stopPullDownRefresh()
\n
}, 1000)
\n
},
\n
})
\n
}
\n
\r\n
const scrollToBottom = () => {
\r\n
uni.pageScrollTo({
\r\n
scrollTop: 2000,
\r\n
})
\r\n
}
\n
\n
// 自动化测试
\n
const getIsScrolled = (): boolean => {
\n
return isScrolled.value
\n
}
\n
\n
defineExpose({
\n
getLifeCycleNum,
\n
pageSetLifeCycleNum,
\n
pullDownRefresh,
\n
scrollToBottom,
\n
getIsScrolled
\n
})
\r\n
</script>
\r\n\r\n
<style>
\r\n
.container {
\r\n
height: 1200px;
\r\n
}
\r\n
</style>
\n
```
\n
#### 组件生命周期 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.uvue)
\n
```html
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex:1
\"
>
\r\n
<!-- #endif -->
\r\n
<view class=
\"
pag container
\"
>
\r\n
<text class=
\"
uni-common-mb
\"
>component lifecycle</text>
\r\n
<component-lifecycle class=
\"
component-lifecycle
\"
@updateIsScroll=
\"
updateIsScroll
\"
/>
\r\n
<button class=
\"
uni-common-mt
\"
@click=
\"
scrollToBottom
\"
>scrollToBottom</button>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n
<script setup>
\r\n
import ComponentLifecycle from '@/components/CompositionAPILifecycle.uvue'
\r\n
import { state, setLifeCycleNum } from '@/store/index.uts'
\r\n\r\n
const isScrolled = ref(false)
\r\n\r\n
// 自动化测试
\r\n
const getLifeCycleNum = () : number => {
\r\n
return state.lifeCycleNum
\r\n
}
\r\n\r\n
// 自动化测试
\r\n
const pageSetlifeCycleNum = (num : number) => {
\r\n
setLifeCycleNum(num)
\r\n
}
\r\n\r\n
// 自动化测试
\r\n
const pullDownRefresh = () => {
\r\n
uni.startPullDownRefresh({
\r\n
success() {
\r\n
setTimeout(() => {
\r\n
uni.stopPullDownRefresh()
\r\n
}, 1000)
\r\n
},
\r\n
})
\r\n
}
\r\n\r\n
const scrollToBottom = () => {
\r\n
uni.pageScrollTo({
\r\n
scrollTop: 3000,
\r\n
})
\r\n
}
\r\n\r\n
const updateIsScroll = (val : boolean) => {
\r\n
isScrolled.value = val
\r\n
}
\r\n\r\n
// 自动化测试
\r\n
const getIsScrolled = () : boolean => {
\r\n
return isScrolled.value
\r\n
}
\r\n\r\n
defineExpose({
\r\n
getLifeCycleNum,
\r\n
pageSetlifeCycleNum,
\r\n
pullDownRefresh,
\r\n
scrollToBottom,
\r\n
getIsScrolled
\r\n
})
\r\n
</script>
\r\n\r\n
<style>
\r\n
.container {
\r\n
height: 1200px;
\r\n
}
\r\n
</style>
\n
```"
},
"composition_injection"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| provide() | 4.0 | x | 4.0 |
\n
| inject() | 4.0 | x | 4.0 |
\n
| hasInjectionContext() | 4.0 | x | x |"
,
"example"
:
""
},
"options_state"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| data | √ | x | 4.0 |
\n
| props | √ | x | 4.0 |
\n
| computed | √ | x | 4.0 |
\n
| methods | √ | x | 4.0 |
\n
| watch | √ | x | 4.0 |
\n
| emits | √ | x | 4.0 |
\n
| expose | x | x | 4.0 |"
,
"example"
:
"#### 状态选项 示例
\n
- [选项式 API 示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/state)"
},
"options_rendering"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| template | x | x | x |
\n
| render | √ | x | 4.0 |
\n
| compilerOptions | x | x | x |
\n
| slots | √ | x | 4.0 |"
,
"example"
:
"#### 渲染选项 示例
\n
- [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/rendering)"
},
"options_lifecycle"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| beforeCreate | 5.0 | √ | x | 4.0 |
\n
| created | 5.0 | √ | x | 4.0 |
\n
| beforeMount | 5.0 | √ | x | 4.0 |
\n
| mounted | 5.0 | √ | x | 4.0 |
\n
| beforeUpdate | 5.0 | √ | x | 4.0 |
\n
| updated | 5.0 | √ | x | 4.0 |
\n
| beforeUnmount | 5.0 | √ | x | 4.0 |
\n
| unmounted | 5.0 | √ | x | 4.0 |
\n
| errorCaptured | 5.0 | x | x | 4.0 |
\n
| renderTracked | 5.0 | x | x | 4.0 |
\n
| renderTriggered | 5.0 | x | x | 4.0 |
\n
| activated | 5.0 | 4.0 | x | 4.0 |
\n
| deactivated | 5.0 | 4.0 | x | 4.0 |
\n
| serverPrefetch | - | - | - | - |"
,
"example"
:
"#### 页面生命周期示例 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/page.uvue)
\n
```html
\n
<template>
\n
<!-- #ifdef APP -->
\n
<scroll-view style=
\"
flex: 1
\"
>
\n
<!-- #endif -->
\n
<view class=
\"
page container
\"
>
\n
<text>page lifecycle</text>
\n
<button class=
\"
uni-common-mt
\"
@click=
\"
scrollToBottom
\"
>scrollToBottom</button>
\n
</view>
\n
<!-- #ifdef APP -->
\n
</scroll-view>
\n
<!-- #endif -->
\n
</template>
\n\n
<script lang=
\"
uts
\"
>
\n
import { state, setLifeCycleNum } from '@/store/index.uts'
\n\n
export default {
\n
data() {
\n
return {
\n
isScrolled: false,
\n
}
\n
},
\n
onLoad(_ : OnLoadOptions) {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 100)
\n
},
\n
onShow() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
onReady() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
onPullDownRefresh() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
onPageScroll(_) {
\n
// 自动化测试
\n
this.isScrolled = true
\n
},
\n
onReachBottom() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
onBackPress(_ : OnBackPressOptions) : boolean | null {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum - 10)
\n
return null
\n
},
\n
onHide() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum - 10)
\n
},
\n
onUnload() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum - 100)
\n
},
\n
onResize(_){
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
methods: {
\n
// 自动化测试
\n
getLifeCycleNum() : number {
\n
return state.lifeCycleNum
\n
},
\n
// 自动化测试
\n
setLifeCycleNum(num : number) {
\n
setLifeCycleNum(num)
\n
},
\n
// 自动化测试
\n
pullDownRefresh() {
\n
uni.startPullDownRefresh({
\n
success() {
\n
setTimeout(() => {
\n
uni.stopPullDownRefresh()
\n
}, 1000)
\n
},
\n
})
\n
},
\n
scrollToBottom() {
\n
uni.pageScrollTo({
\n
scrollTop: 2000,
\n
})
\n
},
\n
},
\n
}
\n
</script>
\n\n
<style>
\n
.container {
\n
height: 1200px;
\n
}
\n
</style>
\n\n
```
\n
#### 组件生命周期示例 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/component.uvue)
\n
```html
\n
<template>
\n
<view class=
\"
page
\"
>
\n
<text class=
\"
uni-common-mb
\"
>component lifecycle</text>
\n
<component-lifecycle class=
\"
component-lifecycle
\"
/>
\n
</view>
\n
</template>
\n\n
<script>
\n
import ComponentLifecycle from '@/components/OptionsAPILifecycle.uvue'
\n
import { state } from '@/store/index.uts'
\n
export default {
\n
components: { ComponentLifecycle },
\n
methods: {
\n
// 自动化测试
\n
getLifeCycleNum(): number {
\n
return state.lifeCycleNum
\n
},
\n
},
\n
}
\n
</script>
\n\n
```"
},
"options_composition"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| provide | 5.0 | 3.99 | x | 4.0 |
\n
| inject | 5.0 | 3.99 | x | 4.0 |
\n
| mixins | 5.0 | 3.99 | x | 4.0 |
\n
| extends | - | - | - | - |"
,
"example"
:
""
},
"options_misc"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| name | 5.0 | √ | x | 4.0 |
\n
| inheritAttrs | 5.0 | √ | x | 4.0 |
\n
| components | 5.0 | √ | x | 4.0 |
\n
| directives | - | - | - | - |"
,
"example"
:
""
},
"component_instance"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| $data | √ | x | 4.0 |
\n
| $props | √ | x | 4.0 |
\n
| $el | √ | x | 4.0 |
\n
| $options | √ | x | 4.0 |
\n
| $parent | √ | x | 4.0 |
\n
| $root | √ | x | 4.0 |
\n
| $slots | √ | x | 4.0 |
\n
| $refs | √ | x | 4.0 |
\n
| $attrs | √ | x | 4.0 |
\n
| $watch() | √ | x | 4.0 |
\n
| $emit | √ | x | 4.0 |
\n
| $forceUpdate | √ | x | 4.0 |
\n
| $nextTick | √ | x | 4.0 |
\n
| $callMethod | √ | x | 4.0 |"
,
"example"
:
"#### 组件实例 示例
\n
- [组件实例示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance)"
},
"directives"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| v-text | √ | x | 4.0 |
\n
| v-html | 3.99 | x | 4.0 |
\n
| v-show | √ | x | 4.0 |
\n
| v-if | √ | x | 4.0 |
\n
| v-else | √ | x | 4.0 |
\n
| v-else-if | √ | x | 4.0 |
\n
| v-for | √ | x | 4.0 |
\n
| v-on | √ | x | 4.0 |
\n
| v-bind | √ | x | 4.0 |
\n
| v-model | √ | x | 4.0 |
\n
| v-slot | √ | x | 4.0 |
\n
| v-pre | 3.99 | x | 4.0 |
\n
| v-once | 3.99 | x | 4.0 |
\n
| v-memo | 3.99 | x | 4.0 |
\n
| v-cloak | x | x | 4.0 |"
,
"example"
:
"#### 指令 示例
\n
- [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive)"
},
"special_attributes"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| key | √ | x | 4.0 |
\n
| ref | √ | x | 4.0 |
\n
| is | 3.99 | x | 4.0 |"
,
"example"
:
""
},
"render_function"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| h() | 5.0 | 3.99 | x | 4.0 |
\n
| mergeProps() | 5.0 | 4.0 | x | 4.0 |
\n
| cloneVNode() | 5.0 | 4.0 | x | 4.0 |
\n
| isVNode() | 5.0 | √ | x | 4.0 |
\n
| resolveComponent() | 5.0 | √ | x | 4.0 |
\n
| resolveDirective() | - | - | - | - |
\n
| withDirectives() | 5.0 | √ | x | 4.0 |
\n
| withModifiers() | 5.0 | √ | x | 4.0 |"
,
"example"
:
""
},
"single_file_component_script"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| defineProps() | 4.0 | x | 4.0 |
\n
| defineEmits() | 4.0 | x | 4.0 |
\n
| defineModel() | 4.0 | x | x |
\n
| defineExpose() | 4.0 | x | 4.0 |
\n
| defineOptions() | 4.0 | x | x |
\n
| defineSlots() | 4.0 | x | 4.0 |
\n
| useSlots() | 4.0 | x | 4.0 |
\n
| useAttrs() | 4.0 | x | 4.0 |"
,
"example"
:
"####
\\
<script setup> 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition/setup/setup.uvue)
\n
```html
\n
<template>
\n
<!-- #ifdef APP -->
\n
<scroll-view style=
\"
flex: 1
\"
>
\n
<!-- #endif -->
\n
<view class=
\"
page
\"
>
\n
<text class='uni-common-mt' id=
\"
str
\"
>str: {{ str }}</text>
\n
<text class='uni-common-mt' id=
\"
num
\"
>num: {{ num }}</text>
\n
<text class='uni-common-mt' id=
\"
bool
\"
>bool: {{ bool }}</text>
\n
<text class='uni-common-mt' id=
\"
count
\"
>count: {{count}}</text>
\n
<button class='uni-common-mt' id=
\"
increment-btn
\"
@click=
\"
increment
\"
>increment</button>
\n
<text class='uni-common-mt' id=
\"
obj-str
\"
>obj.str: {{ obj['str'] }}</text>
\n
<text class='uni-common-mt' id=
\"
obj-num
\"
>obj.num: {{ obj['num'] }}</text>
\n
<text class='uni-common-mt' id=
\"
obj-bool
\"
>obj.bool: {{ obj['bool'] }}</text>
\n
<button class='uni-common-mt' id=
\"
update-obj-btn
\"
@click=
\"
updateObj
\"
>update obj</button>
\n
<!-- #ifdef APP -->
\n
<RenderFunction :str='str' :count='count' :obj='obj' @compUpdateObj='compUpdateObj' :isShow='true' />
\n
<!-- #endif -->
\n
<Foo>
\n
<text class=
\"
uni-common-mt
\"
id=
\"
default-slot-in-foo
\"
>default slot in Foo</text>
\n
</Foo>
\n
</view>
\n
<!-- #ifdef APP -->
\n
</scroll-view>
\n
<!-- #endif -->
\n
</template>
\n\n
<script>
\n
// #ifdef APP
\n
import RenderFunction from './RenderFunction.uvue'
\n
// #endif
\n
import Foo from './Foo.uvue'
\n
export default {
\n
components: {
\n
// #ifdef APP
\n
RenderFunction,
\n
// #endif
\n
Foo
\n
},
\n
setup() {
\n
const count = ref(0)
\n
// 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}
\n
const increment = () => { count.value++ }
\n
const obj = reactive({
\n
str: 'obj default str',
\n
num: 0,
\n
bool: false,
\n
})
\n
const updateObj = () => {
\n
obj['str'] = 'obj new str'
\n
obj['num'] = 100
\n
obj['bool'] = true
\n
}
\n
const compUpdateObj = () => {
\n
obj['str'] = 'obj new str by comp update'
\n
obj['num'] = 200
\n
obj['bool'] = true
\n
}
\n
return {
\n
str: 'default str',
\n
num: 0,
\n
bool: false,
\n
count,
\n
increment,
\n
obj,
\n
updateObj,
\n
compUpdateObj
\n
}
\n
}
\n
}
\n
</script>
\n
```"
}}
\ No newline at end of file
{
"template"
:{
"name"
:
"#### template"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| lang | string | - | [lang](#template-lang-values) |
\n\n
##### lang @template-lang-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| html | html |
\n
| pug | 仅 Web 端支持 |
\n\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### template 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| √ | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
""
},
"slot"
:{
"name"
:
"#### slot"
,
"description"
:
"> 组件类型：string
\n\n
\\
<slot> 元素作为组件模板之中的内容分发插槽。
\\
<slot> 元素自身将被替换。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| name | string | - | 用于命名插槽。 |"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### slot 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| √ | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#slot)
\n
"
},
"script"
:{
"name"
:
"#### script"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| setup | Any | - | - |
\n
| lang | Any | - | [lang](#script-lang-values) |
\n\n
##### lang @script-lang-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| ts | typescript |
\n
| uts | uts |
\n\n\n
###### lang 兼容性
\n
| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| ts | x | x | x |
\n
| uts | 4.0 | x | 4.0 |
\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"##### script 属性兼容性
\n
| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| setup | 4.0 | x | 4.0 |
\n\n
##### script 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| √ | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
""
},
"style"
:{
"name"
:
"#### style"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| lang | Any | - | [lang](#style-lang-values) |
\n
| scoped | Any | - | - |
\n
| module | Any | - | - |
\n\n
##### lang @style-lang-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| scss | - |
\n
| less | - |
\n
| stylus | - |
\n\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"##### style 属性兼容性
\n
| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| lang | √ | x | 4.0 |
\n
| scoped | x | x | 4.0 |
\n
| module | x | x | 4.0 |
\n\n
##### style 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| √ | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
""
},
"keep-alive"
:{
"name"
:
"#### keep-alive"
,
"description"
:
"> 组件类型：string
\n\n
\\
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和
\\
<transition> 相似，
\\
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| include | string | - | 字符串或正则表达式。只有名称匹配的组件会被缓存。 |
\n
| exclude | string | - | 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 |
\n
| max | string | - | 最多可以缓存多少组件实例。 |"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### keep-alive 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 4.0 | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive)
\n
"
},
"component"
:{
"name"
:
"#### component"
,
"description"
:
"> 组件类型：string
\n\n
渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| is | Any | - | - |
\n
| inline-template | Any | - | - |"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### component 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 3.99 | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#component)
\n
"
},
"transition"
:{
"name"
:
"#### transition"
,
"description"
:
"> 组件类型：string
\n\n
\\
<transition> 元素作为单个元素/组件的过渡效果。
\\
<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为
\"
v
\"
|
\n
| appear | string(b) | - | 是否在初始渲染时使用过渡。默认为 false。 |
\n
| css | string(b) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |
\n
| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为
\"
transition
\"
和
\"
animation
\"
。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 [type](#transition-type-values) |
\n
| mode | string | - | 控制离开/进入的过渡时间序列。有效的模式有
\"
out-in
\"
和
\"
in-out
\"
；默认同时生效。 [mode](#transition-mode-values) |
\n
| duration | string | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |
\n
| enter-class | Any | - | - |
\n
| leave-class | Any | - | - |
\n
| appear-class | Any | - | - |
\n
| enter-to-class | Any | - | - |
\n
| leave-to-class | Any | - | - |
\n
| appear-to-class | Any | - | - |
\n
| enter-active-class | Any | - | - |
\n
| leave-active-class | Any | - | - |
\n
| appear-active-class | Any | - | - |
\n
| @before-enter | Any | - | - |
\n
| @before-leave | Any | - | - |
\n
| @before-appear | Any | - | - |
\n
| @enter | Any | - | - |
\n
| @leave | Any | - | - |
\n
| @appear | Any | - | - |
\n
| @after-enter | Any | - | - |
\n
| @after-leave | Any | - | - |
\n
| @after-appear | Any | - | - |
\n
| @enter-cancelled | Any | - | - |
\n
| @leave-cancelled | string | - | v-show only |
\n
| @appear-cancelled | Any | - | - |
\n\n
##### type @transition-type-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| transition | - |
\n
| animation | - |
\n\n\n\n
##### mode @transition-mode-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| out-in | - |
\n
| in-out | - |
\n\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### transition 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| x | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition)
\n
"
},
"transition-group"
:{
"name"
:
"#### transition-group"
,
"description"
:
"> 组件类型：string
\n\n
\\
<transition-group> 元素作为多个元素/组件的过渡效果。
\\
<transition-group> 渲染一个真实的 DOM 元素。默认渲染
\\
<span>，可以通过 tag 属性配置哪个元素应该被渲染。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| tag | string | - | 默认为 span。 |
\n
| move-class | string | - | 覆盖移动过渡期间应用的 CSS 类。 |
\n
| name | string | - | 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为
\"
v
\"
|
\n
| appear | string(b) | - | 是否在初始渲染时使用过渡。默认为 false。 |
\n
| css | string(b) | - | 是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。 |
\n
| type | string | - | 指定过渡事件类型，侦听过渡何时结束。有效值为
\"
transition
\"
和
\"
animation
\"
。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。 [type](#transition-group-type-values) |
\n
| mode | Any | - | - |
\n
| duration | string | - | 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 |
\n
| enter-class | Any | - | - |
\n
| leave-class | Any | - | - |
\n
| appear-class | Any | - | - |
\n
| enter-to-class | Any | - | - |
\n
| leave-to-class | Any | - | - |
\n
| appear-to-class | Any | - | - |
\n
| enter-active-class | Any | - | - |
\n
| leave-active-class | Any | - | - |
\n
| appear-active-class | Any | - | - |
\n
| @before-enter | Any | - | - |
\n
| @before-leave | Any | - | - |
\n
| @before-appear | Any | - | - |
\n
| @enter | Any | - | - |
\n
| @leave | Any | - | - |
\n
| @appear | Any | - | - |
\n
| @after-enter | Any | - | - |
\n
| @after-leave | Any | - | - |
\n
| @after-appear | Any | - | - |
\n
| @enter-cancelled | Any | - | - |
\n
| @leave-cancelled | string | - | v-show only |
\n
| @appear-cancelled | Any | - | - |
\n\n
##### type @transition-group-type-values
\n\n
| 值名称 | 描述 |
\n
| :- | :- |
\n
| transition | - |
\n
| animation | - |
\n\n
"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### transition-group 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| x | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.cn.vuejs.org/api/built-in-components.html#transition-group)
\n
"
},
"teleport"
:{
"name"
:
"#### teleport"
,
"description"
:
"> 组件类型：string
\n\n
Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。"
,
"attrubute"
:
"##### 属性
\n
| 名称 | 类型 | 默认值 | 描述 |
\n
| :- | :- | :- | :- |
\n
| to | string | - | 必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动
\\
<teleport> 内容的目标元素 |
\n
| disabled | boolean | - | 此可选属性可用于禁用
\\
<teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在您在周围父组件中指定了
\\
<teleport> 的位置渲染。 |"
,
"event"
:
""
,
"example"
:
""
,
"compatibility"
:
"
\n
##### teleport 兼容性
\n
| Android | iOS | web |
\n
| :- | :- | :- |
\n
| 4.0 | x | 4.0 |
\n
"
,
"children"
:
""
,
"reference"
:
"
\n
##### 参见
\n
- [Reference](https://v3.vuejs.org/api/built-in-components.html#teleport)
\n
"
},
"application"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| createApp() | 5.0 | √ | x | 4.0 |
\n
| createSSRApp() | 5.0 | √ | x | 4.0 |
\n
| app.mount() | 5.0 | √ | x | 4.0 |
\n
| app.unmount() | 5.0 | √ | x | 4.0 |
\n
| app.component() | 5.0 | √ | x | 4.0 |
\n
| app.directive() | - | - | - | - |
\n
| app.use() | 5.0 | 3.99 | x | 4.0 |
\n
| app.mixin() | 5.0 | 3.99 | x | 4.0 |
\n
| app.provide() | 5.0 | 3.99 | x | 4.0 |
\n
| app.runWithContext() | - | - | - | - |
\n
| app.version | 5.0 | √ | x | 4.0 |
\n
| app.config | - | - | - | - |
\n
| app.config.errorHandler | 5.0 | x | x | 4.0 |
\n
| app.config.warnHandler | - | - | - | - |
\n
| app.config.performance | - | - | - | - |
\n
| app.config.compilerOptions | - | - | - | - |
\n
| app.config.globalProperties | 5.0 | 3.99 | x | 4.0 |
\n
| app.config.optionMergeStrategies | - | - | - | - |"
,
"example"
:
""
},
"general"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| version | 5.0 | √ | x | 4.0 |
\n
| nextTick() | 5.0 | √ | x | 4.0 |
\n
| defineComponent() | 5.0 | x | x | 4.0 |
\n
| defineAsyncComponent() | - | - | - | - |
\n
| defineCustomElement() | - | - | - | - |"
,
"example"
:
""
},
"reactivity_core"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| ref() | √ | x | 4.0 |
\n
| computed() | √ | x | 4.0 |
\n
| reactive() | √ | x | 4.0 |
\n
| readonly() | 4.0 | x | 4.0 |
\n
| watchEffect() | 4.0 | x | 4.0 |
\n
| watchPostEffect() | 4.0 | x | 4.0 |
\n
| watchSyncEffect() | 4.0 | x | 4.0 |
\n
| watch() | 4.0 | x | 4.0 |"
,
"example"
:
""
},
"reactivity_utilities"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| isRef() | 4.0 | x | 4.0 |
\n
| unref() | 4.0 | x | 4.0 |
\n
| isReactive() | 4.0 | x | 4.0 |
\n
| isReadonly() | 4.0 | x | 4.0 |
\n
| toRef() | 4.0 | x | 4.0 |
\n
| toValue() | 4.0 | x | x |
\n
| toRefs() | 4.0 | x | 4.0 |
\n
| isProxy() | 4.0 | x | 4.0 |"
,
"example"
:
""
},
"reactivity_advanced"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| shallowReactive() | 5.0 | 4.0 | x | 4.0 |
\n
| shallowRef() | 5.0 | 4.0 | x | 4.0 |
\n
| toRaw() | 5.0 | 4.0 | x | 4.0 |
\n
| triggerRef() | 5.0 | 4.0 | x | x |
\n
| customRef() | 5.0 | 4.0 | x | 4.0 |
\n
| shallowReadonly() | 5.0 | 4.0 | x | 4.0 |
\n
| markRaw() | - | - | - | - |
\n
| effectScope() | 5.0 | 4.0 | x | 4.0 |
\n
| getCurrentScope() | 5.0 | 4.0 | x | 4.0 |
\n
| onScopeDispose() | 5.0 | 4.0 | x | 4.0 |"
,
"example"
:
""
},
"composition_lifecycle"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| onMounted() | 5.0 | 4.0 | x | 4.0 |
\n
| onUpdated() | 5.0 | 4.0 | x | 4.0 |
\n
| onUnmounted() | 5.0 | 4.0 | x | 4.0 |
\n
| onBeforeMount() | 5.0 | 4.0 | x | 4.0 |
\n
| onBeforeUpdate() | 5.0 | 4.0 | x | 4.0 |
\n
| onBeforeUnmount() | 5.0 | 4.0 | x | 4.0 |
\n
| onErrorCaptured() | - | - | - | - |
\n
| onRenderTracked() | - | - | - | - |
\n
| onRenderTriggered() | - | - | - | - |
\n
| onActivated() | 5.0 | x | x | 4.0 |
\n
| onDeactivated() | 5.0 | x | x | 4.0 |
\n
| onServerPrefetch() | - | - | - | - |"
,
"example"
:
"#### 页面生命周期 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition-api/lifecycle/page-lifecycle/page-lifecycle.uvue)
\n
```html
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex:1
\"
>
\r\n
<!-- #endif -->
\r\n
<view class=
\"
page container
\"
>
\r\n
<text>page lifecycle</text>
\r\n
<button class=
\"
uni-common-mt
\"
@click=
\"
scrollToBottom
\"
>scrollToBottom</button>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n
<script setup>
\n
import { state, setLifeCycleNum } from '@/store/index.uts'
\n
\n
const isScrolled = ref(false)
\n
\r\n
onLoad((_: OnLoadOptions) => {
\r\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 100)
\r\n
})
\r\n
onPageShow(() => {
\r\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\r\n
onReady(() => {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\r\n
onPullDownRefresh(() => {
\r\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\r\n
onPageScroll((_) => {
\n
// 自动化测试
\r\n
isScrolled.value = true
\r\n
})
\r\n
onReachBottom(() => {
\n
// 自动化测试
\r\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\r\n
onBackPress((_: OnBackPressOptions): boolean | null => {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum - 10)
\n
return null
\r\n
})
\r\n
onPageHide(() => {
\n
// 自动化测试
\r\n
setLifeCycleNum(state.lifeCycleNum - 10)
\r\n
})
\r\n
onUnload(() => {
\n
// 自动化测试
\r\n
setLifeCycleNum(state.lifeCycleNum - 100)
\r\n
})
\r\n
onResize((_) => {
\r\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\r\n
})
\n
\n
// 自动化测试
\n
const getLifeCycleNum = () : number => {
\n
return state.lifeCycleNum
\n
}
\n
// 自动化测试
\n
const pageSetLifeCycleNum = (num: number) => {
\n
setLifeCycleNum(num)
\n
}
\n
\n
// 自动化测试
\n
const pullDownRefresh = () => {
\n
uni.startPullDownRefresh({
\n
success() {
\n
setTimeout(() => {
\n
uni.stopPullDownRefresh()
\n
}, 1000)
\n
},
\n
})
\n
}
\n
\r\n
const scrollToBottom = () => {
\r\n
uni.pageScrollTo({
\r\n
scrollTop: 2000,
\r\n
})
\r\n
}
\n
\n
// 自动化测试
\n
const getIsScrolled = (): boolean => {
\n
return isScrolled.value
\n
}
\n
\n
defineExpose({
\n
getLifeCycleNum,
\n
pageSetLifeCycleNum,
\n
pullDownRefresh,
\n
scrollToBottom,
\n
getIsScrolled
\n
})
\r\n
</script>
\r\n\r\n
<style>
\r\n
.container {
\r\n
height: 1200px;
\r\n
}
\r\n
</style>
\n
```
\n
#### 组件生命周期 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.uvue)
\n
```html
\n
<template>
\r\n
<!-- #ifdef APP -->
\r\n
<scroll-view style=
\"
flex:1
\"
>
\r\n
<!-- #endif -->
\r\n
<view class=
\"
pag container
\"
>
\r\n
<text class=
\"
uni-common-mb
\"
>component lifecycle</text>
\r\n
<component-lifecycle class=
\"
component-lifecycle
\"
@updateIsScroll=
\"
updateIsScroll
\"
/>
\r\n
<button class=
\"
uni-common-mt
\"
@click=
\"
scrollToBottom
\"
>scrollToBottom</button>
\r\n
</view>
\r\n
<!-- #ifdef APP -->
\r\n
</scroll-view>
\r\n
<!-- #endif -->
\r\n
</template>
\r\n\r\n
<script setup>
\r\n
import ComponentLifecycle from '@/components/CompositionAPILifecycle.uvue'
\r\n
import { state, setLifeCycleNum } from '@/store/index.uts'
\r\n\r\n
const isScrolled = ref(false)
\r\n\r\n
// 自动化测试
\r\n
const getLifeCycleNum = () : number => {
\r\n
return state.lifeCycleNum
\r\n
}
\r\n\r\n
// 自动化测试
\r\n
const pageSetlifeCycleNum = (num : number) => {
\r\n
setLifeCycleNum(num)
\r\n
}
\r\n\r\n
// 自动化测试
\r\n
const pullDownRefresh = () => {
\r\n
uni.startPullDownRefresh({
\r\n
success() {
\r\n
setTimeout(() => {
\r\n
uni.stopPullDownRefresh()
\r\n
}, 1000)
\r\n
},
\r\n
})
\r\n
}
\r\n\r\n
const scrollToBottom = () => {
\r\n
uni.pageScrollTo({
\r\n
scrollTop: 3000,
\r\n
})
\r\n
}
\r\n\r\n
const updateIsScroll = (val : boolean) => {
\r\n
isScrolled.value = val
\r\n
}
\r\n\r\n
// 自动化测试
\r\n
const getIsScrolled = () : boolean => {
\r\n
return isScrolled.value
\r\n
}
\r\n\r\n
defineExpose({
\r\n
getLifeCycleNum,
\r\n
pageSetlifeCycleNum,
\r\n
pullDownRefresh,
\r\n
scrollToBottom,
\r\n
getIsScrolled
\r\n
})
\r\n
</script>
\r\n\r\n
<style>
\r\n
.container {
\r\n
height: 1200px;
\r\n
}
\r\n
</style>
\n
```"
},
"composition_injection"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| provide() | 4.0 | x | 4.0 |
\n
| inject() | 4.0 | x | 4.0 |
\n
| hasInjectionContext() | 4.0 | x | x |"
,
"example"
:
""
},
"options_state"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| data | √ | x | 4.0 |
\n
| props | √ | x | 4.0 |
\n
| computed | √ | x | 4.0 |
\n
| methods | √ | x | 4.0 |
\n
| watch | √ | x | 4.0 |
\n
| emits | √ | x | 4.0 |
\n
| expose | x | x | 4.0 |"
,
"example"
:
"#### 状态选项 示例
\n
- [选项式 API 示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/state)"
},
"options_rendering"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| template | x | x | x |
\n
| render | √ | x | 4.0 |
\n
| compilerOptions | x | x | x |
\n
| slots | √ | x | 4.0 |"
,
"example"
:
"#### 渲染选项 示例
\n
- [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/rendering)"
},
"options_lifecycle"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| beforeCreate | 5.0 | √ | x | 4.0 |
\n
| created | 5.0 | √ | x | 4.0 |
\n
| beforeMount | 5.0 | √ | x | 4.0 |
\n
| mounted | 5.0 | √ | x | 4.0 |
\n
| beforeUpdate | 5.0 | √ | x | 4.0 |
\n
| updated | 5.0 | √ | x | 4.0 |
\n
| beforeUnmount | 5.0 | √ | x | 4.0 |
\n
| unmounted | 5.0 | √ | x | 4.0 |
\n
| errorCaptured | 5.0 | x | x | 4.0 |
\n
| renderTracked | 5.0 | x | x | 4.0 |
\n
| renderTriggered | 5.0 | x | x | 4.0 |
\n
| activated | 5.0 | 4.0 | x | 4.0 |
\n
| deactivated | 5.0 | 4.0 | x | 4.0 |
\n
| serverPrefetch | - | - | - | - |"
,
"example"
:
"#### 页面生命周期示例 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/page/page.uvue)
\n
```html
\n
<template>
\n
<!-- #ifdef APP -->
\n
<scroll-view style=
\"
flex: 1
\"
>
\n
<!-- #endif -->
\n
<view class=
\"
page container
\"
>
\n
<text>page lifecycle</text>
\n
<button class=
\"
uni-common-mt
\"
@click=
\"
scrollToBottom
\"
>scrollToBottom</button>
\n
</view>
\n
<!-- #ifdef APP -->
\n
</scroll-view>
\n
<!-- #endif -->
\n
</template>
\n\n
<script lang=
\"
uts
\"
>
\n
import { state, setLifeCycleNum } from '@/store/index.uts'
\n\n
export default {
\n
data() {
\n
return {
\n
isScrolled: false,
\n
}
\n
},
\n
onLoad(_ : OnLoadOptions) {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 100)
\n
},
\n
onShow() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
onReady() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
onPullDownRefresh() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
onPageScroll(_) {
\n
// 自动化测试
\n
this.isScrolled = true
\n
},
\n
onReachBottom() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
onBackPress(_ : OnBackPressOptions) : boolean | null {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum - 10)
\n
return null
\n
},
\n
onHide() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum - 10)
\n
},
\n
onUnload() {
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum - 100)
\n
},
\n
onResize(_){
\n
// 自动化测试
\n
setLifeCycleNum(state.lifeCycleNum + 10)
\n
},
\n
methods: {
\n
// 自动化测试
\n
getLifeCycleNum() : number {
\n
return state.lifeCycleNum
\n
},
\n
// 自动化测试
\n
setLifeCycleNum(num : number) {
\n
setLifeCycleNum(num)
\n
},
\n
// 自动化测试
\n
pullDownRefresh() {
\n
uni.startPullDownRefresh({
\n
success() {
\n
setTimeout(() => {
\n
uni.stopPullDownRefresh()
\n
}, 1000)
\n
},
\n
})
\n
},
\n
scrollToBottom() {
\n
uni.pageScrollTo({
\n
scrollTop: 2000,
\n
})
\n
},
\n
},
\n
}
\n
</script>
\n\n
<style>
\n
.container {
\n
height: 1200px;
\n
}
\n
</style>
\n\n
```
\n
#### 组件生命周期示例 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/lifecycle/component/component.uvue)
\n
```html
\n
<template>
\n
<view class=
\"
page
\"
>
\n
<text class=
\"
uni-common-mb
\"
>component lifecycle</text>
\n
<component-lifecycle class=
\"
component-lifecycle
\"
/>
\n
</view>
\n
</template>
\n\n
<script>
\n
import ComponentLifecycle from '@/components/OptionsAPILifecycle.uvue'
\n
import { state } from '@/store/index.uts'
\n
export default {
\n
components: { ComponentLifecycle },
\n
methods: {
\n
// 自动化测试
\n
getLifeCycleNum(): number {
\n
return state.lifeCycleNum
\n
},
\n
},
\n
}
\n
</script>
\n\n
```"
},
"options_composition"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| provide | 5.0 | 3.99 | x | 4.0 |
\n
| inject | 5.0 | 3.99 | x | 4.0 |
\n
| mixins | 5.0 | 3.99 | x | 4.0 |
\n
| extends | - | - | - | - |"
,
"example"
:
""
},
"options_misc"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| name | 5.0 | √ | x | 4.0 |
\n
| inheritAttrs | 5.0 | √ | x | 4.0 |
\n
| components | 5.0 | √ | x | 4.0 |
\n
| directives | - | - | - | - |"
,
"example"
:
""
},
"component_instance"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| $data | √ | x | 4.0 |
\n
| $props | √ | x | 4.0 |
\n
| $el | √ | x | 4.0 |
\n
| $options | √ | x | 4.0 |
\n
| $parent | √ | x | 4.0 |
\n
| $root | √ | x | 4.0 |
\n
| $slots | √ | x | 4.0 |
\n
| $refs | √ | x | 4.0 |
\n
| $attrs | √ | x | 4.0 |
\n
| $watch() | √ | x | 4.0 |
\n
| $emit | √ | x | 4.0 |
\n
| $forceUpdate | √ | x | 4.0 |
\n
| $nextTick | √ | x | 4.0 |
\n
| $callMethod | √ | x | 4.0 |"
,
"example"
:
"#### 组件实例 示例
\n
- [组件实例示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance)"
},
"directives"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| v-text | √ | x | 4.0 |
\n
| v-html | 3.99 | x | 4.0 |
\n
| v-show | √ | x | 4.0 |
\n
| v-if | √ | x | 4.0 |
\n
| v-else | √ | x | 4.0 |
\n
| v-else-if | √ | x | 4.0 |
\n
| v-for | √ | x | 4.0 |
\n
| v-on | √ | x | 4.0 |
\n
| v-bind | √ | x | 4.0 |
\n
| v-model | √ | x | 4.0 |
\n
| v-slot | √ | x | 4.0 |
\n
| v-pre | 3.99 | x | 4.0 |
\n
| v-once | 3.99 | x | 4.0 |
\n
| v-memo | 3.99 | x | 4.0 |
\n
| v-cloak | x | x | 4.0 |"
,
"example"
:
"#### 指令 示例
\n
- [指令示例](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive)"
},
"special_attributes"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| key | √ | x | 4.0 |
\n
| ref | √ | x | 4.0 |
\n
| is | 3.99 | x | 4.0 |"
,
"example"
:
""
},
"render_function"
:{
"compatibility"
:
"| | Android 系统版本 | Android | iOS | web |
\n
| :- | :- | :- | :- | :- |
\n
| h() | 5.0 | 3.99 | x | 4.0 |
\n
| mergeProps() | 5.0 | 4.0 | x | 4.0 |
\n
| cloneVNode() | 5.0 | 4.0 | x | 4.0 |
\n
| isVNode() | 5.0 | √ | x | 4.0 |
\n
| resolveComponent() | 5.0 | √ | x | 4.0 |
\n
| resolveDirective() | - | - | - | - |
\n
| withDirectives() | 5.0 | √ | x | 4.0 |
\n
| withModifiers() | 5.0 | √ | x | 4.0 |"
,
"example"
:
""
},
"single_file_component_script"
:{
"compatibility"
:
"| | Android | iOS | web |
\n
| :- | :- | :- | :- |
\n
| defineProps() | 4.0 | x | 4.0 |
\n
| defineEmits() | 4.0 | x | 4.0 |
\n
| defineModel() | 4.0 | x | x |
\n
| defineExpose() | 4.0 | x | 4.0 |
\n
| defineOptions() | 4.0 | x | x |
\n
| defineSlots() | 4.0 | x | 4.0 |
\n
| useSlots() | 4.0 | x | 4.0 |
\n
| useAttrs() | 4.0 | x | 4.0 |"
,
"example"
:
"####
\\
<script setup> 示例
\n
> [hello uvue](https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/composition/setup/setup.uvue)
\n
```html
\n
<template>
\n
<!-- #ifdef APP -->
\n
<scroll-view style=
\"
flex: 1
\"
>
\n
<!-- #endif -->
\n
<view class=
\"
page
\"
>
\n
<text class='uni-common-mt' id=
\"
str
\"
>str: {{ str }}</text>
\n
<text class='uni-common-mt' id=
\"
num
\"
>num: {{ num }}</text>
\n
<text class='uni-common-mt' id=
\"
bool
\"
>bool: {{ bool }}</text>
\n
<text class='uni-common-mt' id=
\"
count
\"
>count: {{count}}</text>
\n
<button class='uni-common-mt' id=
\"
increment-btn
\"
@click=
\"
increment
\"
>increment</button>
\n
<text class='uni-common-mt' id=
\"
obj-str
\"
>obj.str: {{ obj['str'] }}</text>
\n
<text class='uni-common-mt' id=
\"
obj-num
\"
>obj.num: {{ obj['num'] }}</text>
\n
<text class='uni-common-mt' id=
\"
obj-bool
\"
>obj.bool: {{ obj['bool'] }}</text>
\n
<button class='uni-common-mt' id=
\"
update-obj-btn
\"
@click=
\"
updateObj
\"
>update obj</button>
\n
<!-- #ifdef APP -->
\n
<RenderFunction :str='str' :count='count' :obj='obj' @compUpdateObj='compUpdateObj' :isShow='true' />
\n
<!-- #endif -->
\n
<Foo>
\n
<text class=
\"
uni-common-mt
\"
id=
\"
default-slot-in-foo
\"
>default slot in Foo</text>
\n
</Foo>
\n
</view>
\n
<!-- #ifdef APP -->
\n
</scroll-view>
\n
<!-- #endif -->
\n
</template>
\n\n
<script>
\n
// #ifdef APP
\n
import RenderFunction from './RenderFunction.uvue'
\n
// #endif
\n
import Foo from './Foo.uvue'
\n
export default {
\n
components: {
\n
// #ifdef APP
\n
RenderFunction,
\n
// #endif
\n
Foo
\n
},
\n
setup() {
\n
const count = ref(0)
\n
// 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}
\n
const increment = () => { count.value++ }
\n
const obj = reactive({
\n
str: 'obj default str',
\n
num: 0,
\n
bool: false,
\n
})
\n
const updateObj = () => {
\n
obj['str'] = 'obj new str'
\n
obj['num'] = 100
\n
obj['bool'] = true
\n
}
\n
const compUpdateObj = () => {
\n
obj['str'] = 'obj new str by comp update'
\n
obj['num'] = 200
\n
obj['bool'] = true
\n
}
\n
return {
\n
str: 'default str',
\n
num: 0,
\n
bool: false,
\n
count,
\n
increment,
\n
obj,
\n
updateObj,
\n
compUpdateObj
\n
}
\n
}
\n
}
\n
</script>
\n
```"
}}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
