vue学习笔记 slot插槽自定义指令生命周期实例

最新推荐文章于 2025-06-15 08:43:30 发布

编号90015478

最新推荐文章于 2025-06-15 08:43:30 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js学习记录文章标签： vue学习笔记 slot插槽自定义指令

本文链接：https://blog.youkuaiyun.com/qq_20353887/article/details/83819673

vue.js学习记录专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了Vue.js中插槽(slot)的使用方法和自定义指令的实现原理，通过具体实例展示了如何利用插槽进行组件内容的动态插入及自定义指令增强DOM操作，是前端开发者不可多得的学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.2.3/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- slot插槽使用 slot属性对应组件中name属性相同的节点进行渲染 -->
        <temp>
            <span id="aa" style="color:red">
                slot
            </span>
            <span id="bb" slot="block">
                slot1
            </span>
        </temp>
        <!-- 自定义指令使用 -->
        <div v-add-style="{color:'red',text:'aaa'}">

        </div>
    </div>
    <!-- 创建插槽组件 -->
    <script type="text/html" id="template">
        <div>
		<slot></slot>
		<slot  name="block"></slot>
		<slot name="block"></slot>

		<slot name="block"></slot>
	</div>
</script>
    <script type="text/javascript">
        //添加自定义指令    
        Vue.directive('addStyle', function (el, binding) {
            el.style.backgroundColor = binding.value.color;
            el.innerText = binding.value.text;
            console.log(binding.value.color);
            console.log(binding.value.text);
        })
        //添加自定义指令 end

        // 初始化组件
        Vue.component('temp', {
            template: "#template",
            data: function () {
                return {

                }
            }
        })
        var app = new Vue({
            el: '#app',
            data: {

            },
            // 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)
            },
            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 更新前状态===============》');
                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 更新完成状态===============》');
                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)
            }
        })
    </script>
</body>

</html>