Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
48ddf198
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录