vue生命周期与钩子函数简单示例


Posted in Javascript onMarch 13, 2019

本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue生命周期与钩子函数</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
  <div id="box">
    {{msg}}
  </div>
  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        msg:'well'
      },
      created:function(){
        alert('实例已经创建');
      },
      beforeCompile:function(){
        alert('编译之前');
      },
      compiled:function(){
        alert('编译之后');
      },
      ready:function(){
        alert('插入到文档中');
      },
      beforeDestroy:function(){
        alert('销毁之前');
      },
      destroyed:function(){
        alert('销毁之后');
      }
    });
    /*点击页面销毁vue对象*/
    document.onclick=function(){
      vm.$destroy();
    };
  </script>
</body>
</html>

网上找来一张流程图:

vue生命周期与钩子函数简单示例

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

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

Javascript 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 #Javascript
vue实现百度下拉列表交互操作示例
Mar 12 #Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 #Javascript
深入理解Node内建模块和对象
Mar 12 #Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 #Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 #Javascript
React中this丢失的四种解决方法
Mar 12 #Javascript
You might like
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
php接口隔离原则实例分析
2019/11/11 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
详解vue axios二次封装
2018/07/22 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
微信小程序云开发之数据库操作
2019/05/18 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
python 生成器协程运算实例
2017/09/04 Python
详解Python3的TFTP文件传输
2018/06/26 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python中get和post有什么区别
2020/06/19 Python
Python连接mysql方法及常用参数
2020/09/01 Python
生产副总岗位职责
2013/11/28 职场文书
批评与自我批评总结
2014/10/17 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
护士个人总结范文
2015/02/13 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android