提交 6fc4ba7d 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

docs(vue3): basics and components

上级 da6a545d
......@@ -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() {
......
......@@ -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.
先完成此消息的编辑!
想要评论请 注册