Skip to content

U
unidocs-zh

it&s me / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 1
Fork 0
U
unidocs-zh

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

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

adjust vue nvue

上级 05ca9bbd
隐藏空白更改
内联 并排
Showing with 123 addition and 122 deletion
docs/nvue-api.md
浏览文件 @ a6c5c4c9
...@@ -563,7 +563,7 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够 ...@@ -563,7 +563,7 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
##### 代码示例: ##### 代码示例:
```html ```html
//test.nvue <!-- test.nvue -->
<template> <template>
<view @click="test"> <view @click="test">
<text>点击页面发送数据</text> <text>点击页面发送数据</text>
...@@ -581,7 +581,7 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够 ...@@ -581,7 +581,7 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
``` ```
```html ```html
//App.vue <!-- App.vue -->
<script> <script>
export default { export default {
onUniNViewMessage:function(e){ onUniNViewMessage:function(e){
...@@ -613,8 +613,8 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够 ...@@ -613,8 +613,8 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
##### 代码示例: ##### 代码示例:
```javascript ```html
//index.nvue <!-- index.nvue -->
<template> <template>
<div @click="test"> <div @click="test">
<text>点击页面发送数据{{num}}</text> <text>点击页面发送数据{{num}}</text>
...@@ -644,10 +644,11 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够 ...@@ -644,10 +644,11 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
} }
} }
} }
</script>
``` ```
```html ```html
//test.vue <!-- test.vue -->
<template> <template>
<view> <view>
<button type="primary" @click="test">点击改变nvue的数据</button> <button type="primary" @click="test">点击改变nvue的数据</button>
......
docs/nvue-css.md
浏览文件 @ a6c5c4c9
...@@ -250,7 +250,7 @@ flex {number}：值为 number 类型。 ...@@ -250,7 +250,7 @@ flex {number}：值为 number 类型。
``` html ``` html
//Gird布局 <!-- Gird布局 -->
<template> <template>
<view> <view>
<view v-for="(v, i) in list" class="row"> <view v-for="(v, i) in list" class="row">
...@@ -295,7 +295,7 @@ flex {number}：值为 number 类型。 ...@@ -295,7 +295,7 @@ flex {number}：值为 number 类型。
``` html ``` html
//等高模块 <!-- 等高模块 -->
<template> <template>
<view> <view>
<view style="width:300px; height:100px;"> <view style="width:300px; height:100px;">
...@@ -325,7 +325,7 @@ flex {number}：值为 number 类型。 ...@@ -325,7 +325,7 @@ flex {number}：值为 number 类型。
``` html ``` html
//水平垂直居中 <!-- 水平垂直居中 -->
<template> <template>
<view class="wrapper"> <view class="wrapper">
<view class="box"></view> <view class="box"></view>
......
docs/nvue-outline.md
浏览文件 @ a6c5c4c9
...@@ -56,11 +56,11 @@ uni-app在App端，支持vue页面和nvue页面混搭、互相跳转。也支持 ...@@ -56,11 +56,11 @@ uni-app在App端，支持vue页面和nvue页面混搭、互相跳转。也支持
```javascript ```javascript
// manifest.json // manifest.json
{ {
// ... // ...
/* App平台特有配置 */ // App平台特有配置
"app-plus": { "app-plus": {
"renderer": "native", //App端纯原生渲染模式 "renderer": "native", //App端纯原生渲染模式
} }
} }
``` ```
...@@ -95,14 +95,14 @@ weex的组件和JS API，与uni-app不同。uni-app与微信小程序相同。 ...@@ -95,14 +95,14 @@ weex的组件和JS API，与uni-app不同。uni-app与微信小程序相同。
- uni-app - uni-app
```javascript ```javascript
// manifest.json // manifest.json
{ {
// ... // ...
/* App平台特有配置 */ // App平台特有配置
"app-plus": { "app-plus": {
"nvueCompiler":"uni-app" //是否启用 uni-app 模式 "nvueCompiler":"uni-app" //是否启用 uni-app 模式
} }
} }
``` ```
...@@ -144,7 +144,7 @@ weex 编译模式下支持使用 weex ui ，例子[详见](https://ext.dcloud.ne ...@@ -144,7 +144,7 @@ weex 编译模式下支持使用 weex ui ，例子[详见](https://ext.dcloud.ne
// manifest.json // manifest.json
{ {
// ... // ...
/* App平台特有配置 */ // App平台特有配置
"app-plus": { "app-plus": {
"nvueStyleCompiler": "uni-app" "nvueStyleCompiler": "uni-app"
} }
...@@ -259,10 +259,10 @@ iOS平台默认情况下滚动容器组件（如```list```、```waterfall```组 ...@@ -259,10 +259,10 @@ iOS平台默认情况下滚动容器组件（如```list```、```waterfall```组
```html ```html
<list class="scroll-v list" enableBackToTop="true" scroll-y alwaysScrollableVertical="true"> <list class="scroll-v list" enableBackToTop="true" scroll-y alwaysScrollableVertical="true">
<refresh class="refresh" @refresh="onrefresh()" @pullingdown="onpullingdown"> <refresh class="refresh" @refresh="onrefresh()" @pullingdown="onpullingdown">
//refresh content <!-- refresh content -->
</refresh> </refresh>
<cell v-for="(newsitem,index) in list" :key="newsitem.id"> <cell v-for="(newsitem,index) in list" :key="newsitem.id">
//cell content <!-- cell content -->
</cell> </cell>
</list> </list>
``` ```
......
docs/vue-api.md
浏览文件 @ a6c5c4c9
...@@ -274,7 +274,7 @@ uni-app 内置了 [Vuex](https://uniapp.dcloud.io/vue-vuex) ，在app里的使 ...@@ -274,7 +274,7 @@ uni-app 内置了 [Vuex](https://uniapp.dcloud.io/vue-vuex) ，在app里的使
解决办法有两种（以scroll-view组件为例）： 解决办法有两种（以scroll-view组件为例）：
1.监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值 1. 监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
...@@ -308,7 +308,7 @@ export default { ...@@ -308,7 +308,7 @@ export default {
``` ```
2.监听scroll事件，获取组件内部变化的值，实时更新其绑定值 2. 监听scroll事件，获取组件内部变化的值，实时更新其绑定值
```html ```html
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view> <scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
......
docs/vue-basics.md
浏览文件 @ a6c5c4c9
...@@ -125,9 +125,9 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要 ...@@ -125,9 +125,9 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要
当然还有一些高级的用法 当然还有一些高级的用法
```js ```js
<!-- 直接使用js模块的属性。在hello uni-app有示例 --> // 直接使用js模块的属性。在hello uni-app有示例
var dateUtils = require('../../../common/util.js').dateUtils; var dateUtils = require('../../../common/util.js').dateUtils;
<!-- 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例 --> // 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例
import * as echarts from '/components/echarts/echarts.simple.min.js'; import * as echarts from '/components/echarts/echarts.simple.min.js';
``` ```
...@@ -1502,7 +1502,7 @@ Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据 ...@@ -1502,7 +1502,7 @@ Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据
} }
}, },
watch: { watch: {
/* 使用watch来响应数据的变化 */ // 使用watch来响应数据的变化
word(newVal, oldVal) { word(newVal, oldVal) {
console.log('最新值是：'+newVal,"原来的值是："+ oldVal); console.log('最新值是：'+newVal,"原来的值是："+ oldVal);
} }
......
docs/vue-components.md
浏览文件 @ a6c5c4c9
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
- Vue.component 的第一个参数必须是静态的字符串。 - Vue.component 的第一个参数必须是静态的字符串。
- nvue 页面暂不支持全局组件。 - nvue 页面暂不支持全局组件。
1.`main.js` 里进行全局导入和注册 1. `main.js` 里进行全局导入和注册
```js ```js
import Vue from 'vue' import Vue from 'vue'
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
Vue.component('page-head',pageHead) Vue.component('page-head',pageHead)
``` ```
2.`index.vue` 里可直接使用组件 2. `index.vue` 里可直接使用组件
```html ```html
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
如下通过两种方式导入一个角标的组件库，[详见](https://ext.dcloud.net.cn/plugin?id=21)，推荐使用 `easycom` 方式引入。 如下通过两种方式导入一个角标的组件库，[详见](https://ext.dcloud.net.cn/plugin?id=21)，推荐使用 `easycom` 方式引入。
1.**传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。 1. **传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。
```html ```html
<!-- 在index.vue引入 uni-badge 组件--> <!-- 在index.vue引入 uni-badge 组件-->
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
- 包含了这个组件选项的变量名(仅支持驼峰法命名) - 包含了这个组件选项的变量名(仅支持驼峰法命名)
2.**通过uni-app的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)：** 将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册，直接在页面中使用。 2. **通过uni-app的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)：** 将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册，直接在页面中使用。
```html ```html
...@@ -375,10 +375,10 @@ ...@@ -375,10 +375,10 @@
```html ```html
//非H5端不支持通过this.$refs.content来获取view实例 <!-- 非H5端不支持通过this.$refs.content来获取view实例 -->
<view ref="content">hello</view> <view ref="content">hello</view>
//支持通过this.$refs.child来获取child-component实例 <!-- 支持通过this.$refs.child来获取child-component实例 -->
<child-component ref="child"></child-component> <child-component ref="child"></child-component>
``` ```
...@@ -410,7 +410,7 @@ ...@@ -410,7 +410,7 @@
##### 示例： ##### 示例：
```html ```html
//base-input子组件页面 <!-- base-input子组件页面 -->
<template> <template>
<view> <view>
<input :focus="isFocus" type="text" placeholder="请输入内容" /> <input :focus="isFocus" type="text" placeholder="请输入内容" />
...@@ -438,7 +438,7 @@ ...@@ -438,7 +438,7 @@
```html ```html
//index 父组件页面 <!-- index 父组件页面 -->
<template> <template>
<view> <view>
<base-input ref="usernameInput"></base-input> <base-input ref="usernameInput"></base-input>
......
docs/vue-vuex.md
浏览文件 @ a6c5c4c9
...@@ -185,10 +185,10 @@ const Counter = { ...@@ -185,10 +185,10 @@ const Counter = {
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）： Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
1.在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下： 1. 在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下：
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -205,10 +205,10 @@ export default store ...@@ -205,10 +205,10 @@ export default store
``` ```
2.在 `main.js` 中导入文件。 2. 在 `main.js` 中导入文件。
```js ```js
<!-- 页面路径：main.js --> // 页面路径：main.js
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
import store from './store' import store from './store'
...@@ -227,7 +227,7 @@ app.$mount() ...@@ -227,7 +227,7 @@ app.$mount()
**获取state** **获取state**
1.通过属性访问，需要在根节点注入 `store` 。 1. 通过属性访问，需要在根节点注入 `store` 。
```html ```html
<!-- 页面路径：pages/index/index.vue --> <!-- 页面路径：pages/index/index.vue -->
...@@ -251,7 +251,7 @@ app.$mount() ...@@ -251,7 +251,7 @@ app.$mount()
</script> </script>
``` ```
2.在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。 2. 在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。
```html ```html
<!-- 页面路径：pages/index/index.vue --> <!-- 页面路径：pages/index/index.vue -->
...@@ -277,7 +277,7 @@ app.$mount() ...@@ -277,7 +277,7 @@ app.$mount()
#### mapState #### mapState
3.通过 `mapState` 辅助函数获取。 3. 通过 `mapState` 辅助函数获取。
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题，我们可以使用 **mapState 辅助函数** 帮助我们生成计算属性，让你少按几次键： 为了解决这个问题，我们可以使用 **mapState 辅助函数** 帮助我们生成计算属性，让你少按几次键：
...@@ -403,7 +403,7 @@ app.$mount() ...@@ -403,7 +403,7 @@ app.$mount()
在 `uni-app` 项目根目录下，`store` 目录 `index.js` 文件下： 在 `uni-app` 项目根目录下，`store` 目录 `index.js` 文件下：
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -442,7 +442,7 @@ export default store ...@@ -442,7 +442,7 @@ export default store
- getters, 等同于 store.getters - getters, 等同于 store.getters
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -484,7 +484,7 @@ export default store ...@@ -484,7 +484,7 @@ export default store
**获取getters** **获取getters**
1.通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。 1. 通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。
```html ```html
...@@ -514,7 +514,7 @@ export default store ...@@ -514,7 +514,7 @@ export default store
2.通过 `this.$store` 访问。 2. 通过 `this.$store` 访问。
```html ```html
<!-- 页面路径：pages/index/index.vue --> <!-- 页面路径：pages/index/index.vue -->
...@@ -539,7 +539,7 @@ export default store ...@@ -539,7 +539,7 @@ export default store
``` ```
3.通过方法访问。 3. 通过方法访问。
你也可以通过让 `getter` 返回一个函数，来实现给 `getter` 传参。在你对 `store` 里的数组进行查询时非常有用。 你也可以通过让 `getter` 返回一个函数，来实现给 `getter` 传参。在你对 `store` 里的数组进行查询时非常有用。
...@@ -570,7 +570,7 @@ export default store ...@@ -570,7 +570,7 @@ export default store
#### mapGetters #### mapGetters
4.通过 `mapGetters` 辅助函数访问。 4. 通过 `mapGetters` 辅助函数访问。
`mapGetters` 辅助函数仅仅是将 `store` 中的 `getter` 映射到局部计算属性： `mapGetters` 辅助函数仅仅是将 `store` 中的 `getter` 映射到局部计算属性：
...@@ -635,7 +635,7 @@ Vuex 中的 `mutation` 非常类似于事件：每个 `mutation` 都有一个字 ...@@ -635,7 +635,7 @@ Vuex 中的 `mutation` 非常类似于事件：每个 `mutation` 都有一个字
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -699,7 +699,7 @@ export default { ...@@ -699,7 +699,7 @@ export default {
- 在 `mutation` 传参（载荷）可以传递一个参数。 - 在 `mutation` 传参（载荷）可以传递一个参数。
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -748,7 +748,7 @@ export default store ...@@ -748,7 +748,7 @@ export default store
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -798,7 +798,7 @@ export default store ...@@ -798,7 +798,7 @@ export default store
**提交方式** **提交方式**
1.对象风格的提交方式 1. 对象风格的提交方式
我们修改组件中 `store.commit` 提交方式： 我们修改组件中 `store.commit` 提交方式：
...@@ -844,7 +844,7 @@ export default store ...@@ -844,7 +844,7 @@ export default store
#### mapMutations #### mapMutations
2.通过 `mapMutations` 辅助函数提交。 2. 通过 `mapMutations` 辅助函数提交。
创建组件方法提交 `mutation`。 创建组件方法提交 `mutation`。
...@@ -876,7 +876,7 @@ export default store ...@@ -876,7 +876,7 @@ export default store
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -950,7 +950,7 @@ export default store ...@@ -950,7 +950,7 @@ export default store
让我们来注册一个简单的 `action` ： 让我们来注册一个简单的 `action` ：
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -995,7 +995,7 @@ export default store ...@@ -995,7 +995,7 @@ export default store
**分发 Action** **分发 Action**
1.`actions` 通过 `store.dispatch` 方法触发。 1. `actions` 通过 `store.dispatch` 方法触发。
```html ```html
<!-- 页面路径：pages/index/index.vue --> <!-- 页面路径：pages/index/index.vue -->
...@@ -1029,7 +1029,7 @@ export default store ...@@ -1029,7 +1029,7 @@ export default store
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -1103,7 +1103,7 @@ export default store ...@@ -1103,7 +1103,7 @@ export default store
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -1159,7 +1159,7 @@ export default store ...@@ -1159,7 +1159,7 @@ export default store
#### mapActions #### mapActions
2.通过 `mapActions` 辅助函数分发。 2. 通过 `mapActions` 辅助函数分发。
创建组件方法分发 `action`。 创建组件方法分发 `action`。
...@@ -1292,7 +1292,7 @@ export default store ...@@ -1292,7 +1292,7 @@ export default store
为了解决以上问题，`Vuex` 允许我们将 `store` 分割成模块（module）。每个模块拥有自己的 `state`、`mutation`、`action`、`getter`、甚至是嵌套子模块——从上至下进行同样方式的分割： 为了解决以上问题，`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 ```html
...@@ -1316,10 +1316,10 @@ export default store ...@@ -1316,10 +1316,10 @@ export default store
``` ```
2.在 `main.js` 文件中引入 `store`。 2. 在 `main.js` 文件中引入 `store`。
```js ```js
<!-- 页面路径：main.js --> // 页面路径：main.js
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
import store from './store' import store from './store'
...@@ -1335,10 +1335,10 @@ export default store ...@@ -1335,10 +1335,10 @@ export default store
``` ```
3.在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。 3. 在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
...@@ -1353,10 +1353,10 @@ export default store ...@@ -1353,10 +1353,10 @@ export default store
}) })
``` ```
4.子模块 `moduleA` 页面内容。 4. 子模块 `moduleA` 页面内容。
```js ```js
<!-- 子模块moduleA路径：store/modules/moduleA.js --> // 子模块moduleA路径：store/modules/moduleA.js
export default { export default {
state: { state: {
text:"我是moduleA模块下state.text的值" text:"我是moduleA模块下state.text的值"
...@@ -1373,10 +1373,10 @@ export default { ...@@ -1373,10 +1373,10 @@ export default {
} }
``` ```
5.子模块 `moduleB` 页面内容。 5. 子模块 `moduleB` 页面内容。
```js ```js
<!-- 子模块moduleB路径：store/modules/moduleB.js --> // 子模块moduleB路径：store/modules/moduleB.js
export default { export default {
state: { state: {
timestamp: 1608820295//初始时间戳 timestamp: 1608820295//初始时间戳
...@@ -1407,7 +1407,7 @@ export default { ...@@ -1407,7 +1407,7 @@ export default {
``` ```
6.在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。 6. 在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。
```html ```html
...@@ -1436,7 +1436,7 @@ export default { ...@@ -1436,7 +1436,7 @@ export default {
</script> </script>
``` ```
7.在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。 7. 在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。
```html ```html
<!-- 组件路径：components/myButton/myButton.vue --> <!-- 组件路径：components/myButton/myButton.vue -->
......
docs/vue3-api.md
浏览文件 @ a6c5c4c9
...@@ -364,7 +364,7 @@ export default { ...@@ -364,7 +364,7 @@ export default {
解决办法有两种（以`scroll-view`组件为例）： 解决办法有两种（以`scroll-view`组件为例）：
1.监听`scroll`事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值 1. 监听`scroll`事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
...@@ -398,7 +398,7 @@ export default { ...@@ -398,7 +398,7 @@ export default {
``` ```
2.监听scroll事件，获取组件内部变化的值，实时更新其绑定值 2. 监听scroll事件，获取组件内部变化的值，实时更新其绑定值
```html ```html
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view> <scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
......
docs/vue3-basics.md
浏览文件 @ a6c5c4c9
...@@ -135,9 +135,9 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要 ...@@ -135,9 +135,9 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要
当然还有一些高级的用法 当然还有一些高级的用法
```js ```js
<!-- 直接使用js模块的属性。在hello uni-app有示例 --> // 直接使用js模块的属性。在hello uni-app有示例
var dateUtils = require('../../../common/util.js').dateUtils; var dateUtils = require('../../../common/util.js').dateUtils;
<!-- 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例 --> // 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例
import * as echarts from '/components/echarts/echarts.simple.min.js'; import * as echarts from '/components/echarts/echarts.simple.min.js';
``` ```
...@@ -1707,7 +1707,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。 ...@@ -1707,7 +1707,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
} }
}, },
watch: { watch: {
/* 使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值*/ //使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值
a: function(newVal, oldVal) { a: function(newVal, oldVal) {
console.log("a--newVal: ", newVal, "a--oldVal: ",oldVal); console.log("a--newVal: ", newVal, "a--oldVal: ",oldVal);
}, },
......
docs/vue3-components.md
浏览文件 @ a6c5c4c9
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
- app.component 的第一个参数必须是静态的字符串。 - app.component 的第一个参数必须是静态的字符串。
- nvue 页面暂不支持全局组件。 - nvue 页面暂不支持全局组件。
1.`main.js` 里进行全局导入和注册 1. `main.js` 里进行全局导入和注册
```js ```js
import App from './App' import App from './App'
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
} }
``` ```
2.`index.vue` 里可直接使用组件 2. `index.vue` 里可直接使用组件
```html ```html
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
如下通过两种方式导入一个角标的组件库，[详见](https://ext.dcloud.net.cn/plugin?id=21)，推荐使用 `easycom` 方式引入。 如下通过两种方式导入一个角标的组件库，[详见](https://ext.dcloud.net.cn/plugin?id=21)，推荐使用 `easycom` 方式引入。
1.**传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。 1. **传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。
```html ```html
<!-- 在index.vue引入 uni-badge 组件--> <!-- 在index.vue引入 uni-badge 组件-->
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
- 包含了这个组件选项的变量名(仅支持驼峰法命名) - 包含了这个组件选项的变量名(仅支持驼峰法命名)
2.**通过uni-app的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)：** 将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册，直接在页面中使用。 2. **通过uni-app的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)：** 将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册，直接在页面中使用。
```html ```html
...@@ -401,7 +401,7 @@ ...@@ -401,7 +401,7 @@
2.**这个 `prop` 以一种原始的值传入且需要进行转换**。在这种情况下，最好使用这个 `prop` 的值来定义一个计算属性： 2. **这个 `prop` 以一种原始的值传入且需要进行转换**。在这种情况下，最好使用这个 `prop` 的值来定义一个计算属性：
```html ```html
...@@ -607,7 +607,7 @@ ...@@ -607,7 +607,7 @@
```js ```js
<!-- 我是子组件date-picker --> // 我是子组件date-picker
export default { export default {
created() { created() {
console.log(this.$attrs) // { onChange: () => {} } console.log(this.$attrs) // { onChange: () => {} }
...@@ -679,7 +679,7 @@ ...@@ -679,7 +679,7 @@
有了这个新配置，`data status` attribute 将应用于 `input` 元素！ 有了这个新配置，`data status` attribute 将应用于 `input` 元素！
```js ```html
<!-- Date-picker 组件 使用非 prop attribute --> <!-- Date-picker 组件 使用非 prop attribute -->
<date-picker data-status="activated"></date-picker> <date-picker data-status="activated"></date-picker>
...@@ -700,15 +700,15 @@ ...@@ -700,15 +700,15 @@
``` ```
```html ```html
// 我是custom-layout组件 <!-- 我是custom-layout组件 -->
// 这将发出警告 <!-- 这将发出警告 -->
<template> <template>
<header>...</header> <header>...</header>
<main>...</main> <main>...</main>
<footer>...</footer> <footer>...</footer>
</template> </template>
// 没有警告，$attrs被传递到<main>元素 <!-- 没有警告，$attrs被传递到<main>元素 -->
<template> <template>
<header>...</header> <header>...</header>
......
docs/vue3-vuex.md
浏览文件 @ a6c5c4c9
...@@ -191,10 +191,10 @@ const Counter = { ...@@ -191,10 +191,10 @@ const Counter = {
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）： Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
1.在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下： 1. 在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下：
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state:{//存放状态 state:{//存放状态
...@@ -207,10 +207,10 @@ export default store ...@@ -207,10 +207,10 @@ export default store
``` ```
2.在 `main.js` 中导入文件。 2. 在 `main.js` 中导入文件。
```js ```js
<!-- 页面路径：main.js --> // 页面路径：main.js
import App from './App' import App from './App'
import store from './store' import store from './store'
import {createSSRApp} from 'vue' import {createSSRApp} from 'vue'
...@@ -226,7 +226,7 @@ export function createApp() { ...@@ -226,7 +226,7 @@ export function createApp() {
**获取state** **获取state**
1.通过属性访问，需要在根节点注入 `store` 。 1. 通过属性访问，需要在根节点注入 `store` 。
```html ```html
<!-- 页面路径：pages/index/index.vue --> <!-- 页面路径：pages/index/index.vue -->
...@@ -250,7 +250,7 @@ export function createApp() { ...@@ -250,7 +250,7 @@ export function createApp() {
</script> </script>
``` ```
2.在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。 2. 在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。
```html ```html
<!-- 页面路径：pages/index/index.vue --> <!-- 页面路径：pages/index/index.vue -->
...@@ -276,7 +276,7 @@ export function createApp() { ...@@ -276,7 +276,7 @@ export function createApp() {
#### mapState #### mapState
3.通过 `mapState` 辅助函数获取。 3. 通过 `mapState` 辅助函数获取。
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题，我们可以使用 **mapState 辅助函数** 帮助我们生成计算属性，让你少按几次键： 为了解决这个问题，我们可以使用 **mapState 辅助函数** 帮助我们生成计算属性，让你少按几次键：
...@@ -404,7 +404,7 @@ export function createApp() { ...@@ -404,7 +404,7 @@ export function createApp() {
在 `uni-app` 项目根目录下，`store` 目录 `index.js` 文件下： 在 `uni-app` 项目根目录下，`store` 目录 `index.js` 文件下：
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state: { state: {
...@@ -437,7 +437,7 @@ export default store ...@@ -437,7 +437,7 @@ export default store
- getters, 等同于 store.getters - getters, 等同于 store.getters
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
...@@ -475,7 +475,7 @@ export default store ...@@ -475,7 +475,7 @@ export default store
**获取getters** **获取getters**
1.通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。 1. 通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。
```html ```html
...@@ -505,7 +505,7 @@ export default store ...@@ -505,7 +505,7 @@ export default store
2.通过 `this.$store` 访问。 2. 通过 `this.$store` 访问。
```html ```html
<!-- 页面路径：pages/index/index.vue --> <!-- 页面路径：pages/index/index.vue -->
...@@ -530,7 +530,7 @@ export default store ...@@ -530,7 +530,7 @@ export default store
``` ```
3.通过方法访问。 3. 通过方法访问。
你也可以通过让 `getter` 返回一个函数，来实现给 `getter` 传参。在你对 `store` 里的数组进行查询时非常有用。 你也可以通过让 `getter` 返回一个函数，来实现给 `getter` 传参。在你对 `store` 里的数组进行查询时非常有用。
...@@ -561,7 +561,7 @@ export default store ...@@ -561,7 +561,7 @@ export default store
#### mapGetters #### mapGetters
4.通过 `mapGetters` 辅助函数访问。 4. 通过 `mapGetters` 辅助函数访问。
`mapGetters` 辅助函数仅仅是将 `store` 中的 `getter` 映射到局部计算属性： `mapGetters` 辅助函数仅仅是将 `store` 中的 `getter` 映射到局部计算属性：
...@@ -626,7 +626,7 @@ Vuex 中的 `mutation` 非常类似于事件：每个 `mutation` 都有一个字 ...@@ -626,7 +626,7 @@ Vuex 中的 `mutation` 非常类似于事件：每个 `mutation` 都有一个字
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state: { state: {
...@@ -685,7 +685,7 @@ export default { ...@@ -685,7 +685,7 @@ export default {
- 在 `mutation` 传参（载荷）可以传递一个参数。 - 在 `mutation` 传参（载荷）可以传递一个参数。
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state: { state: {
...@@ -730,7 +730,7 @@ export default store ...@@ -730,7 +730,7 @@ export default store
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state: { state: {
...@@ -775,7 +775,7 @@ export default store ...@@ -775,7 +775,7 @@ export default store
**提交方式** **提交方式**
1.对象风格的提交方式 1. 对象风格的提交方式
我们修改组件中 `store.commit` 提交方式： 我们修改组件中 `store.commit` 提交方式：
...@@ -821,7 +821,7 @@ export default store ...@@ -821,7 +821,7 @@ export default store
#### mapMutations #### mapMutations
2.通过 `mapMutations` 辅助函数提交。 2. 通过 `mapMutations` 辅助函数提交。
创建组件方法提交 `mutation`。 创建组件方法提交 `mutation`。
...@@ -853,7 +853,7 @@ export default store ...@@ -853,7 +853,7 @@ export default store
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state: { state: {
...@@ -923,7 +923,7 @@ export default store ...@@ -923,7 +923,7 @@ export default store
让我们来注册一个简单的 `action` ： 让我们来注册一个简单的 `action` ：
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state: { state: {
...@@ -964,7 +964,7 @@ export default store ...@@ -964,7 +964,7 @@ export default store
**分发 Action** **分发 Action**
1.`actions` 通过 `store.dispatch` 方法触发。 1. `actions` 通过 `store.dispatch` 方法触发。
```html ```html
<!-- 页面路径：pages/index/index.vue --> <!-- 页面路径：pages/index/index.vue -->
...@@ -998,7 +998,7 @@ export default store ...@@ -998,7 +998,7 @@ export default store
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state: { state: {
...@@ -1068,7 +1068,7 @@ export default store ...@@ -1068,7 +1068,7 @@ export default store
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import { createStore } from 'vuex' import { createStore } from 'vuex'
const store = createStore({ const store = createStore({
state: { state: {
...@@ -1120,7 +1120,7 @@ export default store ...@@ -1120,7 +1120,7 @@ export default store
#### mapActions #### mapActions
2.通过 `mapActions` 辅助函数分发。 2. 通过 `mapActions` 辅助函数分发。
创建组件方法分发 `action`。 创建组件方法分发 `action`。
...@@ -1253,7 +1253,7 @@ export default store ...@@ -1253,7 +1253,7 @@ export default store
为了解决以上问题，`Vuex` 允许我们将 `store` 分割成模块（module）。每个模块拥有自己的 `state`、`mutation`、`action`、`getter`、甚至是嵌套子模块——从上至下进行同样方式的分割： 为了解决以上问题，`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 ```html
...@@ -1277,10 +1277,10 @@ export default store ...@@ -1277,10 +1277,10 @@ export default store
``` ```
2.在 `main.js` 文件中引入 `store`。 2. 在 `main.js` 文件中引入 `store`。
```js ```js
<!-- 页面路径：main.js --> // 页面路径：main.js
import {createSSRApp} from 'vue' import {createSSRApp} from 'vue'
import store from './store' import store from './store'
export function createApp() { export function createApp() {
...@@ -1293,10 +1293,10 @@ export default store ...@@ -1293,10 +1293,10 @@ export default store
``` ```
3.在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。 3. 在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。
```js ```js
<!-- 页面路径：store/index.js --> // 页面路径：store/index.js
import {createStore} from 'vuex' import {createStore} from 'vuex'
import moduleA from '@/store/modules/moduleA' import moduleA from '@/store/modules/moduleA'
import moduleB from '@/store/modules/moduleB' import moduleB from '@/store/modules/moduleB'
...@@ -1308,10 +1308,10 @@ export default createStore({ ...@@ -1308,10 +1308,10 @@ export default createStore({
}) })
``` ```
4.子模块 `moduleA` 页面内容。 4. 子模块 `moduleA` 页面内容。
```js ```js
<!-- 子模块moduleA路径：store/modules/moduleA.js --> // 子模块moduleA路径：store/modules/moduleA.js
export default { export default {
state: { state: {
text:"我是moduleA模块下state.text的值" text:"我是moduleA模块下state.text的值"
...@@ -1328,10 +1328,10 @@ export default { ...@@ -1328,10 +1328,10 @@ export default {
} }
``` ```
5.子模块 `moduleB` 页面内容。 5. 子模块 `moduleB` 页面内容。
```js ```js
<!-- 子模块moduleB路径：store/modules/moduleB.js --> // 子模块moduleB路径：store/modules/moduleB.js
export default { export default {
state: { state: {
timestamp: 1608820295//初始时间戳 timestamp: 1608820295//初始时间戳
...@@ -1362,7 +1362,7 @@ export default { ...@@ -1362,7 +1362,7 @@ export default {
``` ```
6.在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。 6. 在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。
```html ```html
...@@ -1391,7 +1391,7 @@ export default { ...@@ -1391,7 +1391,7 @@ export default {
</script> </script>
``` ```
7.在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。 7. 在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。
```html ```html
<!-- 组件路径：components/myButton/myButton.vue --> <!-- 组件路径：components/myButton/myButton.vue -->
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或