vue1.0生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
<script src="js/vue.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test" style="border: 1px black dashed;padding: 8px;">
{{a}}
</div>
<div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">
我是内容二
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
a: "我是内容,在控制台输入myVue.a=123456,可以改变我的值"
},
created: function () {
//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。
//但是还没有开始 DOM 编译，$el 还不存在,但是实例存在,即this.a存在,可打印出来 。
console.log(this.a);
console.log("建立");
},
beforeCompile: function () {
console.log("未开始编译");
},
compiled: function () {
//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。
console.log("编译完成");
},
ready: function () {
//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。
console.log("一切准备好了");
},
attached :function () { //myVue.$appendTo(".test2")暂时触发不了,不知道怎么解决
//在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接操作 vm.$el 不会 触发这个钩子。
console.log("插入DOM成功");
},
detached :function () { //触发事件 myVue.$destroy(true),其中参数true控制是否删除DOM节点或者myVue.$remove()
//在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会 触发这个钩子。
console.log("删除DOM成功");
},
beforeDestroy: function () { //触发方式,在console里面打myVue.$destroy();
//在开始销毁实例时调用。此时实例仍然有功能。
console.log("销毁前");
},
destroyed: function () { //触发方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在
//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。
console.log("已销毁");
}
});
</script>
</body>
</html>
vue1.0生命周期的更多相关文章
- 02Vue2.0+生命周期
Vue生命周期是Vue对象从无到有再到无的一个过程,我们又是不仅要明白一个对象的使用, 同时也要知道一个对象怎么创建了,就比如Spring的生命周期,往往不只是面试官的考点, 同时在项目中也也可能常常 ...
- vue2.0 生命周期 简析
Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
- thinkphp5.0生命周期
本篇内容我们对ThinkPHP5.0的应用请求的生命周期做大致的介绍,以便于开发者了解整个执行流程. 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件. ...
- Vue2.0生命周期和钩子函数的一些理解
转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...
- Vue2.0 —生命周期和钩子函数
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
- thinkphp5.0 生命周期
1.入口文件 // 应用入口文件 index.php // 定义项目路径 define('APP_PATH', __DIR__ . '/../application/'); // 加载框架引导文件 r ...
- 详解Vue2.0生命周期
网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...
- ng4.0 生命周期
名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前. OnChanges 指令和组件 ngOnInit 在第一轮 ngOn ...
随机推荐
- bootstrap3.0学习笔记记录1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用过滤器Filter判断用户是否登陆
用过滤器Filter判断用户是否登陆 WEB.XML <!-- 用户session的 键 sessionKEY --> <context-param> <param- ...
- Java-Runoob-高级教程-实例-字符串：08. Java 实例 - 字符串分割(StringTokenizer)
ylbtech-Java-Runoob-高级教程-实例-字符串:08. Java 实例 - 字符串分割(StringTokenizer) 1.返回顶部 1. Java 实例 - 字符串分隔(Strin ...
- Rails5终端基本命令
更新: 2017/06/10 更新: 2017/06/21 增加迁移文件查看履历命令: rails db:migrate:status 迁移文件生成 ...
- idea 快捷键以及包含字符串文件搜索
1.idea也有一个类似于eclipse的包含字符串文件搜索(特别实用) idea 里按快捷键:ctrl+H 2.下图是idea的快捷键汇总 3.debug调试 F5:跳入方法 F6:向下逐行调试 ...
- JAVA数据类型提升
在java中数值进行计算事会自动进行数据类型提升,例如:计算时byte,short,char类型会提升为int数据类型. 例1: class dataType { public static void ...
- bzoj 3598: [Scoi2014]方伯伯的商场之旅【数位dp】
参考了这个http://www.cnblogs.com/Artanis/p/3751644.html,好像比一般方法好写 大概思想就是先计算出把所有石子都合并到1位置的代价,这样显然有一些是不优的,然 ...
- bzoj 3930: [CQOI2015]选数【递推】
妙啊 这个题一上来就想的是莫比乌斯反演: \[ f(d)=\sum_{k=1}^{\left \lceil \frac{r}{d} \right \rceil}\mu(k)(\left \lceil ...
- 又一篇Centos7下的asp.net core部署教程
历程2个多月的学习,我终于从PHP转.Net开发了. 从壹开始前后端分离[ .NETCore2.1 +Vue 2 +AOP+DI]框架 感谢老张的博客,我对asp.net core入门主要就是靠他的博 ...
- 利用OneDNS同步chrome数据
将DNS服务器改成OneDNS的 117.50.11.11 备用改为 117.50.22.22 然后刷新自己的DNS缓存,接着测试一下https://test.onedns.net即可 这样既可以正常 ...