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

 更新时间:2019年03月13日 08:43:45   作者:白杨-M  
这篇文章主要介绍了vue生命周期与钩子函数,结合简单实例形式分析了vue.js生命周期及钩子函数相关流程与实现技巧,需要的朋友可以参考下

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 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>

网上找来一张流程图:

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

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

相关文章

  • Vue中如何动态显示表格内容

    Vue中如何动态显示表格内容

    这篇文章主要介绍了Vue中如何动态显示表格内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue实现的仿淘宝购物车功能详解

    vue实现的仿淘宝购物车功能详解

    这篇文章主要介绍了vue实现的仿淘宝购物车功能,结合完整实例形式较为详细的分析了vue.js仿淘宝购物车功能的具体样式、功能相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-01-01
  • 前端启动出现报错提示vue-cli-service serve的原因及解决办法

    前端启动出现报错提示vue-cli-service serve的原因及解决办法

    这篇文章主要给大家介绍了关于前端启动出现报错提示vue-cli-service serve的原因及解决办法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Vuex实现购物车小功能

    Vuex实现购物车小功能

    这篇文章主要为大家详细介绍了Vuex实现购物车小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Vue前端解析Excel数据方式

    Vue前端解析Excel数据方式

    这篇文章主要介绍了Vue前端解析Excel数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue项目中对index.html中BASE_URL的配置方式

    Vue项目中对index.html中BASE_URL的配置方式

    这篇文章主要介绍了Vue项目中对index.html中BASE_URL的配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue组合式API的特点及使用方法

    Vue组合式API的特点及使用方法

    在Vue.js 3.0中,推出了新的组合式API,使得开发者能够更加方便灵活地编写Vue组件,这也是组合式 API 成为了 Vue 新的开发范式,与传统的选项 API 相比,组合式 API 更加灵活、易于维护的原因,在本文中,我们将详细介绍 Vue 组合式API的风格及使用
    2023-06-06
  • vue如何通过日期筛选数据

    vue如何通过日期筛选数据

    这篇文章主要介绍了vue如何通过日期筛选数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue3使用quill富文本编辑器保姆级教程(附踩坑解决)

    vue3使用quill富文本编辑器保姆级教程(附踩坑解决)

    这篇文章主要给大家介绍了关于vue3使用quill富文本编辑器保姆级教程的相关资料,在许多网站和应用程序中富文本编辑器是一种常见的工具,它使用户能够以直观的方式创建和编辑文本内容,需要的朋友可以参考下
    2023-11-11
  • Vue深入理解之v-for中key的真正作用

    Vue深入理解之v-for中key的真正作用

    为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一key属性,下面这篇文章主要给大家介绍了关于Vue深入理解之v-for中key的真正作用,需要的朋友可以参考下
    2022-05-05

最新评论