data 属性

data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

全局变量

uni-app 全局变量的几种实现方式

公用模板

定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。

示例如下：
在 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 中引用该模块

<script>  
    import helper from '../../common/helper.js';  

    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + helper.now());  
        },  
        methods: {  
        }  
    }  
</script>

这种方式维护起来比较方便，但是缺点就是每次都需要引入。

挂载 Vue.prototype

将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。
(个人感觉，全局变量少的可以使用该方法)

示例如下：
在 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 中调用

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + this.now());  
        },  
        methods: {  
        }  
    }  
</script>

这种方式，只需要在 main.js 中定义好即可在每个页面中直接调用。

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>