vue教程2-01 vue生命周期、钩子函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

    <script src="vue.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教程2-01 vue生命周期、钩子函数的更多相关文章

  1. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

  2. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  3. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  4. vue环境配置脚手架搭建,生命周期,钩子

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  5. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  6. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  7. Vue 2.0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  8. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  9. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  10. 什么是vue生命周期和生命周期钩子函数？

    原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...

随机推荐

  1. vs2013查看代码性能后删除保存的性能查看文件导致再打开提示未找到与约束匹配的导出

    1.关闭VS: 2.删除C:/Users//AppData/Local/Microsoft/VisualStudio/12.0/ComponentModelCache文件夹下所有文件及文件夹: 3.重 ...

  2. java高精度实数和小数

    java 高精度实数和小数 String s = "1231222222222222222222222222222222222222222222222222222222"; Big ...

  3. 批量插入，批量修改的sql

    sql 1  批量插入 <insert id="batchInsert" useGeneratedKeys="true" parameterType=&q ...

  4. jvm的内存分配

    java内存分配 A:栈 存储局部变量 B:堆 存储所有new出来的 C:方法区(方法区的内存中) 类加载时 方法信息保存在一块称为方法区的内存中, 并不随你创建对象而随对象保存于堆中; D:本地方法 ...

  5. pyppeteer使用笔记

    pyppeteer -- python版本的puppeteer,一个强大的chronium headless浏览器API 最近搞天猫用了一波儿,记录一下. 先上文档: https://miyakogi ...

  6. AngularJS transclude 理解及例子

    一.概念理解 transclude可以在指令中让使用者自定义模板,也就是说,指令中模板的一部分,让指令的使用者动态指定:与指定中的Scope属性值为{}时候的作用类似,scope属性让指令使用者动态制 ...

  7. Android-Java构造代码块&构造方法隐式三行

    构造代码块: 描述Teacher对象/实体: package android.java.oop06; public class Teacher { private int id = 007; priv ...

  8. 使用PerfView监测.NET程序性能（四）：折叠，过滤和时间范围选择

    在上一篇文章中,我们使用了Perfview的分组功能.分组功能旨在对某些函数按照某个格式进行分组,以减少视图中的各种无关函数的数量.但仅有分组还不够,有时我们想将一些函数调用信息按某些条件过滤掉,例如 ...

  9. VS的一些实用快捷键及小技巧（不断更新）

    在未选中文本的情况下: ctrl+x 剪贴并删除当前的行,可以用于快速删除整行代码 ctrl+c 复制当前行的代码 ctrl+l 删除当前行 组合键,需要按两次: ctrl+k,ctrl+c 注释当前 ...

  10. C# 利用VS中的插件来打包并发布winfrom程序

    1.先在VS 的扩展更新中搜索此插件[2015 installer Projects],点击下载,安装需要关闭VS 2.安装完毕之后新建项目 3.选择“application folder”项,然后在 ...