Skip to content

U
uni-app

m0_68066342 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 0
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 2e9f7cf9 编写于 作者: study夏羽's avatar study夏羽
浏览文件
操作

vue-update

上级 af10b72f
隐藏空白更改
内联 并排
Showing with 85 addition and 94 deletion
docs/component/README.md
浏览文件 @ 2e9f7cf9
......@@ -52,7 +52,7 @@ uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签
|style|String|组件的内联样式|可以动态设置的内联样式|
|hidden|Boolean|组件是否隐藏|所有组件默认是显示的|
|data-*|Any|自定义属性|组件上触发的事件时，会发送给事件处理函数|
|@\*|EventHandler|组件的事件|详见各组件详细文档，事件绑定参考 [事件处理器](/use?id=事件处理器)|
|@\*|EventHandler|组件的事件|详见各组件详细文档，事件绑定参考 [事件处理器](/vue-basics?id=事件处理器)|
### 特殊属性
......
docs/component/input.md
浏览文件 @ 2e9f7cf9
......@@ -33,7 +33,7 @@
**Tips**
- `input` 事件处理函数可以直接 return 一个字符串，将替换输入框的内容。仅微信小程序支持。
- 如果遇到 value 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 如果遇到 value 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- `input` 组件上有默认的 `min-height` 样式，如果 `min-height` 的值大于 `height` 的值那么 `height` 样式无效。
**type 有效值**
......@@ -113,7 +113,7 @@ App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adju
- adjustResize模式在Android App上，弹起键盘和收回键盘时，因为要重设webview窗体高度，可能会在个别安卓机型闪现灰屏或漏出下层页面内容。
- 小程序端在 input 聚焦期间，避免使用 css 动画。
- H5平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 如果遇到 focus 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- 如需禁止点击其他位置收起键盘的默认行为，可以监听`touch`事件并使用`prevent`修饰符（仅支持App-v3、H5，其他平台可以通过设置`focus`来使输入框重新获取焦点），例如在确认按钮上使用：```@touchend.prevent="onTap"```
......
docs/component/movable-view.md
浏览文件 @ 2e9f7cf9
......@@ -75,7 +75,7 @@
**Tips**
- movable-view必须在`<movable-area/>`组件中，并且必须是直接子节点，否则不能移动。
- 如果遇到x、y、scale属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 如果遇到x、y、scale属性设置不生效的问题参考：[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- 除了H5端和app-nvue端，其他平台不支持内嵌video、map等原生组件。更新：微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用
**示例**[查看演示](https://hellouniapp.dcloud.net.cn/pages/component/movable-view/movable-view)
......
docs/component/scroll-view.md
浏览文件 @ 2e9f7cf9
......@@ -171,5 +171,5 @@ export default {
- scroll-into-view 的优先级高于 scroll-top。
- scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
- 若要使用下拉刷新，建议使用页面的滚动，而不是 scroll-view 。插件市场有前端模拟的基于scroll-view的下拉刷新，但性能不佳。如必需使用前端下拉刷新，推荐使用基于wxs的下拉刷新，性能会比基于js监听方式更高。
- 如果遇到scroll-top、scroll-left属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 如果遇到scroll-top、scroll-left属性设置不生效的问题参考：[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- scroll-view的滚动条设置，可通过css的-webkit-scrollbar自定义，包括隐藏滚动条。（app-nvue无此css）
docs/component/swiper.md
浏览文件 @ 2e9f7cf9
......@@ -50,7 +50,7 @@ change 事件返回 detail 中包含一个 source 字段，表示导致变更的
- 使用竖向滚动时，需要给 ``<scroll-view>`` 一个固定高度，通过 css 设置 height。
- 注意：其中只可放置 ``<swiper-item>`` 组件，否则会导致未定义的行为。
- 如果遇到current、current-item-id属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 如果遇到current、current-item-id属性设置不生效的问题参考：[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- banner图的切换效果和指示器的样式，有多种风格可自定义，可在[uni-app插件市场](https://ext.dcloud.net.cn/search?q=%E8%BD%AE%E6%92%AD)搜索
- swiper在App的vue中、百度支付宝头条QQ小程序中，不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
- 同时监听 change transition，开始滑动时触发transition, 放开手后，在ios平台触发顺序为 transition... change，Android/微信小程序/支付宝为 transition... change transition...
......
docs/component/textarea.md
浏览文件 @ 2e9f7cf9
......@@ -81,11 +81,11 @@ export default {
**Tips**
- textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 @submit。
- 如果遇到 value 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 如果遇到 value 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- 微信小程序、百度小程序、字节跳动小程序中，textarea是原生组件，层级高于前端组件，请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。覆盖textarea需要使用cover-view。[详见](/component/native-component)
- 小程序端 css 动画对 textarea 组件无效。
- H5 平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 如果遇到 focus 属性设置不生效的问题参考：[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- 软键盘的弹出和收起逻辑，详见[input的文档](/component/input?id=app%E5%B9%B3%E5%8F%B0ios%E7%AB%AF%E8%BD%AF%E9%94%AE%E7%9B%98%E4%B8%8A%E6%96%B9%E6%A8%AA%E6%9D%A1%E5%8E%BB%E9%99%A4%E6%96%B9%E6%A1%88)
- 如需禁止点击其他位置收起键盘的默认行为，可以监听`touch`事件并使用`prevent`修饰符（仅支持App-v3、H5，其他平台可以通过设置`focus`来使输入框重新获取焦点），例如在确认按钮上使用：```@touchend.prevent="onTap"```
......
docs/vue-api.md
浏览文件 @ 2e9f7cf9
......@@ -11,7 +11,7 @@
|Vue.config.ignoredElements | 须使 Vue 忽略在 Vue 之外的自定义元素 [详情](https://cn.vuejs.org/v2/api/#ignoredElements) |√ | √ | √ |强烈不推荐，会覆盖uni-app框架配置的内置组件 |
|Vue.config.keyCodes | 给 v-on 自定义键位别名 [详情](https://cn.vuejs.org/v2/api/#keyCodes) |√ | x | x | |
|Vue.config.performance | 设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪 [详情](https://cn.vuejs.org/v2/api/#performance) |√ |x | x |只在Web环境下支持 |
|Vue.config.productionTip | 设置为 false 以阻止 vue 在启动时生成生产提示 [详情](https://cn.vuejs.org/v2/api/#productionTip) |√ | √ | √ | |
|Vue.config.productionTip | 设置为 false 以阻止 vue 在启动时生成生产提示 [详情](https://cn.vuejs.org/v2/api/#productionTip) |√ | √ | √ | - |
......@@ -60,7 +60,7 @@
|functional | 使组件无状态 (没有 data) 和无实例 (没有 this 上下文) [详情](https://cn.vuejs.org/v2/api/#functional) |√ | x | x | |
|model | 允许一个自定义组件在使用 v-model 时定制 prop 和 event [详情](https://cn.vuejs.org/v2/api/#model) |√ |√ | x | |
|inheritAttrs | inheritAttrs属性默认值为true，表示允许组件的根节点继承$attrs包含的属性 [详情](https://cn.vuejs.org/v2/api/#inheritAttrs) |√ |√ | x | |
|comments | 当设为 true 时，将会保留且渲染模板中的 HTML 注释 [详情](https://cn.vuejs.org/v2/api/#comments) |√ | x | x | |
|comments | 当设为 true 时，将会保留且渲染模板中的 HTML 注释 [详情](https://cn.vuejs.org/v2/api/#comments) |√ | x | x | - |
......@@ -85,7 +85,7 @@
|vm.$refs | 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例[详情](https://cn.vuejs.org/v2/api/#vm-refs) |√ | √ | √ |非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text） |
|vm.$isServer | 当前 Vue 实例是否运行于服务器 [详情](https://cn.vuejs.org/v2/api/#vm-isServer) |√ | √ | x |App端V3总是返回false |
|vm.$attrs | 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 [详情](https://cn.vuejs.org/v2/api/#vm-attrs) |√ | √ | x | |
|vm.$listeners | 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器 [详情](https://cn.vuejs.org/v2/api/#vm-listeners) |√ | √ | x | |
|vm.$listeners | 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器 [详情](https://cn.vuejs.org/v2/api/#vm-listeners) |√ | √ | x | - |
......@@ -107,7 +107,7 @@
|vm.$mount() | 手动地挂载一个未挂载的实例 [详情](https://cn.vuejs.org/v2/api/#vm-mount) |√ | x | x | |
|vm.$forceUpdate() | 迫使 Vue 实例重新渲染 [详情](https://cn.vuejs.org/v2/api/#vm-forceUpdate) |√ | √ | √ | |
|vm.$nextTick() | 将回调延迟到下次 DOM 更新循环之后执行 [详情](https://cn.vuejs.org/v2/api/#vm-nextTick) |√ | √ | √ | |
|vm.$destroy() | 完全销毁一个实例 [详情](https://cn.vuejs.org/v2/api/#vm-destroy) |√ | √ | √ | |
|vm.$destroy() | 完全销毁一个实例 [详情](https://cn.vuejs.org/v2/api/#vm-destroy) |√ | √ | √ | - |
......@@ -131,7 +131,7 @@
|v-model| 在表单控件或者组件上创建双向绑定 [详情](https://cn.vuejs.org/v2/api/#v-model) |√ | √ | √ | |
|v-pre | 跳过这个元素和它的子元素的编译过程 [详情](https://cn.vuejs.org/v2/api/#v-pre) |√ | √ | x | |
|v-cloak| 这个指令保持在元素上直到关联实例结束编译 [详情](https://cn.vuejs.org/v2/api/#v-cloak) |√ | x | x | |
|v-once | 只渲染元素和组件一次 [详情](https://cn.vuejs.org/v2/api/#v-once) |√ | √ | x | |
|v-once | 只渲染元素和组件一次 [详情](https://cn.vuejs.org/v2/api/#v-once) |√ | √ | x | - |
......@@ -143,7 +143,7 @@
| -- | -- | -- |-- |-- | -- |
|key | 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes [详情](https://cn.vuejs.org/v2/api/#key) |√ | √ | √ |App端旧版不支持表达式 |
|ref | ref 被用来给元素或子组件注册引用信息 [详情](https://cn.vuejs.org/v2/api/#ref) |√ | √ | √ | |
|is | 用于动态组件且基于 DOM 内模板的限制来工作 [详情](https://cn.vuejs.org/v2/api/#is) |√ | √ | x | |
|is | 用于动态组件且基于 DOM 内模板的限制来工作 [详情](https://cn.vuejs.org/v2/api/#is) |√ | √ | x | - |
......@@ -159,7 +159,7 @@
|transition | 作为单个元素/组件的过渡效果 [详情](https://cn.vuejs.org/v2/api/#transition) |√ | x | x | |
|transition-group | 作为多个元素/组件的过渡效果 [详情](https://cn.vuejs.org/v2/api/#transition-group) |√ | x | x | |
|keep-alive | 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 [详情](https://cn.vuejs.org/v2/api/#keep-alive) |√ |x | x | |
|slot | 作为组件模板之中的内容分发插槽 [详情](https://cn.vuejs.org/v2/api/#slot) |√ | √ | √ | |
|slot | 作为组件模板之中的内容分发插槽 [详情](https://cn.vuejs.org/v2/api/#slot) |√ | √ | √ | - |
......@@ -228,7 +228,7 @@ uni-app 内置了 [Vuex](https://vuex.vuejs.org/zh/) ，在app里的使用，可
```
### 4. 组件属性设置不生效解决办法
### 4. 组件属性设置不生效解决办法@componentsolutions
当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。
......
docs/vue-basics.md
浏览文件 @ 2e9f7cf9
......@@ -13,7 +13,7 @@ Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，只关注视图层，易于上手。所有东西都是响应式的。
我们提供了免费视频教程，在看此文档同时建议结合[**vue入门视频教程**](https://learning.dcloud.io/#/?vid=1)，帮助你更加快速掌握。
我们提供了免费视频教程，在看此文档同时建议结合 [vue入门视频教程](https://learning.dcloud.io/#/?vid=1) ，帮助你更加快速掌握。
......@@ -24,9 +24,9 @@ Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数
## vue相比传统js的开发优势
在传统开发中，用原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
在传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。
vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。
vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。
......@@ -80,12 +80,9 @@ vue是单页面应用，使页面局部刷新，不用每次跳转页面都要
</template>
<script>
export default {
}
</script>
<style>
</style>
```
......@@ -164,7 +161,7 @@ vue是单页面应用，使页面局部刷新，不用每次跳转页面都要
### js的变化
- 以前的dom操作，如果你想改变某个dom元素的显示内容，比如一个view的显示文字：给view设id，然后js里通过选择器获取dom元素，进一步通过js进行赋值操作，修改dom元素的属性或值。
- 以前的 DOM 操作，如果你想改变某个 DOM 元素的显示内容，比如一个view的显示文字：给view设id，然后js里通过选择器获取 DOM 元素，进一步通过js进行赋值操作，修改 DOM 元素的属性或值。
```html
<html>
......@@ -186,9 +183,9 @@ vue是单页面应用，使页面局部刷新，不用每次跳转页面都要
```
- 现在的做法，是vue的绑定模式，给这个dom元素绑定一个js变量，在script中修改js变量的值，dom会自动变化，页面会自动更新渲染。
- 现在的做法，是vue的绑定模式，给这个 DOM 元素绑定一个js变量，在script中修改js变量的值，DOM 会自动变化，页面会自动更新渲染。
- 前端改用 [MVVM](https://baike.baidu.com/item/MVVM/96310?fr=aladdin) (Model-View-ViewModel的简写)模式，简单来说，Model:代表数据模型，View:只专注视图UI处理，ViewModel:只处理业务和数据。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷，大幅减少代码行数，同时差量渲染性能更好。
- `uni-app` 使用vue的数据绑定方式解决js和dom界面交互的问题。
- `uni-app` 使用vue的数据绑定方式解决js和 DOM 界面交互的问题。
```html
......@@ -221,10 +218,6 @@ vue是单页面应用，使页面局部刷新，不用每次跳转页面都要
## 模板语法
......@@ -286,7 +279,7 @@ vue是单页面应用，使页面局部刷新，不用每次跳转页面都要
<button v-bind:disabled="isButtonDisabled">Button</button>
```
如果 `isButtonDisabled` 的值是 `null` 、`undefined` 或 `false` ，则 disabled 甚至不会被包含在渲染出来的 button 元素中。
如果 `isButtonDisabled` 的值是 `null` 、`undefined` 或 `false` ，则 `disabled` 甚至不会被包含在渲染出来的 `button` 元素中。
#### v-on
......@@ -307,7 +300,7 @@ v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
和前端框架中的理解不同，客户端里要实现复用的逻辑，会标记模板节点的状态，添加了 v-once 能保证节点只渲染一次，但是并不一定能优化渲染性能，反而可能会拖慢客户端复用节点时的比对效率。
和前端框架中的理解不同，客户端里要实现复用的逻辑，会标记模板节点的状态，添加了 `v-once` 能保证节点只渲染一次，但是并不一定能优化渲染性能，反而可能会拖慢客户端复用节点时的比对效率。
> h5、微信小程序均不支持
......@@ -323,7 +316,7 @@ v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’
#### v-html
更新元素的 innerHTML。
更新元素的 `innerHTML` 。
- 注意：**内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。**
- 如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
......@@ -438,7 +431,7 @@ data 必须声明为返回一个初始数据对象的函数（注意函数内返
<view class="static active"></view>
```
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
当 `isActive` 或者 `hasError` 变化时，class 列表将相应地更新。例如，如果 `hasError` 的值为 `true` ，class 列表将变为 `static active text-danger`。
......@@ -489,7 +482,7 @@ data 必须声明为返回一个初始数据对象的函数（注意函数内返
**注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。**
> 非H5端不支持 classObject 和 styleObject 语法。
> 非H5端不支持 `classObject` 和 `styleObject` 语法。
不支持示例：
......@@ -589,7 +582,7 @@ data 必须声明为返回一个初始数据对象的函数（注意函数内返
</script>
```
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
类似于 `v-else` ，`v-else-if` 也必须紧跟在带 `v-if` 或者 `v-else-if` 的元素之后。
......@@ -620,7 +613,7 @@ data 必须声明为返回一个初始数据对象的函数（注意函数内返
### v-if和v-show区别
### v-if 和 v-show 区别
`v-if` 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
......@@ -636,8 +629,8 @@ data 必须声明为返回一个初始数据对象的函数（注意函数内返
**注意**
- 不推荐同时使用 v-if 和 v-for。
- 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
- 不推荐同时使用 `v-if` 和 `v-for`。
- 当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。
......@@ -650,7 +643,7 @@ data 必须声明为返回一个初始数据对象的函数（注意函数内返
v-for 指令可以实现基于一个数组来渲染一个列表。
- v-for 指令需要使用 `item in items` 形式的特殊语法，其中 `items` 是源数据数组，而 `item` 则是被迭代的数组元素的别名。
- `v-for` 指令需要使用 `item in items` 形式的特殊语法，其中 `items` 是源数据数组，而 `item` 则是被迭代的数组元素的别名。
- 第一个参数 `item` 则是被迭代的数组元素的别名。
- 第二个参数，即当前项的索引 `index` ，是可选的。
......@@ -727,7 +720,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
### 列表渲染分组
类似于 v-if，你也可以利用带有 v-for 的 `template` 来循环渲染一段包含多个元素的内容。比如：
类似于 `v-if`，你也可以利用带有 `v-for` 的 `template` 来循环渲染一段包含多个元素的内容。比如：
```html
<template v-for="item in items">
......@@ -740,7 +733,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
### key
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
当 Vue 正在更新使用 `v-for` 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 `input` 中的输入内容，`switch` 的选中状态），需要使用 `:key` 来指定列表中项目的唯一的标识符。
......@@ -797,7 +790,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
### 在组件上使用 v-for
在自定义组件上，你可以像在任何普通元素上一样使用 v-for。
在自定义组件上，你可以像在任何普通元素上一样使用 `v-for` 。
```html
<my-component v-for="item in items" :key="item.id"></my-component>
......@@ -806,7 +799,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
**当在组件上使用 v-for 时，key是必须的。**
## 事件处理器
## 事件处理器@eventhandler
[**观看本节视频讲解**](https://learning.dcloud.io/#/?vid=10)
......@@ -836,7 +829,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
### 事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 `JavaScript` 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
然而许多事件处理逻辑会更为复杂，所以直接把 `JavaScript` 代码写在 `v-on` 指令中是不可行的。因此 `v-on` 还可以接收一个需要调用的方法名称。
示例：
......@@ -928,7 +921,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
### 事件修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，`.prevent` 修饰符告诉 v-on 指令对于触发的事件调用 `event.preventDefault()`：
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，`.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()`：
v-on 提供了事件修饰符:
......@@ -951,8 +944,8 @@ v-on 提供了事件修饰符:
**注意**
- 为兼容各端，事件需使用 **v-on** 或 **@** 的方式绑定，请勿使用小程序端的 bind 和 catch 进行事件绑定。
- 若需要禁止蒙版下的页面滚动，可使用 `@touchmove.stop.prevent="moveHandle"`，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
- 为兼容各端，事件需使用 **v-on** 或 **@** 的方式绑定，请勿使用小程序端的 `bind` 和 `catch` 进行事件绑定。
- 若需要禁止蒙版下的页面滚动，可使用 `@touchmove.stop.prevent="moveHandle"`，`moveHandle` 可以用来处理 `touchmove` 的事件，也可以是一个空函数。
```html
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
......@@ -1028,7 +1021,7 @@ v-on 提供了事件修饰符:
##### 用法示例：
1. H5 的 `select` 标签用 `picker` 组件进行代替
- H5 的 `select` 标签用 `picker` 组件进行代替
```html
<template>
......@@ -1057,7 +1050,7 @@ v-on 提供了事件修饰符:
</script>
```
2. 表单元素 `radio` 用 `radio-group` 组件进行代替
- 表单元素 `radio` 用 `radio-group` 组件进行代替
```html
<template>
......
docs/vue-components.md
浏览文件 @ 2e9f7cf9
......@@ -55,11 +55,12 @@
在注册一个组件的时候，我们始终需要给它一个名字。
定义组件名的方式有两种：
##### 使用 kebab-case
- 使用 kebab-case
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 `<my-component-name>`。
##### 使用 PascalCase
- 使用 PascalCase
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
也就是说 `<my-component-name>` 和 `<MyComponentName>` 都是可接受的。
......@@ -71,18 +72,19 @@
│─components 符合vue组件规范的uni-app组件目录
│ └─componentA 符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
│ └─componentA.vue 可复用的componentA组件
│ └─component-a.vue 可复用的component-a组件
│ └─component-a.vue 可复用的component-a组件
```
### 全局注册
uni-app 支持配置全局组件，需在 `main.js` 里进行全局注册，注册后就可在所有页面里使用该组件。
`uni-app` 支持配置全局组件，需在 `main.js` 里进行全局注册，注册后就可在所有页面里使用该组件。
**注意**
- Vue.component 的第一个参数必须是静态的字符串。
- nvue页面暂不支持全局组件。
- nvue 页面暂不支持全局组件。
1. `main.js` 里进行全局导入和注册
......@@ -116,7 +118,6 @@ uni-app 支持配置全局组件，需在 `main.js` 里进行全局注册，注
1. **传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。
```html
<!-- 在index.vue引入 uni-badge 组件-->
<template>
......@@ -254,7 +255,6 @@ uni-app 支持配置全局组件，需在 `main.js` 里进行全局注册，注
```html
<blog-post v-bind="post"></blog-post>
<!-- 上面的模板等价于： -->
<blog-post
v-bind:id="post.id"
......@@ -270,7 +270,7 @@ uni-app 支持配置全局组件，需在 `main.js` 里进行全局注册，注
> 每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
1. 这个 `prop` 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 `prop` 数据来使用。
- 这个 `prop` 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 `prop` 数据来使用。
```html
<template>
......@@ -304,7 +304,7 @@ uni-app 支持配置全局组件，需在 `main.js` 里进行全局注册，注
</script>
```
2. 这个 `prop` 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 `prop` 的值来定义一个计算属性：
- 这个 `prop` 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 `prop` 的值来定义一个计算属性：
```html
<template>
......@@ -539,7 +539,7 @@ Vue 实现了一套内容分发的 API，将 `slot` 元素作为承载分发内
```
1. 当我在一个父级组件中使用 `<submit-button>` 并且不提供任何插槽内容时：
- 当我在一个父级组件中使用 `<submit-button>` 并且不提供任何插槽内容时：
```html
<!-- 父级组件：不提供任何插槽内容-->
......@@ -551,7 +551,7 @@ Vue 实现了一套内容分发的 API，将 `slot` 元素作为承载分发内
</button>
```
2. 当我在一个父级组件中使用 `<submit-button>` 并且提供插槽内容时：
- 当我在一个父级组件中使用 `<submit-button>` 并且提供插槽内容时：
```html
<!-- 父级组件：提供插槽内容-->
......@@ -573,7 +573,7 @@ Vue 实现了一套内容分发的 API，将 `slot` 元素作为承载分发内
需要多个插槽时，可以利用 `<slot>` 元素的一个特殊的特性：`name` 来定义具名插槽
1. `<base-layout>` 子组件模板：
- `<base-layout>` 子组件模板：
```html
<template>
......@@ -595,7 +595,7 @@ Vue 实现了一套内容分发的 API，将 `slot` 元素作为承载分发内
```
2. 在向具名插槽提供内容的时候，我们可以在一个 `<template>` 元素上使用 `v-slot` 指令，并以 v-slot 的参数的形式提供其名称：
- 在向具名插槽提供内容的时候，我们可以在一个 `<template>` 元素上使用 `v-slot` 指令，并以 v-slot 的参数的形式提供其名称：
```html
......
docs/vue-vuex.md
浏览文件 @ 2e9f7cf9
......@@ -185,7 +185,7 @@ const Counter = {
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
1. 在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下：
1.在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下：
```js
<!-- 页面路径：store/index.js -->
......@@ -205,7 +205,7 @@ export default store
```
2. 在 `main.js` 中导入文件。
2.在 `main.js` 中导入文件。
```js
<!-- 页面路径：main.js -->
......@@ -227,7 +227,7 @@ app.$mount()
**获取state**
1. 通过属性访问，需要在根节点注入 `store` 。
1.通过属性访问，需要在根节点注入 `store` 。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -251,7 +251,7 @@ app.$mount()
</script>
```
2. 在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。
2.在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -277,7 +277,7 @@ app.$mount()
#### mapState
3. 通过 `mapState` 辅助函数获取。
3.通过 `mapState` 辅助函数获取。
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题，我们可以使用 **mapState 辅助函数** 帮助我们生成计算属性，让你少按几次键：
......@@ -400,7 +400,7 @@ app.$mount()
- 就像 `computed` 计算属性一样，`getter` 返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
- 可以在多组件中共享 `getter` 函数，这样做还可以提高运行效率。
在 `uni-app` 项目根目录下，store目录index.js文件下：
在 `uni-app` 项目根目录下，`store` 目录 `index.js` 文件下：
```js
<!-- 页面路径：store/index.js -->
......@@ -484,7 +484,7 @@ export default store
**获取getters**
1. 通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。
1.通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。
```html
......@@ -514,7 +514,7 @@ export default store
2. 通过 `this.$store` 访问。
2.通过 `this.$store` 访问。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -539,7 +539,7 @@ export default store
```
3. 通过方法访问。
3.通过方法访问。
你也可以通过让 `getter` 返回一个函数，来实现给 `getter` 传参。在你对 `store` 里的数组进行查询时非常有用。
......@@ -570,7 +570,7 @@ export default store
#### mapGetters
4. 通过 `mapGetters` 辅助函数访问。
4.通过 `mapGetters` 辅助函数访问。
`mapGetters` 辅助函数仅仅是将 `store` 中的 `getter` 映射到局部计算属性：
......@@ -689,7 +689,7 @@ export default {
##### 传入参数
**传入参数**
你可以向 `store.commit` 传入额外的参数，即 `mutation` 的 载荷（payload）：
......@@ -798,8 +798,7 @@ export default store
**提交方式**
1. 对象风格的提交方式
1.对象风格的提交方式
我们修改组件中 `store.commit` 提交方式：
......@@ -845,8 +844,7 @@ export default store
#### mapMutations
2. 通过 `mapMutations` 辅助函数提交。
2.通过 `mapMutations` 辅助函数提交。
创建组件方法提交 `mutation`。
......@@ -900,7 +898,7 @@ export default store
#### 遵守规则
**遵守规则**
既然 `Vuex` 的 `store` 中的状态是响应式的，那么当我们变更状态时，监视状态的 `Vue` 组件也会自动更新。这也意味着 `Vuex` 中的 `mutation` 也需要与使用 `Vue` 一样遵守一些注意事项：
......@@ -919,7 +917,7 @@ export default store
#### Mutation 必须是同步函数
**Mutation 必须是同步函数**
一条重要的原则就是要记住** mutation 必须是同步函数**
......@@ -995,9 +993,9 @@ export default store
#### 分发 Action
**分发 Action**
1. `actions` 通过 `store.dispatch` 方法触发。
1.`actions` 通过 `store.dispatch` 方法触发。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -1027,7 +1025,7 @@ export default store
`actions` 支持以载荷形式分发:
- `actions` 支持以载荷形式分发:
```js
......@@ -1083,7 +1081,7 @@ export default store
```
`actions` 支持以对象形式分发:
- `actions` 支持以对象形式分发:
```js
methods: {
......@@ -1161,7 +1159,7 @@ export default store
#### mapActions
2. 通过 `mapActions` 辅助函数分发。
2.通过 `mapActions` 辅助函数分发。
创建组件方法分发 `action`。
......@@ -1198,7 +1196,7 @@ export default store
`mapActions` 也支持传入参数（载荷）：
- `mapActions` 也支持传入参数（载荷）：
```js
methods: {
......@@ -1210,7 +1208,7 @@ export default store
}
```
`mapActions` 也支持传递一个对象：
- `mapActions` 也支持传递一个对象：
```js
methods: {
......@@ -1222,7 +1220,7 @@ export default store
```
#### 组合 Action
**组合 Action**
`action` 通常是异步的，那么如何知道 `action` 什么时候结束呢？更重要的是，我们如何才能组合多个 `action`，以处理更加复杂的异步流程？
......@@ -1294,7 +1292,7 @@ export default store
为了解决以上问题，`Vuex` 允许我们将 `store` 分割成模块（module）。每个模块拥有自己的 `state`、`mutation`、`action`、`getter`、甚至是嵌套子模块——从上至下进行同样方式的分割：
1. 在 `store` 文件夹下新建 `modules` 文件夹，并在下面新建 `moduleA.js` 和 `moduleB.js` 文件用来存放 `vuex` 的 `modules` 模块。
1.在 `store` 文件夹下新建 `modules` 文件夹，并在下面新建 `moduleA.js` 和 `moduleB.js` 文件用来存放 `vuex` 的 `modules` 模块。
```html
......@@ -1318,7 +1316,7 @@ export default store
```
2. 在 `main.js` 文件中引入 `store`。
2.在 `main.js` 文件中引入 `store`。
```js
<!-- 页面路径：main.js -->
......@@ -1337,7 +1335,7 @@ export default store
```
3. 在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。
3.在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。
```js
<!-- 页面路径：store/index.js -->
......@@ -1355,7 +1353,7 @@ export default store
})
```
4. 子模块 `moduleA` 页面内容。
4.子模块 `moduleA` 页面内容。
```js
<!-- 子模块moduleA路径：store/modules/moduleA.js -->
......@@ -1375,7 +1373,7 @@ export default {
}
```
5. 子模块 `moduleB` 页面内容。
5.子模块 `moduleB` 页面内容。
```js
<!-- 子模块moduleB路径：store/modules/moduleB.js -->
......@@ -1409,7 +1407,7 @@ export default {
```
6. 在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。
6.在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。
```html
......@@ -1438,7 +1436,7 @@ export default {
</script>
```
7. 在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。
7.在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。
```html
<!-- 组件路径：components/myButton/myButton.vue -->
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或