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 相关文章推荐
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
微信小程序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获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
js中判断控件是否存在
2010/08/25 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
Python SQLite3简介
2018/02/22 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python hmac模块使用实例解析
2019/12/24 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
教师岗位职责范本
2013/12/29 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
学生党员公开承诺书
2014/05/28 职场文书
低碳环保标语
2014/06/12 职场文书
总经理检讨书
2014/09/15 职场文书
信息合作协议书
2014/10/09 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
教师节寄语2015
2015/03/23 职场文书
党委工作总结2015
2015/04/27 职场文书
竞选稿之小学班干部
2019/10/31 职场文书