前言
本文主要的主要内容是在uni-app中Vue的用法，具体如下：
Vue支持响应式数据操作，可以实现数据和事件的绑定，同时支持this传递；
uni-app在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期；
实现全局变量的3种方式，即公用模块、挂载Vue.prototype和globalData；
Class和Style的动态绑定，包括对象语法和列表语法的使用。
一、属性和方法的使用
Vue是一套基于JavaScript、用于构建用户界面的渐进式框架，支持响应式数据操作，声明变量后，在变量的值发生变化后，视图会重新渲染，而不需要手动更新DOM节点。
可以看到，所有的页面文件后缀都是.vue，是单文件形式，声明变量在script模块的data属性中声明变量，在template块中使用变量时，需要用{{}}包含变量；
还可以定义方法，执行特定的功能，需要包含在script模块的methods属性中，同时可以在组件中绑定事件，格式为v-on:click="事件名"和@click="事件名"，可以根据条件触发相应的事件。
Web事件和uni-app中的事件对应可参考https://uniapp.dcloud.io/use?id=%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8。
index.vue如下：
1<template> 2 <view class=""> 3 <text>{{name}}</text> 4 <button type="primary" @click="changeName">改变名字</button> 5 </view> 6</template> 7 8<script> 9 export default { 10 data() { 11 return { 12 name: 'Corley' 13 } 14 }, 15 onLoad() { 16 17 }, 18 onShow() { 19 }, 20 onHide() { 21 }, 22 methods: { 23 changeName: function(){ 24 this.name = 'Corlin' 25 } 26 }, 27 } 28</script> 29 30<style> 31</style> 32
其中，this代表Vue实例本身，除了调用属性，还可以调用方法。
显示：
可以看到，实现了改变名字属性。
如果函数中嵌套多个函数，this的传递可能会出现问题，此时可以使用变量替换，如下：
1<template> 2 <view class=""> 3 <text>{{name}}</text> 4 <button type="primary" @click="changeName">改变名字</button> 5 </view> 6</template> 7 8<script> 9 var _self; 10 export default { 11 data() { 12 return { 13 name: 'Corley' 14 } 15 }, 16 onLoad() { 17 _self = this 18 }, 19 onShow() { 20 }, 21 onHide() { 22 }, 23 methods: { 24 changeName: function(){ 25 _self.name = 'Corlin'; 26 setTimeout(function(){ 27 _self.name = 'Corlin...' 28 }, 2000); 29 } 30 }, 31 } 32</script> 33 34<style> 35</style> 36
显示：
可以看到，在点击按钮之后，先改变name，2秒后再次改变，即说明_self代替this成功。
二、Vue生命周期
Vue支持实例生命周期，uni-app在此基础上增加了应用生命周期和页面生命周期。
Vue实例生命周期钩子自动绑定 this 上下文到实例中，因此可以访问数据，对 property 和方法进行运算。 具体如下：
| 函数 | 含义 |
|---|---|
| beforeCreate | 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 |
| created | 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。 |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |
| mounted | 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了 |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子 |
| activated | 被 keep-alive 缓存的组件激活时调用 |
| deactivated | 被 keep-alive 缓存的组件停用时调用 |
| beforeDestroy | 实例销毁之前调用 |
| destroyed | 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。 |
| errorCaptured | 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 |
应用生命周期属于整个uni-app项目，仅可在App.vue中监听，在其它页面监听无效。 具体如下：
| 函数 | 含义 |
|---|---|
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
| onUniNViewMessage | 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（2.8.1+） |
| onPageNotFound | 页面不存在监听函数 |
| onThemeChange | 监听系统主题变化 |
页面生命周期属于某个具体的页面，对当前页面有效。 常见页面生命周期如下：
| 函数 | 含义 |
|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onResize | 监听窗口尺寸变化 |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新，参考示例 |
| onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项 |
| onPageScroll | 监听页面滚动，参数为Object |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数为Object |
三、全局变量
uni-app中实现全局变量有几种实现方式。
1.公用模块
定义一个专用的模块，用来组织和管理这些全局的变量，同时将它们作为常量，在需要的页面引入，如果这些常量需要改变，直接在模块中改变即可，而不需要再在每一个导入的页面手动修改，优化了项目的结构。 例如，在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 constants.js 用于保存公共的变量和方法，一般为常量，很少需要改动，如下：
1const apiUri = 'https://api.jisuapi.com/news/get?channel=头条&start=100&num=20&appkey=66487d31a1xxxxxx'; 2 3const sayHi = function(){ 4 console.log('hello corley') 5} 6 7 8export default { 9 apiUri, 10 sayHi 11}
定义之后，需要通过export default导出，可以供其他页面导入使用。
再在index.vue中导入和使用：
1<template> 2 <view class=""> 3 <text>{{name}}</text> 4 <button type="primary" @click="changeName">改变名字</button> 5 <text>{{link}}</text> 6 </view> 7</template> 8 9<script> 10 var _self; 11 import common from '../../common/constants.js' 12 export default { 13 data() { 14 return { 15 name: 'Corley', 16 link: '' 17 } 18 }, 19 onLoad() { 20 _self = this; 21 common.sayHi(); 22 this.link = common.apiUri 23 }, 24 onShow() { 25 }, 26 onHide() { 27 }, 28 methods: { 29 changeName: function(){ 30 _self.name = 'Corlin'; 31 setTimeout(function(){ 32 _self.name = 'Corlin...' 33 }, 2000); 34 } 35 }, 36 } 37</script> 38 39<style> 40</style> 41
显示：
显然，实现了引用全局变量和方法。
2.挂载 Vue.prototype
将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会继承下来。 这种方式只支持vue页面，同时只需要在 main.js 中定义好即可在每个页面中直接调用。
先在项目的 main.js 中挂载属性或者方法，如下：
1import Vue from 'vue' 2import App from './App' 3 4Vue.config.productionTip = false; 5Vue.prototype.appName = 'uni_demo'; 6 7App.mpType = 'app' 8 9const app = new Vue({ 10 ...App 11}) 12app.$mount() 13
再在index.vue中调用即可，如下：
1<template> 2 <view class=""> 3 <text>{{name}}</text> 4 <button type="primary" @click="changeName">改变名字</button> 5 <text>APP Name: {{app_name}}</text> 6 </view> 7</template> 8 9<script> 10 var _self; 11 import common from '../../common/constants.js' 12 export default { 13 data() { 14 return { 15 name: 'Corley', 16 app_name: '' 17 } 18 }, 19 onLoad() { 20 _self = this; 21 common.sayHi(); 22 this.app_name = this.appName 23 }, 24 onShow() { 25 }, 26 onHide() { 27 }, 28 methods: { 29 changeName: function(){ 30 _self.name = 'Corlin'; 31 setTimeout(function(){ 32 _self.name = 'Corlin...' 33 }, 2000); 34 } 35 }, 36 } 37</script> 38 39<style> 40</style> 41
显示：
显然，成功导入了main.js中定义的变量。
3.globalData
对于小程序来说，还可以使用globalData属性在App.vue声明全局变量，同时支持H5、App等平台，是一种比较简单的全局变量使用方式。
App.vue如下：
1<script> 2 export default { 3 globalData:{ 4 info: 'success' 5 }, 6 onLaunch: function() { 7 console.log('App Launch') 8 }, 9 onShow: function() { 10 console.log('App Show') 11 }, 12 onHide: function() { 13 console.log('App Hide') 14 } 15 } 16</script> 17 18<style> 19 20</style> 21
index.vue如下：
1<template> 2 <view class=""> 3 <text>{{name}}</text> 4 <button type="primary" @click="changeName">改变名字</button> 5 <text>Status: {{status}}</text> 6 </view> 7</template> 8 9<script> 10 var _self; 11 import common from '../../common/constants.js' 12 export default { 13 data() { 14 return { 15 name: 'Corley', 16 status: 'failed' 17 } 18 }, 19 onLoad() { 20 _self = this; 21 common.sayHi(); 22 }, 23 onShow() { 24 }, 25 onHide() { 26 }, 27 methods: { 28 changeName: function(){ 29 _self.name = 'Corlin'; 30 _self.status = getApp().globalData.info; 31 setTimeout(function(){ 32 _self.name = 'Corlin...' 33 }, 2000); 34 } 35 }, 36 } 37</script> 38 39<style> 40</style> 41
显示：
可以看到，获取到了App.vue中定义的全局变量globalData。
除了前面3种方式，还可以通过Vuex实现，具体可参考https://ask.dcloud.net.cn/article/35021。
四、Class 与 Style 绑定
为节约性能，将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中，实现动态绑定class和style属性。
1.对象语法
可以传给 v-bind:class 一个对象，实现动态地切换 class；
也可以在对象中传入更多字段来实现动态切换多个 class。
v-bind:class 可以简写为:class，并且与普通的 class 共存。
index.vue如下：
1<template> 2 <view class=""> 3 <view :class="{active: isActive, fontSize50: isBig}">Hello Corley</view> 4 <button type="primary" @click="changeClass">改变名字</button> 5 </view> 6</template> 7 8<script> 9 var _self; 10 import common from '../../common/constants.js' 11 export default { 12 data() { 13 return { 14 isActive: false, 15 isBig: false 16 } 17 }, 18 onLoad() { 19 _self = this; 20 }, 21 onShow() { 22 }, 23 onHide() { 24 }, 25 methods: { 26 changeClass: function(){ 27 _self.isActive = !_self.isActive; 28 _self.isBig = !_self.isBig; 29 } 30 }, 31 } 32</script> 33 34<style> 35 .active { 36 color: #DD524D; 37 } 38 .fontSize50 { 39 font-size: 50upx; 40 } 41</style> 42
显示：
可以看到，通过对象实现了动态切换class属性。
2.数组语法
可以把一个数组传给 v-bind:class，以应用一个 class 列表，列表的元素可以是变量、字符串、三元运算符或者对象，如下：
1<template> 2 <view class=""> 3 <view :class="['active', 'fontSize50']">江湖林野</view> 4 <view :class="[isActive?'active':'', fontCenter]">奇人异事</view> 5 <view :class="[{back: renderBack}, 'fontSize50']">飞贼走盗</view> 6 <button type="primary" @click="changeClass">改变class</button> 7 </view> 8</template> 9 10<script> 11 var _self; 12 import common from '../../common/constants.js' 13 export default { 14 data() { 15 return { 16 isActive: true, 17 isBig: false, 18 fontCenter: 'fontCenter', 19 back: 'back', 20 renderBack: true 21 } 22 }, 23 onLoad() { 24 _self = this; 25 }, 26 onShow() { 27 }, 28 onHide() { 29 }, 30 methods: { 31 changeClass: function(){ 32 _self.isActive = !_self.isActive; 33 _self.isBig = !_self.isBig; 34 _self.renderBack = !_self.renderBack; 35 } 36 }, 37 } 38</script> 39 40<style> 41 .active { 42 color: #DD524D; 43 } 44 .fontSize50 { 45 font-size: 50upx; 46 } 47 .fontCenter{ 48 text-align: center; 49 } 50 .back{ 51 background-color: #007AFF; 52 } 53</style> 54
显示：
显然，实现了动态切换多个class。
style使用如下：
1<template> 2 <view class=""> 3 <view :class="['active', 'fontSize50']">江湖林野</view> 4 <view :class="[isActive?'active':'', fontCenter]">奇人异事</view> 5 <view :class="[{back: renderBack}, 'fontSize50']">飞贼走盗</view> 6 <view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]">神鬼传说</view> 7 <button type="primary" @click="changeClass">改变class</button> 8 </view> 9</template> 10 11<script> 12 var _self; 13 import common from '../../common/constants.js' 14 export default { 15 data() { 16 return { 17 isActive: true, 18 isBig: false, 19 fontCenter: 'fontCenter', 20 back: 'back', 21 renderBack: true, 22 fontSize: 60, 23 activeColor: '#3039dd' 24 25 } 26 }, 27 onLoad() { 28 _self = this; 29 }, 30 onShow() { 31 }, 32 onHide() { 33 }, 34 methods: { 35 changeClass: function(){ 36 _self.isActive = !_self.isActive; 37 _self.isBig = !_self.isBig; 38 _self.renderBack = !_self.renderBack; 39 _self.fontSize = 30; 40 _self.activeColor = '#23A752' 41 } 42 }, 43 } 44</script> 45 46<style> 47 .active { 48 color: #DD524D; 49 } 50 .fontSize50 { 51 font-size: 50upx; 52 } 53 .fontCenter{ 54 text-align: center; 55 } 56 .back{ 57 background-color: #007AFF; 58 } 59</style> 60
显示：
可以看到，动态修改了行内样式。
总结
作为使用 Vue.js 开发前端应用的框架，uni-app中支持使用Vue语法，发布时也支持大部分甚至全部Vue的语法，在属性方法的使用、Class和Style的动态绑定等方面有很大的一致性，同时uni-app丰富了生命周期，增加了定义全局变量的方法，扩展了功能，有利于快速开发。
本文原文首发来自博客专栏移动应用开发，由本人转发至https://www.helloworld.net/p/r8P1f81CQKCDV，其他平台均属侵权，可点击https://blog.csdn.net/CUFEECR/article/details/112555898查看原文，也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。