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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
JS作用域深度解析
Dec 29 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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无限分类的深入理解
2013/06/02 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
php图像验证码生成代码
2017/06/08 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
Django REST framework内置路由用法
2019/07/26 Python
Python调用C语言的实现
2019/07/26 Python
Python jieba库用法及实例解析
2019/11/04 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python把一个字符串切开的实例方法
2020/09/27 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
五一手机促销方案
2014/03/08 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
催款函范文
2015/06/24 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS