Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
风雨兼程620
unidocs-zh
提交
6fc4ba7d
unidocs-zh
项目概览
风雨兼程620
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6fc4ba7d
编写于
8月 19, 2023
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs(vue3): basics and components
上级
da6a545d
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
28 addition
and
12 deletion
+28
-12
docs/tutorial/vue3-basics.md
docs/tutorial/vue3-basics.md
+12
-8
docs/tutorial/vue3-components.md
docs/tutorial/vue3-components.md
+16
-4
未找到文件。
docs/tutorial/vue3-basics.md
浏览文件 @
6fc4ba7d
...
...
@@ -484,7 +484,12 @@ v-on 指令,它用于监听 `DOM` 事件。v-on缩写为‘ @ ’,下文简
<!-- 缩写 -->
<view
@
click=
"doSomething"
>
点击
</view>
```
**注意:`uni-app x` 中函数 `event` 参数需要显式指定类型**
```
html
<view
@
click=
"(e: any) => foo(e)"
>
event must has type
</view>
<view
@
click=
"foo($event as MouseEvent)"
>
event must has type
</view>
```
#### v-once
...
...
@@ -503,7 +508,7 @@ v-on 指令,它用于监听 `DOM` 事件。v-on缩写为‘ @ ’,下文简
<text>
{{msg}}
</text>
</view>
```
**注意:`uni-app x` 暂不支持**
#### v-html
...
...
@@ -533,7 +538,7 @@ v-on 指令,它用于监听 `DOM` 事件。v-on缩写为‘ @ ’,下文简
</script>
```
**注意:`uni-app x` 暂不支持**
## Data 选项
...
...
@@ -1300,7 +1305,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
<template>
<view>
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button
@
click=
"one($event)
,
two($event)"
>
<button
@
click=
"one($event)
;
two($event)"
>
Submit
</button>
</view>
...
...
@@ -1346,8 +1351,8 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
**注意**
-
为兼容各端,事件需使用
**@**
的方式绑定,请勿使用小程序端的
`bind`
和
`catch`
进行事件绑定;也不能在 JS 中使用
`event.preventDefault()`
和
`event.stopPropagation()`
方法
;
-
`uni-app x`
暂不支持。
-
为兼容各端,事件需使用
**@**
的方式绑定,请勿使用小程序端的
`bind`
和
`catch`
进行事件绑定;也不能在 JS 中使用
`event.preventDefault()`
和
`event.stopPropagation()`
方法
。
-
若需要禁止蒙版下的页面滚动,可使用
`@touchmove.stop.prevent="moveHandle"`
,
`moveHandle`
可以用来处理
`touchmove`
的事件,也可以是一个空函数。
```
html
...
...
@@ -1856,7 +1861,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
}
</script>
```
**注意:`uni-app x` 暂不支持**
#### 监听对象中单个属性
...
...
@@ -1882,13 +1887,12 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
}
```
**注意:uni-app x 暂不支持**
### 计算属性 vs 侦听属性
`Vue`
提供了一种更通用的方式来观察和响应
`Vue`
实例上的数据变动:
**侦听属性**
。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用
`watch`
。然而,通常更好的做法是使用计算属性而不是命令式的
`watch`
回调。
```
js
export
default
{
data
()
{
...
...
docs/tutorial/vue3-components.md
浏览文件 @
6fc4ba7d
...
...
@@ -204,9 +204,9 @@
|选项 |类型 |说明 |
|-- |-- |-- |
|type |
`String`
、
`Number`
、
`Boolean`
、
`Array`
、
`Object`
、
`Date`
、
`Function`
、
`Symbol`
,任何自定义构造函数、或上述内容组成的数组 |会检查一个
`prop`
是否是给定的类型,否则抛出警告 |
|default |any |为该
`prop`
指定一个默认值。如果该
`prop`
没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 |
|required |Boolean |定义该
`prop`
是否是必填项|
|validator |Function |自定义验证函数会将该
`prop`
的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个
`false`
的值 (也就是验证失败),一个控制台警告将会被抛出|
|default |any |为该
`prop`
指定一个默认值。如果该
`prop`
没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
`uni-app x`
中 必填
|
|required |Boolean |定义该
`prop`
是否是必填项
,
`uni-app x`
暂不支持
|
|validator |Function |自定义验证函数会将该
`prop`
的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个
`false`
的值 (也就是验证失败),一个控制台警告将会被抛出
,
`uni-app x`
暂不支持
|
##### 示例:
...
...
@@ -1221,7 +1221,7 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C
Save
</button>
```
**注意:`uni-app x` 暂不支持**
### 具名插槽
...
...
@@ -1431,6 +1431,17 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C
在这个例子中,我们选择将包含所有插槽
`prop`
的对象命名为
`slotProps`
,但你也可以使用任意你喜欢的名字。
**注意:**
`uni-app x`
中需要为作用域插槽指定类型,以
`todo-list`
组件为例,需要补充如下代码:
```
js
import
{
SlotsType
}
from
'
vue
'
export
default
{
slots
:
Object
as
SlotsType
<
{
default
:
{
item
:
string
}
}
>
}
```
#### 独占默认插槽的缩写语法
...
...
@@ -1521,6 +1532,7 @@ function (slotProps) {
</todo-list>
```
**注意:`uni-app x` 暂不支持**
## 小程序不支持列表
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录