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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。