data 属性
data 必须声明为返回一个初始数据对象的函数；不然页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。vue
全局变量
uni-app 全局变量的几种实现方式web
公用模板
定义一个专用的模块，用来组织和管理这些全局的变量，在须要的页面引入。
(我的感受，推荐使用)小程序
示例以下：
在 uni-app 项目根目录下建立 common 目录，而后在 common 目录下新建 helper.js 用于定义公用的方法。数组
const websiteUrl = 'http://uniapp.dcloud.io';
const now = Date.now || function () {
return new Date().getTime();
};
const isArray = Array.isArray || function (obj) {
return obj instanceof Array;
};
export default {
websiteUrl,
now,
isArray
}
接下来在 pages/index/index.vue 中引用该模块app
<script>
import helper from '../../common/helper.js';
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + helper.now());
},
methods: {
}
}
</script>
这种方式维护起来比较方便，可是缺点就是每次都须要引入。ide
挂载 Vue.prototype
将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每一个 Vue 对象都会“继承”下来。
(我的感受，全局变量少的可使用该方法)svg
示例以下：
在 main.js 中挂载属性/方法函数
Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';
Vue.prototype.now = Date.now || function () {
return new Date().getTime();
};
Vue.prototype.isArray = Array.isArray || function (obj) {
return obj instanceof Array;
};
而后在 pages/index/index.vue 中调用this
<script>
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + this.now());
},
methods: {
}
}
</script>
这种方式，只须要在 main.js 中定义好便可在每一个页面中直接调用。url
Tips
- 每一个页面中不要在出现重复的属性或方法名。
- 建议在
Vue.prototype上挂载的属性或方法，能够加一个统一的前缀。好比$url、global_url这样，在阅读代码时也容易与当前页面的内容区分开。
globalData（不推荐使用）
在小程序中能够在 App 上声明 globalData，但在 Vue 中没有这个属性，可使用 API 读写这个值。
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
计算属性
<div id="example">
<p>Original message: "{
{ message }}"</p>
<p>Computed reversed message: "{
{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
结果：
Original message: “Hello”
Computed reversed message: “olleH”
条件渲染
- v-if
- v-else
- v-else-if
- v-show
简单例子
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。
列表渲染
在<template>上使用v-for
相似于v-if，你也能够利用带有v-for 的 <template> 来循环渲染一段包含多个元素的内容。好比：
<ul>
<template v-for="item in items">
<li>{
{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
在 v-for 块中，咱们能够访问全部父做用域的属性。
v-for 还支持一个可选的第二个参数，即当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{
{ parentMessage }} - {
{ index }} - {
{ item.message }}
</li>
</ul>
还能够用第三个参数做为索引：
<div v-for="(value, name, index) in object">
{
{ index }}. {
{ name }}: {
{ value }}
</div>
在 v-for 里使用值范围，v-for 也能够接受整数。在这种状况下，它会把模板重复对应次数。
<div>
<span v-for="n in 10">{
{ n }} </span>
</div>
你也能够用 of 替代 in 做为分隔符
推荐：在遍历对象时使用v-for in，而在遍历数组时使用v-for of
<div v-for="item of items"></div>
事件处理
几乎全支持 Vue官方文档：事件处理器
// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
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'
}
注意：
-
为兼容各端，事件需使用
v-on或@的方式绑定，请勿使用小程序端的bind和catch进行事件绑定。 -
事件修饰符
.stop：各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为.prevent仅在 H5 平台支持.self：仅在 H5 平台支持.once：仅在 H5 平台支持.capture：仅在 H5 平台支持.passive：仅在 H5 平台支持
-
若须要禁止蒙版下的页面滚动，可以使用
@touchmove.stop.prevent="moveHandle"，moveHandle能够用来处理 touchmove 的事件，也能够是一个空函数。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
- 按键修饰符：
uni-app运行在手机端，没有键盘事件，因此不支持按键修饰符
<template/> 和 <block/>
uni-app 支持在
template模板中嵌套<template/>和<block/>，用来进行 列表渲染 和 条件渲染。
<template/>和<block/>并非一个组件，它们仅仅是一个包装元素，不会在页面中作任何渲染，只接受控制属性。
条件渲染例子：
<template>
<view>
<template v-if="test">
<view>test 为 true 时显示</view>
</template>
<template v-else>
<view>test 为 false 时显示</view>
</template>
</view>
</template>
列表渲染例子：
<template>
<view>
<block v-for="(item,index) in list" :key="index">
<view>{
{item}} - {
{index}}</view>
</block>
</view>
</template>
本文同步分享在 博客“_龙衣”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。