vue2.0+基础知识连载（11）--- 生命周期
2018-01-20 19:10
771 查看
<!DOCTYPE html>
<html>
<head>
<title>vue2.0+基础知识连载（11）--- 生命周期</title>
</head>
<body>
<h3>vue2.0+基础知识连载（11）--- 生命周期</h3>
<div id='app'>
<p>{{msg}}</p>
<p><input type="button" value="更新数据" @click="update()"></p>
<p><input type="button" value="销毁组件" @click="destroy()"></p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
data: {
msg: 'vue生命周期'
},
methods: {
update: function() {
this.msg = '大家好';
},
destroy: function() {
this.$destroy();
}
},
beforeCreate: function() {
alert("组件实例刚刚被创建");
},
created: function() {
alert("实例已经创建完成");
},
beforeMount: function() {
alert("模板编译之前");
},
mounted: function() {
alert("模板编译完成");
},
beforeUpdate: function() {
alert('组件更新之前');
},
updated: function() {
alert('组件更新完毕');
},
beforeDestroy: function() {
alert('组件销毁之前');
},
destroyed: function() {
alert('组件销毁之后');
}
}).$mount('#app');
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue2.0+基础知识连载（16）--- 非父子组件通信
- vue2.0+基础知识连载（17）--- 路由
- vue2.0+基础知识连载（18）--- 动画（transition）
- vue2.0+基础知识连载（03）--- 常用属性介绍
- vue2.0+基础知识连载（19）--- 自定义指令
- vue2.0+基础知识连载（20）--- 自定义键盘信息
- vue2.0+基础知识连载（01）--- Vue实例简介
- vue2.0+基础知识连载（05）--- 绑定class样式
- vue2.0+基础知识连载（04）--- 绑定style样式
- vue2.0+基础知识连载（10）--- 键盘事件
- vue2.0+基础知识连载（12）--- 监听数据变化
- vue2.0+基础知识连载（07）--- 事件对象
- vue2.0+基础知识连载（13）--- 计算属性的使用
- vue2.0+基础知识连载（09）--- 默认事件
- vue2.0+基础知识连载（14）--- 局部组件与全局组件
- 详解vue-router 2.0 常用基础知识点之router-link
- vue-router 2.0 常用基础知识点之导航钩子
- vue-router 2.0 常用基础知识点之router-link
- 详解vue-router 2.0 常用基础知识点之router.push()
- JAVA相关基础知识总结（连载）-11