Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Velpro187
uni-app
提交
6e7d49d2
U
uni-app
项目概览
Velpro187
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6e7d49d2
编写于
3月 22, 2021
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: component ref
上级
20cb9915
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
73 addition
and
73 deletion
+73
-73
docs/component/README.md
docs/component/README.md
+72
-72
docs/vue-api.md
docs/vue-api.md
+1
-1
未找到文件。
docs/component/README.md
浏览文件 @
6e7d49d2
### 组件使用的入门教程
-
组件是视图层的基本组成单元。
-
组件是一个单独且可复用的功能模块的封装。
-
组件是视图层的基本组成单元。
-
组件是一个单独且可复用的功能模块的封装。
每个组件,包括如下几个部分:以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
...
...
@@ -16,18 +16,18 @@
content
</component-name>
```
下面是一个基本组件的实例,在一个vue页面的根
`<view>`
组件下插入一个
`<button>`
组件。给这个组件的内容区写上文字“按钮”,同时给这个组件设置了一个属性“size”,并且“size”属性的值设为了“mini”。
下面是一个基本组件的实例,在一个vue页面的根
`<view>`
组件下插入一个
`<button>`
组件。给这个组件的内容区写上文字“按钮”,同时给这个组件设置了一个属性“size”,并且“size”属性的值设为了“mini”。
> 注:按照[vue单文件组件规范](https://cn.vuejs.org/v2/guide/single-file-components.html),每个vue文件的根节点必须为 `<template>`,且这个 `<template>` 下只能且必须有一个根 `<view>` 组件。
```
html
<template>
<view>
<button
size=
"mini"
>
按钮
</button>
</view>
</template>
```
```
html
<template>
<view>
<button
size=
"mini"
>
按钮
</button>
</view>
</template>
```
通过了解
[
button组件
](
/component/button
)
的文档,我们知道上述代码将在页面中绘制一个按钮,按钮显示的文字是“按钮”,按钮的大小是小尺寸的。
...
...
@@ -48,10 +48,10 @@
下面的例子演示了组件的属性设置bool值和数字的例子。注意
`false`
作为一个js变量,在组件的属性中使用时,属性前面需增加
`:`
冒号前缀,属性值仍使用引号包裹,但引号里不是字符串,而是js。
```
html
<template>
<view>
<button
size=
"mini"
:disabled=
"false"
hover-start-time=
20
>
按钮
</button>
</view>
<template>
<view>
<button
size=
"mini"
:disabled=
"false"
hover-start-time=
20
>
按钮
</button>
</view>
</template>
```
...
...
@@ -62,7 +62,7 @@
|属性名|类型|描述|注解|
|:-|:-|:-|:-|
|id|String|组件的唯一标示|保持整个页面唯一|
|ref|String|vue中组件的唯一标示|
在vue的js中可通过this.$refs.xxx获取到组件对象
|
|ref|String|vue中组件的唯一标示|
用来给子组件注册引用信息,详见
[
Vue 文档
](
/vue-api?id=%e7%89%b9%e6%ae%8a%e5%b1%9e%e6%80%a7
)
|
|class|String|组件的样式类|在对应的 css 中定义的样式类|
|style|String|组件的内联样式|可以动态设置的内联样式|
|hidden|Boolean|组件是否隐藏|所有组件默认是显示的|
...
...
@@ -79,20 +79,20 @@
下面的button组件示例,等价于上一个的示例。只不过静态内容改成动态js。
```
html
<template>
<view>
<button
size=
"mini"
:disabled=
"buttondisble"
hover-start-time=
20
>
{{buttonText}}
</button>
</view>
<template>
<view>
<button
size=
"mini"
:disabled=
"buttondisble"
hover-start-time=
20
>
{{buttonText}}
</button>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
<script>
export
default
{
data
()
{
return
{
"
buttonText
"
:
"
按钮
"
,
"
buttondisble
"
:
false
}
}
}
"
buttondisble
"
:
false
}
}
}
</script>
```
...
...
@@ -108,24 +108,24 @@
-
click是button组件的点击事件,在用户点击这个button时触发
-
click指向了methods中定义的goto方法,并且传递了一个参数'/pages/about/about'
```
html
<template>
<view>
<button
size=
"mini"
@
click=
"goto('/pages/about/about')"
>
按钮
</button>
</view>
```
html
<template>
<view>
<button
size=
"mini"
@
click=
"goto('/pages/about/about')"
>
按钮
</button>
</view>
</template>
<script>
export
default
{
methods
:
{
goto
(
url
)
{
console
.
log
(
"
传入的参数是:
"
+
url
)
}
}
}
</script>
<script>
export
default
{
methods
:
{
goto
(
url
)
{
console
.
log
(
"
传入的参数是:
"
+
url
)
}
}
}
</script>
```
### 基础组件
...
...
@@ -144,15 +144,15 @@ uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签
开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。
`uni-app`
基础组件规范,与小程序规范相近。如果了解小程序开发的话,uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成
`@change="eventName"`
```
html
<picker
mode=
"date"
:value=
"date"
start=
"2015-09-01"
end=
"2020-09-01"
@
change=
"bindDateChange"
>
<view
class=
"picker"
>
当前选择: {{date}}
</view>
</picker>
```
`uni-app`
基础组件规范,与小程序规范相近。如果了解小程序开发的话,uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成
`@change="eventName"`
```
html
<picker
mode=
"date"
:value=
"date"
start=
"2015-09-01"
end=
"2020-09-01"
@
change=
"bindDateChange"
>
<view
class=
"picker"
>
当前选择: {{date}}
</view>
</picker>
```
#### 基础组件列表
...
...
@@ -258,8 +258,8 @@ uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签
**各平台专有组件**
在小程序平台和nvue平台,还有一些专有组件,比如open-data,详见左侧导航
### 扩展组件的意义
### 扩展组件的意义
虽然所有的业务需求都可以通过基础组件满足,但仅有基础组件是低效的,实际开发中会有很多封装的组件。
...
...
@@ -277,19 +277,19 @@ uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签
```
封装扩展组件的优势:
-
可以将组件进行任意次数的复用。
-
合理的划分组件,有助于提高应用性能。
-
代码更加方便组织和管理,并且扩展性也更强,便于多人协同开发。
-
可以将组件进行任意次数的复用。
-
合理的划分组件,有助于提高应用性能。
-
代码更加方便组织和管理,并且扩展性也更强,便于多人协同开发。
-
组件化开发能大幅度提高应用开发效率、测试性、复用性等。
### 组件的类别
### 组件的类别
uni-app支持的组件分为vue组件和小程序自定义组件。
如果你还不了解这两种组件,可以参阅各自的文档
-
vue组件:
[
文档
](
/vue-componets
)
-
小程序自定义组件:其规范不是vue规范,而是小程序规范,
[
文档
](
/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81
)
-
小程序自定义组件:其规范不是vue规范,而是小程序规范,
[
文档
](
/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81
)
日常开发来讲,推荐使用vue组件。uni-app支持小程序组件只要是为了兼容更多生态资源。
...
...
@@ -347,18 +347,18 @@ uni-app支持的组件分为vue组件和小程序自定义组件。
2.
components里注册组件
3.
template中使用组件
```
html
<template>
<view>
<uni-rate
text=
"1"
></uni-rate>
<!-- 3.使用组件 -->
</view>
</template>
<script>
import
uniRate
from
'
@/components/uni-rate/uni-rate.vue
'
;
//1.导入组件
export
default
{
components
:{
uniRate
}
//2.注册组件
}
</script>
```
html
<template>
<view>
<uni-rate
text=
"1"
></uni-rate>
<!-- 3.使用组件 -->
</view>
</template>
<script>
import
uniRate
from
'
@/components/uni-rate/uni-rate.vue
'
;
//1.导入组件
export
default
{
components
:{
uniRate
}
//2.注册组件
}
</script>
```
### uni_module规范
...
...
docs/vue-api.md
浏览文件 @
6e7d49d2
...
...
@@ -142,7 +142,7 @@
|特殊属性 |描述 |H5 |App端|微信小程序 |说明 |
| -- | -- | -- |-- |-- | -- |
|key | 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes
[
详情
](
https://cn.vuejs.org/v2/api/#key
)
|√ | √ | √ |App端旧版不支持表达式 |
|ref | ref 被用来给元素或子组件注册引用信息
[
详情
](
https://cn.vuejs.org/v2/api/#ref
)
|√ | √ | √ |
|
|ref | ref 被用来给元素或子组件注册引用信息
[
详情
](
https://cn.vuejs.org/v2/api/#ref
)
|√ | √ | √ |
非 H5 平台只能获取 vue 组件实例不能获取到内置组件实例
|
|is | 用于动态组件且基于 DOM 内模板的限制来工作
[
详情
](
https://cn.vuejs.org/v2/api/#is
)
|√ | √ | x | - |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录