简单了解Vue的自定义组件与生命周期

最新推荐文章于 2022-06-20 09:21:02 发布

努力敲代码买猪脚啃

最新推荐文章于 2022-06-20 09:21:02 发布

阅读量1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/fushuaiCSDN/article/details/107035751

版权

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>

浏览器控制台查看生命周期

在这里插入图片描述

努力敲代码买猪脚啃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单了解Vue的自定义组件与生命周期

Vue的自定义组件定义格式Vue.component(组件名称, {props:组件的属性,data: 组件的数据函数,template: 组件解析的标签模板})代码解析(详细解释在注解中)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
复制链接

扫一扫