Vue的生命周期操作示例


Posted in Javascript onSeptember 17, 2019

本文实例讲述了Vue的生命周期操作。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的生命周期</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue的生命周期</h1>
<hr>
<div id="app">
  {{count}}
  <p><button @click="add">Add</button></p>
</div>
<button οnclick="app.$destroy()">销毁</button>
</body>
</html>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      count:1
    },
    methods:{
      add:function () {
        this.count++
      }
    },
    //有这么多钩子函数 一共十个
    //初始化之后
    beforeCreate:function(){
      console.log('1-beforeCreate 初始化之后');
    },
    //创建完成
    created:function(){
      console.log('2-created 创建完成');
    },
    //挂载之前
    beforeMount:function(){
      console.log('3-beforeMount 挂载之前');
    },
    //被创建
    mounted:function(){
      console.log('4-mounted 被创建');
    },
    //数据更新前
    beforeUpdate:function(){
      console.log('5-beforeUpdate 数据更新前');
    },
    //被更新后
    updated:function(){
      console.log('6-updated 被更新后');
    },
    //
    activated:function(){
      console.log('7-activated');
    },
    //
    deactivated:function(){
      console.log('8-deactivated');
    },
    //销毁之前
    beforeDestroy:function(){
      console.log('9-beforeDestroy 销毁之前');
    },
    //销毁之后
    destroyed:function(){
      console.log('10-destroyed 销毁之后')
    }
  })
</script>

运行结果:

Vue的生命周期操作示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 #Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 #Javascript
react native 仿微信聊天室实例代码
Sep 17 #Javascript
Vue 自定义指令功能完整实例
Sep 17 #Javascript
JS扁平化输出数组的2种方法解析
Sep 17 #Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 #Javascript
uni app仿微信顶部导航条功能
Sep 17 #Javascript
You might like
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
laravel请求参数校验方法
2019/10/10 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python Shapely使用指南详解
2020/02/18 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
教师远程培训感言
2014/03/06 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
保护环境倡议书500字
2014/05/19 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
大学计划书范文800字
2014/08/14 职场文书
团队拓展训练感想
2015/08/07 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫