uni-app入门,uni-app菜鸟教程
UNI-APP开发(仿饿)开发课程：进入学习
推荐（免费）：uni-app开发教程
文章目录
简介、属性和方法的使用二、Vue的生命周期三、全局变量1、公共模块2、挂载Vue.prototype3.globalData数据四、绑定类和样式1、对象语法2、数组语法总结前言
本文的主要内容是Vue在uni-app中的使用，具体如下：
Vue支持响应式数据操作，可以实现数据和事件的绑定，同时支持这种转移；
Uni-app在Vue实例生命周期中增加了应用生命周期和页面生命周期；
全局变量有三种实现方式，分别是通用模块、挂载Vue.prototype和globalData；
和类风格，包括对象语法和列表语法的使用。
一、属性和方法的使用
Vue是一个基于JavaScript构建用户界面的渐进式框架，支持响应式数据操作。声明变量后，视图将在变量的值改变后重新呈现，无需手动更新DOM节点。
如您所见，所有页面文件都有一个后缀。vue，这是一个单独的文件。声明变量在脚本模块的数据属性中声明变量。在模板块中使用变量时，需要使用{{}}来包含变量；
您还可以定义方法来执行特定的功能，这些功能需要包含在脚本模块的methods属性中。同时可以在组件中以v-on的格式绑定事件：click= event name 和@click= event name ，可以根据条件触发相应的事件。
关于Web事件和uni-app中事件的对应关系，请参考https://uniapp.dcloud.io/use?Id=事件处理程序。
Index.vue如下：
模板
视图class=
text{{name}}/text
button type= primary @ click= changename 更改名称/按钮
/view/templatescript
导出默认值{
data() {
返回{
姓名：“科利”
}
},
onLoad() {
},
昂秀(){
},
onHide() {
},
方法：{
changeName: function(){
this.name=Corlin
}
},
}/scriptstyle/style，其中这代表Vue实例本身。除了调用属性，还可以调用方法。
显示：
可以看到，改变name属性实现了。
如果多个函数嵌套在一个函数中，那么这个函数的传递可能会有问题。此时，您可以使用变量替换，如下所示：
模板
视图class=
text{{name}}/text
button type= primary @ click= changename 更改名称/按钮
/view/templatescript
var _ self
导出默认值{
data() {
返回{
姓名：“科利”
}
},
onLoad() {
_self=这个
},
昂秀(){
},
onHide() {
},
方法：{
changeName: function(){
_ self.name= Corlin
setTimeout(function(){
_self.name=Corlin .
}, 2000);
}
},
}/scriptstyle/style显示：
可以看到，点击按钮后，先改名字，2秒后又改了一遍，说明_self成功替换了这个。
二、Vue生命周期
Vue支持实例生命周期，uni-app在此基础上增加应用生命周期和页面生命周期。
Vue实例生命周期挂钩自动将这个上下文绑定到实例，因此它可以访问数据并对属性和方法执行操作。
如下所示：
意思是在实例初始化之后，数据观察器和事件/观察器事件配置之前，调用beforeCreate函数。创建实例后立即调用created。在此步骤中，实例已经完成了以下配置：数据观察器、属性和方法操作以及观察器/事件事件回调。但是，挂载阶段还没有开始，$el属性还不可用。在挂载开始之前调用Before:第一次调用相关的render函数。当el被新创建的vm替换时，装载的实例在装载后被调用。$el，在修补Update虚拟DOM之前更新数据时调用。适合在更新之前访问现有的DOM，比如手动删除添加的事件侦听器。由于数据更改，虚拟DOM被重新渲染和修补。之后，这个钩子在被keep-alive缓存的组件激活时会被调用activated，被keep-alive缓存的组件停用时会被调用deactivated，在销毁实例之前，在销毁实例之前，在销毁实例之后。钩子被调用后，对应于Vue实例的所有指令都被解除绑定，所有事件侦听器被移除，所有子实例被销毁。当捕获到来自后代组件的错误时，调用ErrorCaptured。这个钩子接收三个参数：错误对象、发生错误的组件实例和包含错误来源信息的字符串。这个钩子可以返回false来防止错误向上传播。应用生命周期属于整个uni-app项目，只能在App.vue中进行监控，其他页面无法监控。
如下所示：
意味着当uni-app初始化完成时触发onLaunch功能(全局仅一次)。当uni-app启动或从后台进入前台时显示onShow。当uni-app进入后台onError时，显示onHide。当uni-app报告错误时，会触发onUniNViewMessage来监控nvue页面发送的数据。可以参考nvue与vue的沟通，onUnhandledRejection，收听未处理的承诺拒绝事件(2.8.1)。未找到页面上的监听功能。onThemeChange听系统的主题变化。页面生命周期属于特定页面，对当前页面有效。
常见的页面生命周期如下：
函数onLoad监控页面加载，其参数为上一页传递的数据，参数类型为Object(用于页面引用)。请参考“如何监控页面显示”中的示例。每当页面出现在屏幕上时触发，包括从较低的页面点返回以显示当前页面。onReady监视页面第一次呈现的完成情况。如果渲染速度快，会在页面进入动画前触发onHide监听页面，hide onUnload监听页面，uninstall onResize监听窗口大小变化，onPullDownRefresh监听用户的下拉动作，一般用于下拉刷新。参考例子onReachBottom scrolling to the bottom事件(不是scroll-view scrolling to the bottom)，它通常用于下拉下一页数据。有关详细信息，请参见下面的注释。onPageScroll监视页面滚动。参数ObjectonNavigationBarButtonTap监视本机标题栏按钮的单击事件。参数是对象三、全局变量。
在uni-app中实现全局变量有几种方法。
1.公用模块
定义一个专门的模块来组织和管理这些全局变量，并在所需页面上将它们作为常量引入。如果需要更改这些常量，可以直接在模块中进行更改，而不用在每个导入的页面中手动修改，从而优化了项目的结构。
比如在uni-app项目的根目录下创建一个公共目录，然后在公共目录下新建一个constants.js来保存公共变量和方法，一般都是常量，很少需要更改，如下：
const API uri= https://API . jisuapi . com/news/get？channel=headline start=100um=20 appkey=66487 d31a 1
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。