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 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
js切换div css注意的细节
Dec 10 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
ES6 async、await的基本使用方法示例
Jun 06 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 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php全排列递归算法代码
2012/10/09 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php获取微信openid方法总结
2019/10/10 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python 使用with上下文实现计时功能
2018/03/09 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python实现整数的二进制循环移位
2019/03/08 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
护士检查书
2014/01/17 职场文书
老师的检讨书
2014/02/23 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
golang slice元素去重操作
2021/04/30 Golang
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS