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

最新推荐文章于 2024-07-31 18:23:58 发布
最新推荐文章于 2024-07-31 18:23:58 发布
阅读量498 收藏
点赞数
分类专栏： vue.js学习记录 文章标签： vue学习笔记 slot插槽 自定义指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20353887/article/details/83819673
版权 
<!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>
编号90015478
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 自定义组件 —— slot插槽
cc_xxo的博客
03-03 5179
父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。 一、默认插槽 <div class="category"> <h3>{{title}}分类</h3> <slot>插槽，当使用者没有传递具体介都时出现</slot> <!--声明插槽--> </div> <div class="container"> <
vue组件学习复习笔记(二)，包括（vue组件、vue生命周期、axios使用、组件进阶、自定义指令等）
weixin_60896381的博客
07-13 848
本文包含 vue组件 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（vue组件、vue生命周期、axios使用、组件进阶、自定义指令等） 如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正 ...
Vue学习： 第六章 插槽、自定义指令
weixin_44481301的博客
02-23 196
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;插槽、自定义指令&amp;lt;/title&a
懂个锤子Vue 自定义指定、插槽：
最新发布
Java.慈祥
07-31 475
是Vue.JS提供的一组内置的功能指令，它们以v-这些指令使得开发者能够以声明式的方式实现数据与视图的绑定，从而简化了DOM操作；自定义指令：是Vue.js实现对DOM元素的定制化操作，这种机制为开发者提供了直接操作控制DOM能力；从而在不深入组件内部逻辑的情况下，增加或修改元素的行为；自定义指令分为： 全局注册、局部注册；在Vue中让指令在整个应用程序中可用的方法，通过调用方法完成；Vue的静态方法指令名称v-指令名称；定义对象：该对象内包含指令执行的生命周期钩子函数；指令第一次绑定到元素时触发。
vue的生命周期与slot
qq_41956566的博客
01-11 476
1：slot slot其实就是父组件传递的DOM结构 无名插槽实例 运行效果： 具名插槽实例：多个插槽且上下有一定的讲究 运行结果：     2：vue的生命周期 装载之前是原DOM，装载之后是vue发生作用后的DOM  ...
vue之自定义组件以及插槽slot的使用
shelter123456的博客
10-26 881
vue之自定义组件以及插槽slot的使用
vue2 ---- 插槽（组件自定义）
m0_73882020的博客
07-10 263
作用：让组件内部的一些 结构 支持 自定义插槽基本语法：1. 组件内需要定制的结构部分，改用占位2. 使用组件时, 标签内部, 传入结构替换slot。
Vue学习笔记（上）——包含指令、组件、生命周期等基本知识点.pdf
07-07
在Vue的学习过程中，涉及的概念和组件繁多，本学习笔记（上）旨在梳理包括指令、组件、生命周期等在内的Vue基本知识点。 1. MVVM模式 Vue通过MVVM模式实现数据驱动。其中，View代表视图，即用户看到并与之交互的...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
vue学习笔记（超详细）
jiey0407的博客
03-09 5570
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
Vue——插槽
weixin_43599321的博客
03-28 2234
插槽的作用：Vue插槽是Vue中常见的一种组件间的相互通信方式，作用是让父组件可以向子组件指定位置插入html结构，适用于，在要接收数据的组件页面通过标签来表示，简单来说，。插槽的基本使用：这里我们选定App.vue作为父组件，Card.vue作为子组件，作为演示插槽基本使用的代码文件。App.vue运行结果：从上面的运行结果可以看到，插槽的基本使用是子组件自身内容正常显示，插入的内容是父组件向子组件插入的内容，并且插入的内容可以显示多条，如果没有插入内容，将显示
Vue2.动态组件，插槽，自定义指令
切图仔
04-25 3175
Vue2.动态组件，插槽，自定义指令
vue自定义组件及定义插槽
小颜颜6035的博客
08-13 3004
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.min.j
Vue-vue自定义指令&插槽&路由
2301_76866366的博客
05-05 195
自定义指令(全局注册/局部注册/值) 默认插槽 具名插槽 作用域插槽 路由入门
Vue - 第五天 动态组件& 插槽& 自定义指令
qq_41050821的博客
06-11 1533
动态组件是指在应用程序运行时动态加载和卸载的组件。通常，组件在应用程序启动时就已经加载了，但是在某些情况下，我们可能需要动态地加载组件，例如当某些组件只有在特定条件下才需要使用时。插槽 （Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的 、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。
Vue中的插槽和自定义指令
l12345666777的博客
12-22 923
v-xxxVue.directive('指令名称',{当被绑定元素插入到父节点调用el---->绑定指令dom元素binding---->元素数据 valuevnode 虚拟节点 dom对象内存中数据表示},// 注册自定义指令// 指令绑定dom元素执行钩子函数 调用一次},// 当被绑定元素插入到父节点中el.focus();})// 局部注册自定义指令myshow:{},},// 指令所在组件更新vnode调用},
【Vue】2-14、插槽 & 自定义指令
秋玄的博客
02-02 778
Vue 插槽与自定义指令
vue3.0-插槽、自定义指令
qq_52822043的博客
04-24 2726
目录 1. ref引用 1）ref引用 2）使用ref引用DOM元素 3）使用ref引用组件实例 4）控制文本框和按钮的按需切换 5）让文本框自动获得焦点 6）this.$nextTick(cb)方法 2. 动态组件 1）动态组件 2）实现动态组件渲染 3）使用keep-alive保持状态 3. 插槽 1）插槽 2）插槽的基础用法 ①没有预留插槽的内容会被丢弃 ②后备内容 ③具名插槽 ④为具名插槽提供内容 ⑤具名插槽的简写形式 3）作用域插槽 ①解构作...
vue生命周期，组件，slot替换，tab切换，简易留言板
前端技术
11-05 584
data规范： data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000}, { a: "wan2", b: "离线", c: 4000}, { a: "wan3", b: "在线", c: 3000}], cont:'0', id_Active:'true' } } vue里的生命周期是什么？ vu...
vue3 自定义指令生命周期
09-07
Vue3中的自定义指令生命周期发生了一些变化。首先，钩子函数的名称有所变化。在Vue2中，常用的钩子函数有bind、inserted、update、componentUpdated和unbind。而在Vue3中，这些钩子函数的名称发生了变化，分别是beforeMount、mounted、beforeUpdate、updated和unmounted。这样的改变使得自定义指令的生命周期与Vue3的组合式API更加一致，提高了代码的可读性和可维护性。 其次，钩子函数的参数也有所变化。在Vue2中，钩子函数的参数是el、binding、vnode和oldVnode。而在Vue3中，钩子函数的参数是el、binding、vnode和prevVNode。其中，el是当前元素，binding是指令的绑定值，vnode是虚拟节点，prevVNode是之前的虚拟节点。 总结一下，Vue3中的自定义指令生命周期发生了名称和参数的变化，名称变化使其更与Vue3的组合式API一致，参数变化则更加符合统一的规范。这些改变提高了代码的可读性和可维护性，使开发更加方便和高效。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span> #### 引用[.reference_title] - *1* *4* [Vue3中自定义指令生命周期的变化及含义？](https://blog.csdn.net/m0_68009075/article/details/130883408)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [（详解）Vue3自定义指令](https://blog.csdn.net/qq_59747594/article/details/130916986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍](https://download.csdn.net/download/weixin_38743084/12953228)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值