Vue的自定义组件
定义格式
Vue.component(组件名称, {
props:组件的属性,
data: 组件的数据函数,
template: 组件解析的标签模板
})
代码解析(详细解释在注解中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义组件</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="div">
<!--
实际解析在html中是这样的
<button style="color: red;">我的按钮</button>
-->
<my-button></my-button>
<!--
实际解析
<div><div>张三</div> <div>18</div> <div>男</div> <div>苍老师</div> <div></div></div>
-->
<student myname="张三" age = "18" gender="男"></student>
</div>
</body>
<script>
// 自定义标签
Vue.component("my-button",{
// 属性
props:[""],
// 数据函数
data: function(){
return{
msg:"我的按钮"
}
},
//解析标签模板
template:"<button style='color:red'>{{msg}}</button>"
});
//定义学生标签
//使用这个标签能够用div现实学生姓名,年龄,性别
//实现的内容是用户同属性传递的
Vue.component("student",{
//属性数据,在使用student属性的时候值会传递到这里来
props: ["myname","age","gender"],
//数据函数
data: function(){
},
//模板元素只能有一个标签元素,但是可以有多个子元素
/*模板中的数据:
1.props中
2.data
*/
template: `
<div>
<div>{{myname}}</div>
<div>{{age}}</div>
<div>{{gender}}</div>
<div>{{bzr}}</div>
<div>
`,
data :function(){
return {
bzr: "苍老师",
// data与props重名,优先使用props用户传递的
myname: "波老师"
};
}
});
new Vue({
el:"#div"
});
</script>
</html>
浏览器解析
Vue的生命周期(钩子函数)
图片来源vue官网
以下代码从Vue官网粘贴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //undefined
console.log("%c%s", "color:red", "message: " + this.message);//undefined
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function() {
console.group('beforeUpdate 更新前状态===============》');
let dom = document.getElementById("app").innerHTML;
console.log(dom);
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
updated: function() {
console.group('updated 更新完成状态===============》');
let dom = document.getElementById("app").innerHTML;
console.log(dom);
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
}
});
// 销毁Vue对象
vm.$destroy();
vm.message = "hehe"; // 销毁后 Vue 实例会解绑所有内容
// 设置data中message数据值
// vm.message = "good...";
</script>
</html>