Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
48ddf198
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3200
Star
106
Fork
813
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
48ddf198
编写于
11月 19, 2022
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
同上
上级
f91c7f76
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
10 addition
and
8 deletion
+10
-8
docs/tutorial/vue3-basics.md
docs/tutorial/vue3-basics.md
+10
-8
未找到文件。
docs/tutorial/vue3-basics.md
浏览文件 @
48ddf198
...
...
@@ -1178,7 +1178,10 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
### 监听事件
我们可以使用
`v-on`
指令 (通常缩写为 @ 符号,下文简称为:@事件) 来监听 DOM 事件,并在触发事件时执行一些
`JavaScript`
。
用法为
`v-on:click="methodName"`
或使用快捷方式
`@click="methodName"`
用法为
`v-on:click="methodName"`
或使用快捷方式
`@click="methodName"`
(uni-app里一般都使用@缩写方式)
指令的值,字符串里直接写js。比如下面的
`counter += 1`
就是一段js。
```
html
<template>
...
...
@@ -1201,7 +1204,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
### 事件处理方法
然而许多事件处理逻辑会更为复杂,所以直接把
`JavaScript`
代码写在
@事件中
是不可行的。因此@事件还可以接收一个需要调用的方法名称。
然而许多事件处理逻辑会更为复杂,所以直接把
`JavaScript`
代码写在
组件属性值里
是不可行的。因此@事件还可以接收一个需要调用的方法名称。
示例:
...
...
@@ -1356,15 +1359,13 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
**使用 v-on 或 @ 有几个好处**
1.
扫一眼
`
HTML
`
模板便能轻松定位在
`JavaScript`
代码里对应的方法。
1.
扫一眼
`
template
`
模板便能轻松定位在
`JavaScript`
代码里对应的方法。
2.
因为你无须在
`JavaScript`
里手动绑定事件,你的
`ViewModel`
代码可以是非常纯粹的逻辑,和
`DOM`
完全解耦,更易于测试。
3.
当一个
`ViewModel`
被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。
### 事件映射表
```
js
...
...
@@ -1405,6 +1406,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
> v-model 会忽略所有表单元素的 `value`、`checked`、`selected` attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
在下面的示例中,输入框通过
`v-model`
绑定了
`message`
,用户在输入框里输入内容时,这个内容会实施赋值给
`message`
。当然在代码里为
`message`
赋值也会实时同步到界面上input里。这就是双向绑定。
```
html
<template>
...
...
@@ -1425,6 +1427,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
```
### uni-app表单组件
建议开发过程中直接使用
`uni-app`
:
[
表单组件
](
https://uniapp.dcloud.io/component/button
)
。
...
...
@@ -1544,7 +1547,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
```
我们想根据 author 是否已经有一些书来显示不同的消息
我们想根据 author 是否已经有一些书来显示不同的消息
,可以使用模板内的表达式
```
html
...
...
@@ -1559,8 +1562,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
所以,对于任何包含响应式数据的复杂逻辑,你都应该使用
**计算属性**
。
**例子**
**使用计算属性的例子**
```
html
<template>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录