首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vue的生命周期

vue的生命周期

作者头像
达达前端
发布于 2019-10-09 15:24:54
发布于 2019-10-09 15:24:54
7690
举报
文章被收录于专栏:达达前端达达前端

vue实例生命周期 支持vue实例的生命周期如下: beforeCreate created beforeMount mounted

beforeUpdate updated activated


页面生命周期 不论是app还是小程序,生命周期是非常重要的知识点 onLoad 监听页面加载 onShow 监听页面显示 onReady 监听页面初次渲染完成 onHide 监听页面隐藏 onUnload 监听页面卸载

onPullDownRefresh 监听用户下拉动作 onReachBottom 页面上拉触底事件的处理函数 onShareAppMessage 用户点击右上角分享 onPageScroll 监听页面滚动 onTabItemTap 当前是tab页时

file

file

代码语言:javascript
复制
setTimeout(function(){

},3000);

file

file

file

file

file

file

class

代码语言:javascript
复制
<view :class="{ active: isActive }">111</view>

<view class="static" v-bind:class="{active: isActive, 'text-danger': hasError}">222</view>

<view class="static" :class="[activeClass, errorClass]">333</view>

<view class="static" v-bind:class="[isActive ? activeClass : ' ', errorClass]">444</view>

<view class="static" v-bind:class="[{active: isActive}, errorClass]">555</view>

style:

代码语言:javascript
复制
<view v-bind:style="{color : activeColor, fontSize: fontSize + 'px' }">666</view>

<view v-bind:style="[{color: activeColor, fontSize: fontSize+'px'}]">777</view>

file

代码语言:javascript
复制
<template>
 <scroll-view class="menus">
  <view v-for="(menu, index) in menus" :class="[index == currentIndex ? 'menuActive' : ' ' ]"> {{ menu }} </view>
 </scroll-view>
</template>

file


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.10.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档