Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
小浣熊撸代码
uni-app
提交
bfc2525c
U
uni-app
项目概览
小浣熊撸代码
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
bfc2525c
编写于
4月 14, 2021
作者:
study夏羽
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
新增vue组件文档
上级
49d3b96a
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
171 addition
and
46 deletion
+171
-46
docs/component/_sidebar.md
docs/component/_sidebar.md
+2
-1
docs/component/vue-component.md
docs/component/vue-component.md
+129
-0
docs/vue-basics.md
docs/vue-basics.md
+40
-45
未找到文件。
docs/component/_sidebar.md
浏览文件 @
bfc2525c
*
[
组件概述
](
component/
)
*
[
组件概述
](
component/
)
*
[
vue组件
](
component/vue-component.md
)
*
视图容器
*
[
view
](
component/view.md
)
*
[
scroll-view
](
component/scroll-view.md
)
...
...
docs/component/vue-component.md
0 → 100644
浏览文件 @
bfc2525c
### component
渲染一个“元组件”为动态组件。依
`is`
的值,来决定哪个组件被渲染。
[
详见
](
https://cn.vuejs.org/v2/api/#component
)
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|√ |√ |x |x |x |x |x |x |x |
### template
`uni-app`
支持在
`template`
模板中嵌套
`<template/>`
和
`<block/>`
,用来进行
[
列表渲染
](
https://uniapp.dcloud.io/vue-basics?id=listrendering
)
和
[
条件渲染
](
https://uniapp.dcloud.io/vue-basics?id=condition
)
。
`<template/>`
和
`<block/>`
并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
`<block/>`
在不同的平台表现存在一定差异,推荐统一使用
`<template/>`
。
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|√ |√ |√ |√ |√ |√ |√ |√ |√ |
**代码示例**
```
html
<template>
<view>
<template
v-if=
"test"
>
<view>
test 为 true 时显示
</view>
</template>
<template
v-else
>
<view>
test 为 false 时显示
</view>
</template>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
test
:
true
}
}
}
```
```
html
<template>
<view>
<block
v-for=
"(item,index) in list"
:key=
"index"
>
<view>
{{item}} - {{index}}
</view>
</block>
</view>
</template>
```
### transition
`<transition>`
元素作为单个元素/组件的过渡效果。
`<transition>`
只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。
[
详见
](
https://cn.vuejs.org/v2/api/#transition
)
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|x |√ |x |x |x |x |x |x |x |
### transition-group
`<transition-group>`
元素作为多个元素/组件的过渡效果。
`<transition-group>`
渲染一个真实的 DOM 元素。默认渲染
`<span>`
,可以通过 tag attribute 配置哪个元素应该被渲染。
[
详见
](
https://cn.vuejs.org/v2/api/#transition-group
)
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|x |√ |x |x |x |x |x |x |x |
### keep-alive
`<keep-alive>`
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和
`<transition>`
相似,
`<keep-alive>`
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
[
详见
](
https://cn.vuejs.org/v2/api/#keep-alive
)
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|x |√ |x |x |x |x |x |x |x |
### slot
`<slot>`
元素作为组件模板之中的内容分发插槽。
`<slot>`
元素自身将被替换。
[
插槽
](
https://uniapp.dcloud.io/vue-components?id=%e6%8f%92%e6%a7%bd
)
。
详细用法,请参考下面教程的链接。
[
通过插槽分发内容
](
https://cn.vuejs.org/v2/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9
)
**平台差异说明**
|App|H5 |微信小程序 |支付宝小程序 |百度小程序 |字节跳动小程序 |QQ小程序 |快应用 |360小程序 |
|:-:|:-:|:-: |:-: |:-: |:-: |:-: |:-: |:-: |
|√ |√ |√ |√ |√ |√ |√ |√ |√ |
docs/vue-basics.md
浏览文件 @
bfc2525c
...
...
@@ -272,22 +272,22 @@ vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要
```
html
<template>
<view>
<view>
{{ number + 1 }}
</view>
<view>
{{ ok ? 'YES' : 'NO' }}
</view>
<!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
<view>
{{ message.split('').reverse().join('') }}
</view>
<view>
{{ number + 1 }}
</view>
<view>
{{ ok ? 'YES' : 'NO' }}
</view>
<!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
<view>
{{ message.split('').reverse().join('') }}
</view>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
number
:
1
,
ok
:
true
,
message
:
'
Hello Vue!
'
}
}
export
default
{
data
()
{
return
{
number
:
1
,
ok
:
true
,
message
:
'
Hello Vue!
'
}
}
}
</script>
```
...
...
@@ -295,27 +295,27 @@ vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要
```
html
<template>
<view>
<view
v-for=
"(item,index) in 10"
>
<!-- 通过%运算符求余数,实现隔行换色的效果 -->
<view
:class=
"'list-' + index%2"
>
{{index%2}}
</view>
</view>
<view>
<view
v-for=
"(item,index) in 10"
>
<!-- 通过%运算符求余数,实现隔行换色的效果 -->
<view
:class=
"'list-' + index%2"
>
{{index%2}}
</view>
</view>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
}
}
export
default
{
data
()
{
return
{
}
}
}
</script>
<style>
.list-0
{
background-color
:
#aaaaff
;
}
.list-1
{
background-color
:
#ffaa7f
;
}
.list-0
{
background-color
:
#aaaaff
;
}
.list-1
{
background-color
:
#ffaa7f
;
}
</style>
```
...
...
@@ -325,22 +325,22 @@ vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要
```
html
<template>
<view>
<!-- 这是语句,不是表达式 -->
<view>
{{ var a = 1 }}
</view>
<!-- 流控制也不会生效,请使用三元表达式 -->
<view>
{{ if (ok) { return message } }}
</view>
</view>
<view>
<!-- 这是语句,不是表达式 -->
<view>
{{ var a = 1 }}
</view>
<!-- 流控制也不会生效,请使用三元表达式 -->
<view>
{{ if (ok) { return message } }}
</view>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
ok
:
true
,
message
:
'
Hello Vue!
'
}
}
export
default
{
data
()
{
return
{
ok
:
true
,
message
:
'
Hello Vue!
'
}
}
}
</script>
```
...
...
@@ -375,11 +375,6 @@ vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要
### 指令
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录