提交 11ae41b3 编写于 作者: Q qiang

docs: 移除已过期编译模式文档

上级 59554fbd
......@@ -868,7 +868,6 @@ code|message|
- 多次调用 `RewardedVideoAd.onLoad()``RewardedVideoAd.onError()``RewardedVideoAd.onClose()` 等方法监听广告事件会产生多次事件回调,建议在创建广告后监听一次即可。
- 为避免滥用广告资源,目前每个用户每天可观看激励式视频广告的次数有限,建议展示广告按钮前先判断广告是否拉取成功。
- App平台,建议每个广告商每个设备每天调用次数不超过`15`,中间要有间隔时间,否则可能触发系统的反作弊策略导致流量收益下降。
- 老版非V3编译项目不支持激励视频。
### 案例参考
- [全民董事长](https://android.myapp.com/myapp/detail.htm?apkName=com.dlt.qmdsz&info=DF3F955B42F0B77FECA41F03E7F77C8D)
......
......@@ -17,4 +17,3 @@
- 不同平台对于 console 方法的支持存在差异,建议在开发过程中只使用文档中提到的方法。
- HBuilderX中有2个重要的代码块,敲`clog`:可直接输出`console.log()`;敲`clogv`:可输出`console.log(": " + );`,并且出现双光标,方便把变量名称和值同时打印出来。
- HBuilderX 1.9.7 以上在App端支持打印对象信息到控制台。老版本可使用`clogj`代码块将json对象转为字符串打印出来。
......@@ -17,5 +17,4 @@ uni.onThemeChange(function (res) {
```
**注意**
- 自定义基座生效
- 仅 V3 编译支持,参考 manifest.json 配置
\ No newline at end of file
- 自定义基座生效
\ No newline at end of file
......@@ -39,7 +39,7 @@ export default {
},
onLoad() {
// #ifdef APP-PLUS
const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
// #endif
}
......
......@@ -17,4 +17,3 @@
- 不同平台对于 console 方法的支持存在差异,建议在开发过程中只使用文档中提到的方法。
- HBuilderX中有2个重要的代码块,敲`clog`:可直接输出`console.log()`;敲`clogv`:可输出`console.log(": " + );`,并且出现双光标,方便把变量名称和值同时打印出来。
- HBuilderX 1.9.7 以上在App端支持打印对象信息到控制台。老版本可使用`clogj`代码块将json对象转为字符串打印出来。
......@@ -12,7 +12,7 @@ console.log(app.globalData)
**注意:**
- 不要在定义于 `App()` 内的函数中,或调用 `App` 前调用 `getApp()` ,可以通过 `this.$scope` 获取对应的app实例
- 通过 `getApp()` 获取实例之后,不要私自调用生命周期函数。
- v3模式加速了首页`nvue`的启动速度,当在首页`nvue`中使用`getApp()`不一定可以获取真正的`App`对象。对此v3版本提供了`const app = getApp({allowDefault: true})`用来获取原始的`App`对象,可以用来在首页对`globalData`等初始化
- 当在首页`nvue`中使用`getApp()`不一定可以获取真正的`App`对象。对此提供了`const app = getApp({allowDefault: true})`用来获取原始的`App`对象,可以用来在首页对`globalData`等初始化
### getCurrentPages()
......@@ -54,7 +54,7 @@ export default {
},
onLoad() {
// #ifdef APP-PLUS
const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果
// #endif
}
......
......@@ -83,7 +83,6 @@ App和微信小程序的ad组件没有type属性,可以用于banner,也可
- app-nvue 的 `<recycle-list>` 组件内不支持嵌套 `<ad>`
- 广点通概率出现重复广告,可根据需求请求广告数据,推荐单次大于1条(plus.ad.getAds) 来降低重复率
- HBuilderX2.8+版本Android平台更新穿山甲(今日头条)广告SDK后不再支持x86类型CPU,无法运行到x86类型cpu的模拟器。
- app-vue 页面使用 `<ad>` 必须使用v3编译器。如果使用HBuilderX 2.7以下版本,需注意开启v3编译模式。2.7以上版本已经淘汰了其他模式,无需关心本条。
- `<ad>` 组件测试广告位是上图下文,uniAD后台申请的广告位默认左图右文
- HBuilderX标准基座真机运行测试信息流广告位标识(adpid)为:1111111111
......
......@@ -104,7 +104,7 @@ App平台在iOS上,webview中的软键盘弹出时,默认在软键盘上方
this.$scope.$getAppWebview().setStyle({
softinputNavBar: 'none'
})
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
```
如果是nvue页面,iOS默认就没有键盘上方的横条,无需任何设置。
......@@ -129,7 +129,7 @@ App平台软键盘弹出有 adjustResize|adjustPan 两种模式,默认为 adju
- 小程序端在 input 聚焦期间,避免使用 css 动画。
- H5平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考:[组件属性设置不生效解决办法](/vue-api?id=_4-组件属性设置不生效解决办法)
- 如需禁止点击其他位置收起键盘的默认行为,可以监听`touch`事件并使用`prevent`修饰符(仅支持App-v3、H5,其他平台可以通过设置`focus`来使输入框重新获取焦点),例如在确认按钮上使用:```@touchend.prevent="onTap"```
- 如需禁止点击其他位置收起键盘的默认行为,可以监听`touch`事件并使用`prevent`修饰符(仅支持App、H5,其他平台可以通过设置`focus`来使输入框重新获取焦点),例如在确认按钮上使用:```@touchend.prevent="onTap"```
#### 关于软键盘收起的逻辑说明
......
......@@ -87,7 +87,7 @@ export default {
- H5 平台只能在用户交互时修改 focus 生效。
- 如果遇到 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"```
- 如需禁止点击其他位置收起键盘的默认行为,可以监听`touch`事件并使用`prevent`修饰符(仅支持App、H5,其他平台可以通过设置`focus`来使输入框重新获取焦点),例如在确认按钮上使用:```@touchend.prevent="onTap"```
- js中给textarea组件赋值为字符串,在字符串中加\n可实现换行。
```
......
......@@ -67,7 +67,7 @@
- App 端使用 uni.web-view.js 的最低版为 [uni.webview.1.5.2.js](https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js)
- App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 `uni-app 项目根目录->hybrid->html` 文件夹下或者 `static` 目录下,如下为一个加载本地网页的`uni-app`项目文件目录示例:
- nvue `web-view` 必须指定样式宽高
- V3 编译模式,网页向应用 `postMessage` 为实时消息
- App 网页向应用 `postMessage` 为实时消息
- app-nvue `web-view` 默认没有大小,可以通过样式设置大小,如果想充满整个窗口,设置 `flex: 1` 即可,标题栏不会自动显示 `web-view` 页面中的 title。如果想充满整个窗口且想要显示标题推荐使用 vue 页面的 `web-view`(默认充满屏幕不可控制大小), 想自定义 `web-view` 大小使用 nvue `web-view`
<pre v-pre="" data-lang="">
......@@ -294,7 +294,7 @@ var wv;//计划创建的webview
export default {
onReady() {
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
setTimeout(function() {
wv = currentWebview.children()[0]
wv.setStyle({top:150,height:300})
......@@ -322,7 +322,7 @@ export default {
top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
})
wv.loadURL("https://www.baidu.com")
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
currentWebview.append(wv);//一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
setTimeout(function() {
console.log(wv.getStyle())
......
......@@ -460,7 +460,7 @@ uni-app 提供内置 CSS 变量
- 支持 base64 格式图片。
- 支持网络路径图片。
- 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前,也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
- 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。
- 使用本地路径背景图片需注意:
1. 为方便开发者,在背景图片小于 40kb 时,``uni-app`` 编译到不支持本地背景图的平台时,会自动将其转化为 base64 格式;
2. 图片大于等于 40kb,会有性能问题,不建议使用太大的背景图,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。
......@@ -481,7 +481,7 @@ uni-app 提供内置 CSS 变量
- 支持 base64 格式字体图标。
- 支持网络路径字体图标。
- 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前,也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
- 小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。
- 网络路径必须加协议头 ``https``。
- 从 [http://www.iconfont.cn](http://www.iconfont.cn) 上拷贝的代码,默认是没加协议头的。
- 从 [http://www.iconfont.cn](http://www.iconfont.cn) 上下载的字体文件,都是同名字体(字体名都叫iconfont,安装字体文件时可以看到),在nvue内使用时需要注意,此字体名重复可能会显示不正常,可以使用工具修改。
......@@ -1232,7 +1232,7 @@ export default {
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(2.5.5+,仅支持vue,并要求v3编译器)|√|x|x|x|x|x|
|√(2.5.5+,仅支持vue)|√|x|x|x|x|x|
### 使用方式
......
......@@ -48,7 +48,7 @@ H5没有原生组件概念问题,非H5端有原生组件并引发了原生组
### H5正常但小程序异常的可能性
1. 同上
2. v-html在h5和app-vue(v3编译模式)均支持,但小程序不支持
2. v-html在h5和app-vue均支持,但小程序不支持
3. 小程序要求连接的网址都要配白名单
### 小程序正常但App异常的可能性
......@@ -70,11 +70,6 @@ vue页面在App端的渲染引擎默认是系统webview(不是手机自带浏
### App正常,小程序、H5异常的可能性
1. 代码中使用了App端特有的plus、Native.js、subNVue、原生插件等功能
### App(v2)与App(v3)差异说明
1. App(v2)默认template中使用了未定义或未初始化的数据,运行不会报错,且不影响后续节点渲染。App(v3)运行时,会直接告警,并报错(标准的vue渲染逻辑,同H5),且影响后续节点数据的渲染,错误信息通常显示为`undefined is not an object, evaluating(xxx.xxx.xxx)`
2. App(v2)默认隔离组件样式(组件间样式不会互相影响),App(v3)版本默认不隔离。目前发现开发者v2升级v3反馈的样式问题大多由此导致,v3版本将于`2.6.14-alpha`进行调整默认隔离组件间样式。
### 使用 Vue.js 的注意
1. `uni-app` 基于`Vue 2.0`实现,开发者需注意Vue 1.0 -> 2.0 的使用差异,详见[从 Vue 1.x 迁移](https://cn.vuejs.org/v2/guide/migration.html)
......
......@@ -34,7 +34,7 @@ nvue的组件和API写法与vue页面一致,其内置组件还比vue页面内
7. 如深度使用```map```组件,建议使用nvue。除了层级问题,App端nvue文件的map功能更完善,和小程序拉齐度更高,多端一致性更好。
8. 如深度使用```video```,建议使用nvue。比如如下2个场景:video内嵌到swiper中,以实现抖音式视频滑动切换,例子见[插件市场](https://ext.dcloud.net.cn/search?q=%E4%BB%BF%E6%8A%96%E9%9F%B3);nvue的视频全屏后,通过```cover-view```实现内容覆盖,比如增加文字标题、分享按钮。
9. 直播推流:nvue下有```live-pusher```组件,和小程序对齐,功能更完善,也没有层级问题。
10. 对App启动速度要求极致化。App端v3编译器模式下,如果首页使用nvue且在manifest里配置fast模式,那么App的启动速度可以控制在1秒左右。而使用vue页面的话,App的启动速度一般是3秒起,取决于你的代码性能和体积。
10. 对App启动速度要求极致化。App端如果首页使用nvue且在manifest里配置fast模式,那么App的启动速度可以控制在1秒左右。而使用vue页面的话,App的启动速度一般是3秒起,取决于你的代码性能和体积。
但注意,在某些场景下,nvue不如vue页面,如下:
1. ```canvas```。nvue的canvas性能不高,尤其是Android App平台,所以这个组件干脆没有内置,而是需要单独引入。操作canvas动画,最高性能的方式是使用vue页面的renderjs技术,在hello uni-app里的canvas示例就是如此。
......
......@@ -140,9 +140,9 @@ Android上popin动画时,老窗体会有一个半透明消失的效果。这
##### 优化启动速度
* 工程代码越多,包括背景图和本地字体文件越大,对小程序启动速度有影响,应注意控制体积。<image>组件引用的前景图不影响性能。app端在v3以前也存在和小程序一样的问题,但v3起解决了这个问题。
* 工程代码越多,包括背景图和本地字体文件越大,对小程序启动速度有影响,应注意控制体积。<image>组件引用的前景图不影响性能。
* App端的 splash 关闭有白屏检测机制,如果首页一直白屏或首页本身就是一个空的中转页面,可能会造成 splash 10秒才关闭,可参考此文解决[https://ask.dcloud.net.cn/article/35565](https://ask.dcloud.net.cn/article/35565)
* App端使用v3编译器,首页为nvue页面时,并设置为[fast启动模式](https://ask.dcloud.net.cn/article/36749),此时App启动速度最快。
* App端,首页为nvue页面时,并设置为[fast启动模式](https://ask.dcloud.net.cn/article/36749),此时App启动速度最快。
* App设置为纯nvue项目(manifest里设置app-plus下的renderer:"native"),这种项目的启动速度更快,2秒即可完成启动。因为它整个应用都使用原生渲染,不加载基于webview的那套框架。
##### 优化包体积
......@@ -151,5 +151,4 @@ Android上popin动画时,老窗体会有一个半透明消失的效果。这
* uni-app的H5端,自带了vue.js、vue-router及部分es6 polyfill库,这部分的体积gzip后只有92k,和web开发使用vue基本一致。而内置组件ui库(如picker、switch等)、小程序的对齐js api等,相当于一个完善的大型ui库。但大多数应用不会用到所有内置组件和API。由此uni-app提供了摇树优化机制,未摇树优化前的uni-app整体包体积约500k,服务器部署gzip后162k。开启摇树优化需在manifest配置,[详情](https://uniapp.dcloud.io/collocation/manifest?id=optimization)
* uni-app的App端,因为自带了一个独立v8引擎和小程序框架,所以比HTML5Plus或mui等普通hybrid的App引擎体积要大。Android基础引擎约9M。App还提供了扩展模块,比如地图、蓝牙等,打包时如不需要这些模块,可以裁剪掉,以缩小发行包体积。在 manifest.json-App模块权限 里可以选择。
* App端支持如果选择纯nvue项目(manifest里设置app-plus下的renderer:"native"),包体积可以进一步减少2M左右。
* App端在HBuilderX 2.7后,App端下掉了非v3的编译模式,包体积下降了3M。
* uni-app的App-Android端有so库的概念,支持不同的cpu类型的so库越多,包越大。在HBuilderX 2.7以前,Android app默认包含arm32和x86两个cpu的支持so库。包体积比较大。如果你在意体积控制,可以在manifest里去掉x86 cpu的支持(manifest可视化界面-App其他设置里选择cpu),这可以减少包体积到9M。从HBuilderX 2.7起,默认不再包含x86,如有需求请自行在manifest里勾选后打包。一般手机都是arm的,涉及x86 cpu场景很少,包括:个别少见的Android pad、as的模拟器里选择x86类型。
## 此文档已迁移
**新文档链接:[Vue教程](/vue-basics)**
**************************************
``uni-app`` 在发布到H5时支持所有vue的语法;发布到App和小程序时,由于平台限制,无法实现全部vue语法,但``uni-app``仍是是对vue语法支持度最高的跨端框架。本文将详细讲解差异。
相比Web平台, ``Vue.js````uni-app`` 中使用差异主要集中在两个方面:
- 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动、页面显示等生命周期
- 受限:相比web平台,在小程序和App端部分功能受限,具体见下。
- v3版本App端可以使用更多的vue特性,[详见](https://ask.dcloud.net.cn/article/36599)
## 生命周期
``uni-app`` 完整支持 ``Vue`` 实例的生命周期,同时还新增 [应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)[页面生命周期](/collocation/frame/lifecycle?id=页面生命周期)
详见Vue官方文档:[生命周期钩子](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90)
## 模板语法
``uni-app`` 完整支持 ``Vue`` 模板语法。
详见Vue官方文档:[模板语法](https://cn.vuejs.org/v2/guide/syntax.html)
## data 属性
``data`` 必须声明为返回一个初始数据对象的函数(注意函数内返回的数据对象不要直接引用函数外的对象);否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。
```javascript
//正确用法,使用函数返回对象
data() {
return {
title: 'Hello'
}
}
//错误写法,会导致再次打开页面时,显示上次数据
data: {
title: 'Hello'
}
//错误写法,同样会导致多个组件实例对象数据相互影响
const obj = {
title: 'Hello'
}
data() {
return {
obj
}
}
```
### 注意事项
* 由于小程序端不支持更新属性值为 undefined,框架内部将替换 undefined 为 null,此时可能出现预期之外的情况([相关反馈](https://github.com/dcloudio/uni-app/issues/1460)),需要自行判断一下。
## 全局变量
实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考:[uni-app全局变量的几种实现方式](https://ask.dcloud.net.cn/article/35021)
## 其他配置
Vue 组件编译到小程序平台的时候会编译为对应平台的组件,部分小程序平台支持 options 选项(具体选项参考对应小程序平台文档的自定义组件部分),一般情况默认即可,如有特殊需求可在 Vue 组件中增加 options 属性。
```js
export default {
props: ['data'],
data(){ return { } },
options: {
// 微信小程序中 options 选项
multipleSlots: true, // 在组件定义时的选项中启动多slot支持,默认启用
styleIsolation: "isolated", // 启动样式隔离。当使用页面自定义组件,希望父组件影响子组件样式时可能需要配置。具体配置选项参见:微信小程序自定义组件的样式
addGlobalClass: true, // 表示页面样式将影响到自定义组件,但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
virtualHost: true, // 将自定义节点设置成虚拟的,更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等,而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
}
}
```
## Class 与 Style 绑定
为节约性能,我们将 ``Class````Style`` 的表达式通过 ``compiler`` 硬编码到 ``uni-app`` 中,支持语法和转换效果如下:
class 支持的语法:
```html
<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
```
style 支持的语法:
```html
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
```
非H5端不支持 [Vue官方文档:Class 与 Style 绑定](https://cn.vuejs.org/v2/guide/class-and-style.html) 中的 ``classObject````styleObject`` 语法。
不支持示例:
```html
<template>
<view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view>
</template>
<script>
export default {
data() {
return {
activeClass: {
'active': true,
'text-danger': false
},
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
}
}
</script>
```
**注意:以``:style=""``这样的方式设置px像素值,其值为实际像素,不会被编译器转换。**
此外还可以用 ``computed`` 方法生成 ``class`` 或者 ``style`` 字符串,插入到页面中,举例说明:
```html
<template>
<!-- 支持 -->
<view class="container" :class="computedClassStr"></view>
<view class="container" :class="{active: isActive}"></view>
<!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>
</template>
<script>
export default {
data () {
return {
isActive: true
}
},
computed: {
computedClassStr () {
return this.isActive ? 'active' : ''
},
computedClassObject () {
return { active: this.isActive }
}
}
}
</script>
```
## 计算属性
完整支持 [Vue官方文档:计算属性](https://cn.vuejs.org/v2/guide/computed.html)
## 条件渲染
完整支持 [Vue官方文档:条件渲染](https://cn.vuejs.org/v2/guide/conditional.html)
## 列表渲染
完整vue列表渲染 [Vue官方文档:列表渲染](https://cn.vuejs.org/v2/guide/list.html)
### key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 ``<input>`` 中的输入内容,``<switch>`` 的选中状态),需要使用 ``:key`` 来指定列表中项目的唯一的标识符。
``:key`` 的值以两种形式提供
- 使用 ``v-for`` 循环 ``array````item`` 的某个 ``property``,该 ``property`` 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 使用 ``v-for`` 循环中 ``item`` 本身,这时需要 ``item`` 本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候,会校正带有 ``key`` 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
**如不提供 ``:key``,会报一个 ``warning``, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。**
**示例:**
```html
<template>
<view>
<!-- array 中 item 的某个 property -->
<view v-for="(item,index) in objectArray" :key="item.id">
{{index +':'+ item.name}}
</view>
<!-- item 本身是一个唯一的字符串或者数字时,可以使用 item 本身 -->
<view v-for="(item,index) in stringArray" :key="item">
{{index +':'+ item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
objectArray:[{
id:0,
name:'li ming'
},{
id:1,
name:'wang peng'
}],
stringArray:['a','b','c']
}
}
}
</script>
```
### 注意事项
* 在H5平台 使用 v-for 循环整数时和其他平台存在差异,如 `v-for="(item, index) in 10"` 中,在H5平台 item 从 1 开始,其他平台 item 从 0 开始,可使用第二个参数 index 来保持一致。
* 在非H5平台 循环对象时不支持第三个参数,如 `v-for="(value, name, index) in object"` 中,index 参数是不支持的。
* 小程序端数据为差量更新方式,由于小程序不支持删除对象属性,使用的设置值为 null 的方式替代,导致遍历时可能出现不符合预期的情况,需要自行过滤一下值为 null 的数据([相关反馈](https://ask.dcloud.net.cn/question/103269))。
## 事件处理器
几乎全支持 [Vue官方文档:事件处理器](https://cn.vuejs.org/v2/guide/events.html)
```javascript
// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap', //推荐使用longpress代替
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}
```
**注意:**
<!-- * 事件映射表中没有的原生事件也可以使用,例如``map``组件的``regionchange`` 事件直接在组件上写成 ``@regionchange``,同时这个事件也非常特殊,它的 ``event`` ``type````begin````end`` 两个,导致我们无法在``handleProxy`` 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既
``<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>``。 -->
* 为兼容各端,事件需使用 ``v-on````@`` 的方式绑定,请勿使用小程序端的``bind````catch`` 进行事件绑定。
* 事件修饰符
* ``.stop``:各平台均支持, 使用时会阻止事件冒泡,在非 H5 端同时也会阻止事件的默认行为
* ``.native``:监听原生事件,仅在 H5 平台支持
* ``.prevent`` 仅在 H5 平台支持
* ``.self``:仅在 H5 平台支持
* ``.once``:仅在 H5 平台支持
* ``.capture``:仅在 H5 平台支持
* ``.passive``:仅在 H5 平台支持
* 若需要禁止蒙版下的页面滚动,可使用 ``@touchmove.stop.prevent="moveHandle"``,moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。
```html
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
```
* 按键修饰符:``uni-app``运行在手机端,没有键盘事件,所以不支持按键修饰符。
## 表单控件绑定
支持 [Vue官方文档:表单控件绑定](https://cn.vuejs.org/v2/guide/forms.html)
建议开发过程中直接使用 [uni-app:表单组件](component/button)。用法示例:
H5 的select 标签用 picker 组件进行代替
```html
<template>
<view>
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
</view>
</template>
<script>
export default {
data () {
return {
index: 0,
array: ['A', 'B', 'C']
}
},
methods: {
bindPickerChange (e) {
console.log(e)
}
}
}
</script>
```
表单元素 radio 用 radio-group 组件进行代替
```html
<template>
<view>
<radio-group class="radio-group" @change="radioChange">
<label class="radio" v-for="(item, index) in items" :key="item.name">
<radio :value="item.name" :checked="item.checked"/> {{item.value}}
</label>
</radio-group>
</view>
</template>
<script>
export default {
data () {
return {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'}
]
}
},
methods: {
radioChange (e) {
console.log('radio发生change事件,携带value值为:', e.target.value)
}
}
}
</script>
```
## v-html指令
App端(vue页面[V3编译模式](https://ask.dcloud.net.cn/article/36599))和H5端支持v-html,其他端不支持v-html。
跨端的富文本处理方案详见:[https://ask.dcloud.net.cn/article/35772](https://ask.dcloud.net.cn/article/35772)
## 组件
### Vue 组件
组件是 ``vue`` 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升。
uni-app搭建了组件的插件市场,可大幅提升开发者的效率。[https://ext.dcloud.net.cn/](https://ext.dcloud.net.cn/)
在项目的/component目录下存放组件,在要显示组件的页面中则分为3步:导入、注册和使用。
可以这个[评分组件](https://ext.dcloud.net.cn/plugin?id=33)的使用为例,了解vue组件的使用方式。
```html
<template>
<view>
<uni-rate value="2"></uni-rate> <!-- 第三步,使用组件。并传值点亮2颗星 -->
</view>
</template>
<script>
import uniRate from "@/components/uni-rate/uni-rate.vue" //第一步,导入组件
export default {
components: {
uniRate //第二步,注册组件
}
}
</script>
```
- `2.5.0+`版本支持在pages.json内引入组件,[详见](/collocation/pages?id=easycom)
- **uni-app只支持vue单文件组件(.vue 组件)**。其他的诸如:动态组件,自定义 ``render``,和``<script type="text/x-template">`` 字符串模版等,在非H5端不支持。
详细的小程序端不支持列表:
* 作用域插槽(HBuilderX 3.1.19 以下仅支持解构插槽且不可使用作用域外数据以及使用复杂的表达式)
* 动态组件
* 异步组件
* ``inline-template``
* ``X-Templates``
* ``keep-alive``(App端也未支持)
* ``transition`` (可使用 [animation](/api/ui/animation) 或 CSS 动画替代)
[Vue官方文档参考:组件](https://cn.vuejs.org/v2/guide/components.html)
### uni-app内置基础组件
``uni-app`` 内置了小程序的所有[组件](component/),比如: ``picker``,``map`` 等,需要注意的是原生组件上的事件绑定,需要以 ``vue`` 的事件绑定语法来绑定,如 ``bindchange="eventName"`` 事件,需要写成 ``@change="eventName"``
**示例**
```html
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
```
### 全局组件
```uni-app``` 支持配置全局组件,需在 ``main.js`` 里进行全局注册,注册后就可在所有页面里使用该组件。
**注意**
- ``Vue.component`` 的第一个参数必须是静态的字符串。
- nvue页面暂不支持全局组件
**示例**
main.js 里进行全局导入和注册
```javascript
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)
```
index.vue 里可直接使用组件
```html
<template>
<view>
<page-head></page-head>
</view>
</template>
```
### 命名限制
在 `uni-app` 中以下这些作为保留关键字,不可作为组件名。
- `a`
- `canvas`
- `cell`
- `content`
- `countdown`
- `datepicker`
- `div`
- `element`
- `embed`
- `header`
- `image`
- `img`
- `indicator`
- `input`
- `link`
- `list`
- `loading-indicator`
- `loading`
- `marquee`
- `meta`
- `refresh`
- `richtext`
- `script`
- `scrollable`
- `scroller`
- `select`
- `slider-neighbor`
- `slider`
- `slot`
- `span`
- `spinner`
- `style`
- `svg`
- `switch`
- `tabbar`
- `tabheader`
- `template`
- `text`
- `textarea`
- `timepicker`
- `transition-group`
- `transition`
- `video`
- `view`
- `web`
**Tips**
- 除以上列表中的名称外,标准的 HTML 及 SVG 标签名也不能作为组件名。
- 在百度小程序中使用时,不要在 data 内使用 hidden ,可能会导致渲染错误
- `methods`中不可使用与生命周期同名的方法名
## 常见问题
**1. 如何获取上个页面传递的数据**
在 ``onLoad`` 里得到,``onLoad`` 的参数是其他页面打开当前页面所传递的数据。
**2. 如何设置全局的数据和全局的方法**
``uni-app`` 内置了 [vuex](https://vuex.vuejs.org/zh/guide/) ,在app里的使用,可参考``hello-uniapp`` ``store/index.js``。
```javascript
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
store,...
})
...
//test.vue 使用时:
import {mapState,mapMutations} from 'vuex'
```
**3. 如何捕获 app 的 onError**
由于 ``onError`` 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 ``app`` 的根组件上添加名为 ``onError`` 的回调函数即可。如下:
```javascript
export default {
// 只有 app 才会有 onLaunch 的生命周期
onLaunch () {
// ...
},
// 捕获 app error
onError (err) {
console.log(err)
}
}
```
**4. 组件属性设置不生效解决办法**
当重复设置某些属性为相同的值时,不会同步到view层。
例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。
这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。
解决办法有两种(以scroll-view组件为例):
* 监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值
```html
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
```
```js
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
}
}
}
```
* 监听scroll事件,获取组件内部变化的值,实时更新其绑定值
```html
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
```
```js
export default {
data() {
return {
scrollTop: 0,
}
},
methods: {
scroll: function(e) {
// 如果使用此方法,请自行增加防抖处理
this.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = 0
}
}
}
```
第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。
## Vue特性支持表
#### 全局配置
|Vue 全局配置 |H5 |App端旧版|App端V3|微信小程序|说明 |
|-- |-- |-- |-- |-- |-- |
|Vue.config.silent |支持 |支持 |支持 |支持 |- |
|Vue.config.optionMergeStrategies |支持 |支持 |支持 |支持 |- |
|Vue.config.devtools |支持 |不支持 |不支持 |不支持 |只在`Web`环境下支持 |
|Vue.config.errorHandler |支持 |支持 |支持 |支持 |- |
|Vue.config.warnHandler |支持 |支持 |支持 |支持 |- |
|Vue.config.ignoredElements |支持 |支持 |支持 |支持 |强烈不推荐,会覆盖`uni-app`框架配置的内置组件|
|Vue.config.keyCodes |支持 |不支持 |不支持 |不支持 |- |
|Vue.config.performance |支持 |不支持 |不支持 |不支持 |只在`Web`环境下支持 |
|Vue.config.productionTip |支持 |支持 |支持 |支持 |- |
#### 全局 API
|Vue 全局 API |H5 |App端旧版|App端V3|微信小程序|说明 |
|-- |-- |-- |-- |-- |-- |
|Vue.extend |支持 |不支持 |支持 |不支持 |不可作为组件使用 |
|Vue.nextTick |支持 |不支持 |不支持 |不支持 |- |
|Vue.set |支持 |支持 |支持 |支持 |- |
|Vue.delete |支持 |支持 |支持 |支持 |- |
|Vue.directive|支持 |不支持 |支持 |不支持 |- |
|Vue.filter |支持 |支持 |支持 |支持 |App端旧版不可以在`class`中使用 |
|Vue.component|支持 |支持 |支持 |支持 |- |
|Vue.use |支持 |支持 |支持 |支持 |- |
|Vue.mixin |支持 |支持 |支持 |支持 |- |
|Vue.version |支持 |支持 |支持 |支持 |- |
|Vue.compile |支持 |不支持 |不支持 |不支持 |`uni-app`使用的`vue`是只包含运行时的版本 |
#### 选项
|Vue 选项 |H5 |App端旧版|App端V3|微信小程序|说明 |
|-- |-- |-- |-- |-- |-- |
|data |支持 |支持 |支持 |支持 |- |
|props |支持 |支持 |支持 |支持 |App端旧版不可以传递函数 |
|propsData |支持 |支持 |支持 |支持 |- |
|computed |支持 |支持 |支持 |支持 |- |
|methods |支持 |支持 |支持 |支持 |- |
|watch |支持 |支持 |支持 |支持 |- |
|el |支持 |不支持 |不支持 |不支持 | |
|template |支持 |不支持 |不支持 |不支持 |`uni-app`使用的`vue`是只包含运行时的版本 |
|render |支持 |不支持 |不支持 |不支持 |- |
|renderError |支持 |不支持 |不支持 |不支持 |- |
|directives |支持 |不支持 |支持 |不支持 |- |
|filters |支持 |支持 |支持 |支持 |App端旧版不可以在`class`中使用 |
|components |支持 |支持 |支持 |支持 |- |
|parent |支持 |支持 |支持 |支持 |不推荐 |
|mixins |支持 |支持 |支持 |支持 |- |
|extends |支持 |支持 |支持 |支持 |- |
|provide/inject |支持 |支持 |支持 |支持 |App端旧版部分支持 |
|name |支持 |支持 |支持 |支持 |App端旧版不支持递归组件 |
|delimiters |支持 |不支持 |不支持 |不支持 |- |
|functional |支持 |不支持 |不支持 |不支持 |- |
|model |支持 |不支持 |支持 |不支持 |- |
|inheritAttrs |支持 |不支持 |支持 |不支持 |- |
|comments |支持 |不支持 |不支持 |不支持 |- |
#### 生命周期钩子
|Vue 生命周期钩子 |H5 |App端旧版|App端V3|微信小程序|说明 |
|-- |-- |-- |-- |-- |-- |
|beforeCreate |支持 |支持 |支持 |支持 |- |
|created |支持 |支持 |支持 |支持 |- |
|beforeMount |支持 |支持 |支持 |支持 |- |
|mounted |支持 |支持 |支持 |支持 |- |
|beforeUpdate |支持 |支持 |支持 |支持 |- |
|updated |支持 |支持 |支持 |支持 |- |
|activated |支持 |不支持 |支持 |不支持 |- |
|deactivated |支持 |不支持 |支持 |不支持 |- |
|beforeDestroy |支持 |支持 |支持 |支持 |- |
|destroyed |支持 |支持 |支持 |支持 |- |
|errorCaptured |支持 |支持 |支持 |支持 |- |
#### 实例属性
|Vue 实例属性 |H5 |App端旧版|App端V3|微信小程序|说明 |
|-- |-- |-- |-- |-- |-- |
|vm.$data |支持 |支持 |支持 |支持 |- |
|vm.$props |支持 |支持 |支持 |支持 |- |
|vm.$el |支持 |不支持 |不支持 |不支持 |- |
|vm.$options |支持 |支持 |支持 |支持 |- |
|vm.$parent |支持 |支持 |支持 |支持 |H5端 `view`、`text` 等内置标签是以 Vue 组件方式实现,`$parent` 会获取这些到内置组件,导致的问题是 `this.$parent` 与其他平台不一致,解决方式是使用 `this.$parent.$parent` 获取或自定义组件根节点由 `view` 改为 `div`|
|vm.$root |支持 |支持 |支持 |支持 |- |
|vm.$children |支持 |支持 |支持 |支持 |H5端 `view`、`text` 等内置标签是以 Vue 组件方式实现,`$children` 会获取到这些内置组件,导致的问题是 `this.$children` 与其他平台不一致,解决方式是使用 `this.$children.$children` 获取或自定义组件根节点由 `view` 改为 `div`|
|vm.$slots |支持 |支持 |不支持 |支持 |App端旧版获取值为`{'slotName':true/false}`比如:`{"footer":true}` |
|vm.$scopedSlots|支持 |支持 |支持 |支持 |App端旧版获取值为`{'slotName':true/false}`比如:`{"footer":true}` |
|vm.$refs |支持 |支持 |支持 |支持 |非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text)|
|vm.$isServer |支持 |不支持 |支持 |不支持 |App端V3总是返回false |
|vm.$attrs |支持 |不支持 |支持 |不支持 |- |
|vm.$listeners |支持 |不支持 |支持 |不支持 |- |
#### 实例方法
|Vue 实例方法 |H5 |App端旧版|App端V3|微信小程序|说明 |
|-- |-- |-- |-- |-- |-- |
|vm.$watch() |支持 |支持 |支持 |支持 |- |
|vm.$set() |支持 |支持 |支持 |支持 |- |
|vm.$delete() |支持 |支持 |支持 |支持 |- |
|vm.$on() |支持 |支持 |支持 |支持 |- |
|vm.$once() |支持 |支持 |支持 |支持 |- |
|vm.$off() |支持 |支持 |支持 |支持 |- |
|vm.$emit() |支持 |支持 |支持 |支持 |- |
|vm.$mount() |支持 |不支持 |不支持 |不支持 |- |
|vm.$forceUpdate()|支持 |支持 |支持 |支持 |- |
|vm.$nextTick() |支持 |支持 |支持 |支持 |- |
|vm.$destroy() |支持 |支持 |支持 |支持 |- |
#### 模板指令
|Vue 指令 |H5 |App端旧版|App端V3|微信小程序|说明 |
|-- |-- |-- |-- |-- |-- |
|v-text |支持 |支持 |支持 |支持 |- |
|v-html |支持 |不支持 |支持 |不支持 |- |
|v-show |支持 |支持 |支持 |支持 |- |
|v-if |支持 |支持 |支持 |支持 |- |
|v-else |支持 |支持 |支持 |支持 |- |
|v-else-if|支持 |支持 |支持 |支持 |- |
|v-for |支持 |支持 |支持 |支持 |- |
|v-on |支持 |支持 |支持 |支持 |- |
|v-bind |支持 |支持 |支持 |支持 |App端旧版不支持`v-bind="{key:value}"`类似用法|
|v-model |支持 |支持 |支持 |支持 |- |
|v-pre |支持 |不支持 |支持 |不支持 |- |
|v-cloak |支持 |不支持 |不支持 |不支持 |- |
|v-once |支持 |不支持 |支持 |不支持 |- |
#### 特殊属性
|Vue 特殊属性 |H5 |App端旧版|App端V3|微信小程序|说明 |
|-- |-- |-- |-- |-- |-- |
|key |支持 |支持 |支持 |支持 |App端旧版不支持表达式|
|ref |支持 |支持 |支持 |支持 |- |
|is |支持 |不支持 |支持 |不支持 |- |
#### 内置组件
|Vue 内置组件 |H5 |App端旧版|App端V3|微信小程序 |说明 |
|-- |-- |-- |-- |-- |-- |
|component |支持 |不支持 |支持 |不支持 |- |
|transition |支持 |不支持 |不支持 |不支持 |- |
|transition-group |支持 |不支持 |不支持 |不支持 |- |
|keep-alive |支持 |不支持 |不支持 |不支持 |- |
|slot |支持 |支持 |支持 |支持 |- |
......@@ -25,7 +25,7 @@
|Vue.set | 向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新 [详情](https://cn.vuejs.org/v2/api/#Vue-set)|√ | √|√ | |
|Vue.delete | 删除对象的 property。如果对象是响应式的,确保删除能触发更新视图 [详情](https://cn.vuejs.org/v2/api/#Vue-delete) |√ | √ | √ | |
|Vue.directive | 注册或获取全局指令 [详情](https://cn.vuejs.org/v2/api/#Vue-directive)|√ |√ | x | |
|Vue.filter | 注册或获取全局过滤器 [详情](https://cn.vuejs.org/v2/api/#Vue-filter)|√ |√ | x |App端旧版不可以在class中使用 |
|Vue.filter | 注册或获取全局过滤器 [详情](https://cn.vuejs.org/v2/api/#Vue-filter)|√ |√ | x | |
|Vue.component | 注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称 [详情](https://cn.vuejs.org/v2/api/#Vue-component) |√ | √ | √ | |
|Vue.use | 安装 Vue.js 插件 [详情](https://cn.vuejs.org/v2/api/#Vue-use) |√ | √ | √ | |
|Vue.mixin | 全局注册一个混入,影响注册之后所有创建的每个 Vue 实例 [详情](https://cn.vuejs.org/v2/api/#Vue-mixin) |√ |√ | √ | |
......@@ -39,7 +39,7 @@
|Vue 选项 |描述 |H5 |App端|微信小程序 |说明 |
| -- | -- | -- |-- |-- | -- |
|data | Vue 实例的数据对象 [详情](https://cn.vuejs.org/v2/api/#data) |√ |√ | √ | |
|props | props 可以是数组或对象,用于接收来自父组件的数据 [详情](https://cn.vuejs.org/v2/api/#props) |√ |√ | √ |App端旧版不可以传递函数 |
|props | props 可以是数组或对象,用于接收来自父组件的数据 [详情](https://cn.vuejs.org/v2/api/#props) |√ |√ | √ | |
|propsData | 创建实例时传递 props。主要作用是方便测试 [详情](https://cn.vuejs.org/v2/api/#propsData) |√ | √ | √ | |
|computed | 计算属性将被混入到 Vue 实例中 [详情](https://cn.vuejs.org/v2/api/#computed) |√ | √ | √ | |
|methods | methods 将被混入到 Vue 实例中 [详情](https://cn.vuejs.org/v2/api/#methods) |√ | √ | √ | |
......@@ -49,13 +49,13 @@
|render | 字符串模板的代替方案,该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。[详情](https://cn.vuejs.org/v2/api/#render) |√ | x | x | |
|renderError | 当 render 函数遭遇错误时,提供另外一种渲染输出,只在开发者环境下工作 [详情](https://cn.vuejs.org/v2/api/#renderError) |√ | x | x | |
|directives | 包含 Vue 实例可用指令的哈希表 [详情](https://cn.vuejs.org/v2/api/#directives) |√ | √ | x | |
|filters | 包含 Vue 实例可用过滤器的哈希表 [详情](https://cn.vuejs.org/v2/api/#filters) |√ | √ | √ |App端旧版不可以在class中使用 |
|filters | 包含 Vue 实例可用过滤器的哈希表 [详情](https://cn.vuejs.org/v2/api/#filters) |√ | √ | √ | |
|components | 包含 Vue 实例可用组件的哈希表 [详情](https://cn.vuejs.org/v2/api/#components) |√ | √ | √ | |
|parent | 指定已创建的实例之父实例,在两者之间建立父子关系 [详情](https://cn.vuejs.org/v2/api/#parent) |√ | √ | √ |不推荐 |
|mixins | 选项接收一个混入对象的数组 [详情](https://cn.vuejs.org/v2/api/#mixins) |√ | √ | √ | |
|extends | 允许声明扩展另一个组件 [详情](https://cn.vuejs.org/v2/api/#extends) |√ | √ | √ | |
|provide/inject | 允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效 [详情](https://cn.vuejs.org/v2/api/#provide-inject) |√ |√ | √ |App端旧版部分支持 |
|name | 允许组件模板递归地调用自身 [详情](https://cn.vuejs.org/v2/api/#name) |√ | √ | √ |App端旧版不支持递归组件 |
|provide/inject | 允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效 [详情](https://cn.vuejs.org/v2/api/#provide-inject) |√ |√ | √ | |
|name | 允许组件模板递归地调用自身 [详情](https://cn.vuejs.org/v2/api/#name) |√ | √ | √ | |
|delimiters | 改变纯文本插入分隔符 [详情](https://cn.vuejs.org/v2/api/#delimiters) |√ |x | x | |
|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 | |
......@@ -99,10 +99,10 @@
|vm.$parent | 父实例,如果当前实例有的话 [详情](https://cn.vuejs.org/v2/api/#vm-parent) |√ |√ | √ |H5端 `view``text` 等内置标签是以 Vue 组件方式实现,`$parent` 会获取这些到内置组件,导致的问题是 `this.$parent` 与其他平台不一致,解决方式是使用 `this.$parent.$parent` 获取或自定义组件根节点由 `view` 改为 `div`|
|vm.$root | 当前组件树的根 Vue 实例 [详情](https://cn.vuejs.org/v2/api/#vm-root) |√ | √ | √ | |
|vm.$children | 当前实例的直接子组件 [详情](https://cn.vuejs.org/v2/api/#vm-children) |√ | √ | √ |H5端 `view``text` 等内置标签是以 Vue 组件方式实现,`$children` 会获取到这些内置组件,导致的问题是 `this.$children` 与其他平台不一致,解决方式是使用 `this.$children.$children` 获取或自定义组件根节点由 `view` 改为 `div`|
|vm.$slots | 用来访问被插槽分发的内容 [详情](https://cn.vuejs.org/v2/api/#vm-slots) |√ | x | √ |App端旧版获取值为{'slotName':true/false}比如:{"footer":true} |
|vm.$scopedSlots | 用来访问作用域插槽 [详情](https://cn.vuejs.org/v2/api/#vm-scopedSlots) |√ | √ | √ |App端旧版获取值为{'slotName':true/false}比如:{"footer":true} |
|vm.$slots | 用来访问被插槽分发的内容 [详情](https://cn.vuejs.org/v2/api/#vm-slots) |√ | x | √ | |
|vm.$scopedSlots | 用来访问作用域插槽 [详情](https://cn.vuejs.org/v2/api/#vm-scopedSlots) |√ | √ | √ | |
|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.$isServer | 当前 Vue 实例是否运行于服务器 [详情](https://cn.vuejs.org/v2/api/#vm-isServer) |√ | √ | x |App端总是返回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 | - |
......@@ -146,7 +146,7 @@
|v-else-if| 表示 v-if 的“else if 块”。可以链式调用 [详情](https://cn.vuejs.org/v2/api/#v-else-if) |√ | √ | √ | |
|v-for | 基于源数据多次渲染元素或模板块 [详情](https://cn.vuejs.org/v2/api/#v-for) |√ | √ | √ | |
|v-on | 绑定事件监听器 [详情](https://cn.vuejs.org/v2/api/#v-on) |√ | √ | √ | |
|v-bind | 动态地绑定一个或多个 attribute,或一个组件 prop 到表达式 [详情](https://cn.vuejs.org/v2/api/#v-bind) |√ | √ | √ |App端旧版不支持v-bind="{key:value}"类似用法 |
|v-bind | 动态地绑定一个或多个 attribute,或一个组件 prop 到表达式 [详情](https://cn.vuejs.org/v2/api/#v-bind) |√ | √ | √ | |
|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 | |
......@@ -160,7 +160,7 @@
|特殊属性 |描述 |H5 |App端|微信小程序 |说明 |
| -- | -- | -- |-- |-- | -- |
|key | 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes [详情](https://cn.vuejs.org/v2/api/#key) |√ | √ | √ |App端旧版不支持表达式 |
|key | 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes [详情](https://cn.vuejs.org/v2/api/#key) |√ | √ | √ | |
|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.
先完成此消息的编辑!
想要评论请 注册