Vue2.0入门系列——组件和生命周期
一、文件目录结构html
Vue.js官网下载vue
Vue2.0组件定义，自行编写测试
二、编写文件this
以下，spa
三、总体思路component
定义子组件——注册组件——模板编写——引用模板——实例化htm
访问方式：直接访问html文件。blog
源代码：生命周期
<!DOCTYPE html>ip
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0组件属性</title>
<script src="./vue.js"></script>
<script>
var Home={//一、定义子组件
template:'#aaa' //四、套用模板
};
Vue.component('home-test',Home); //二、注册组件
window.onload=function(){
new Vue({
el:'#box',
data:{
msg: 'welcome vue2.0'
}
});
};
</script>
</head>
<body>
<template id="aaa">
<!--三、template模板，下面只容许只有一个标签属性-->
<div>
<h3>我是第一个组件</h3>
<strong>加粗标签属性</strong>
</div>
</template>
<div id="box">
<!--五、子组件实例化，引用-->
<home-test></home-test>
{{ msg }}
</div>
</body>
</html>
自此，组件属性介绍完成。
四、组件声明周期介绍
beforeCreate 组件实例刚刚被建立,属性都没有
created 实例已经建立完成，属性已经绑定
beforeMount 模板编译以前
mounted 模板编译以后
beforeUpdate 组件更新以前
updated 组件更新完毕
beforeDestroy 组件销毁前
destroyed 组件销毁后
五、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0生命周期</title>
<script src="./vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
msg: 'welcome vue2.0'
},
methods: {
update(){this.msg='数据已更新'},
destroy(){this.$destroy();}
},
beforeCreate(){console.log('组件实例刚刚被建立');},
created(){console.log('实例已经建立完成');},
beforeMount(){console.log('模板编译以前');},
mounted(){console.log('模板编译以后');},
beforeUpdate(){console.log('组件更新以前');},
updated(){console.log('组件更新以后');},
beforeDestroy(){console.log('组件销毁以前');},
destroyed(){console.log('组件销毁以后');}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁数据" @click="destroy">
{{ msg }}
</div>
</body>
</html>
界面访问测试，查看console输出。
自此，vue生命周期介绍完毕。
- 1. vue入门教程系列二组件的生命周期
- 2. vue2.0生命周期
- 3. Vue2.0生命周期
- 4. 探究Vue2.0生命周期
- 5. 浅谈vue2.0生命周期
- 6. Vue2.0七——生命周期
- 7. vue2.0 之 生命周期
- 8. Vue2.0学习——生命周期
- 9. 详解Vue2.0生命周期
- 10. Vue2.0生命周期和钩子函数
- 更多相关文章...
- • Rust 生命周期 - RUST 教程
- • SVN 生命周期 - SVN 教程
- • YAML 入门教程
- • Docker容器实战(七) - 容器眼光下的文件系统
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vue入门教程系列二组件的生命周期
- 2. vue2.0生命周期
- 3. Vue2.0生命周期
- 4. 探究Vue2.0生命周期
- 5. 浅谈vue2.0生命周期
- 6. Vue2.0七——生命周期
- 7. vue2.0 之 生命周期
- 8. Vue2.0学习——生命周期
- 9. 详解Vue2.0生命周期
- 10. Vue2.0生命周期和钩子函数