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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
Node与Python 双向通信的实现代码
Jul 16 Javascript
如何利用React实现图片识别App
Feb 18 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
桌面中心(一)创建数据库
2006/10/09 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php笔记之:AOP的应用
2013/04/24 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP URL路由类实例
2013/11/12 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
ansible作为python模块库使用的方法实例
2017/01/17 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
商业活动邀请函
2014/02/04 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
消防标语大全
2014/06/07 职场文书
工作求职自荐信
2014/06/13 职场文书
节能标语大全
2014/06/21 职场文书
社团活动总结书
2014/06/27 职场文书
先进党支部事迹材料
2014/12/24 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS