Vue 组件 - 指令

于 2025-05-29 10:47:32 发布
阅读量481 收藏 7
点赞数 12
分类专栏： 前端 # Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/json_ligege/article/details/148305345
版权

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue指令

 

目录

指令写法

自定义指令

简单封装指令

指令传递字符串

update事件

指令应用

指令实现轮播

指令函数简写

指令函数列表

bind

inserted

update

componentUpdated

unbind

Vue3指令轮播

nextick

总结

指令写法

指令：为了操作底层dom。

实际应用：可以通过指令知道什么时候dom创建完成，从而进行依赖dom的库初始化工作。

自定义指令

对普通dom元素进行底层操作。

编写一个输入框，当被绑定的元素插入到dom中时，

输入框获取焦点。

示例如下：

<div id="box">
    <input v-focus name="name" />
</div>
<script src="../lib/vue.js"></script>
<script>
    // 注册一个全局自定义指令 'v-focus'
    Vue.directive("focus", {
        // 当被绑定的元素插入到dom中时
        inserted:function(el) {
            // 聚焦元素
            el.focus()
        }
    })

    new Vue({
        el:"#box"
    })
</script>

 

简单封装指令

做一个简单的指令封装。

示例如下：

<div id="box">
    <div v-hello>你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>
    Vue.directive("hello", {
        // 指令的生命周期
        inserted(el) {
            console.log("inserted", el)
            el.style.background = "red"
        }
    })

    new Vue({
        el:"#box"
    })
</script>

 

指令传递字符串

如果在参数中不包含单引符号，则识别为状态，需要提前定义好。

示例如下：

<div id="box">
    <div v-hello=" 'yellow'">你好 vue</div>
    <div v-hello=" 'blue'">你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>
    Vue.directive("hello", {
        // 指令的生命周期
        inserted(el, binging) {
            console.log("inserted", binging)
            el.style.background = binging.value
        }
    })

    new Vue({
        el:"#box"
    })
</script>

inserted事件，是在第一次插入到父节点时触发。

update事件

可以在update触发事件中修改值进行指令赋值。

示例如下：

<div id="box">
    <div v-hello=" 'yellow'">你好 vue</div>
    <div v-hello=" 'blue'">你好 vue</div>
    <div v-hello="whichColor">你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>
    Vue.directive("hello", {
        // 指令的生命周期
        inserted(el, binging) {
            console.log("inserted", binging)
            el.style.background = binging.value
        },
        update(el, binging) {
            console.log("update")
            el.style.background = binging.value
        }
    })

    let vm = new Vue({
        el:"#box",
        data : {
            whichColor: "red"
        }
    })
</script>

效果：

指令应用

指令实现轮播

使用指令来完成轮播。

因为不知道什么时候数据什么时候插入的，直接绑定一个指令。

给指令传递对象参数。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/swiper-bundle.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="box">
    <header>导航</header>
    <div class="swiper-container demo">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(data, index) in datalist" :key="data" v-swiper="{
                index:index,
                length:datalist.length
            }">
                <img :src="data" alt=""/>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <footer>底部内容</footer>
</div>
<script src="../lib/swiper-bundle.js"></script>
<script src="../lib/vue.js"></script>
<script>

    Vue.directive("swiper", {
        // 指令的生命周期
        inserted(el, binging) {
            let {
                index,
                length
            } = binging.value

            if (index === length - 1) {
                new Swiper(".demo", {
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    loop:true,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction:false
                    }
                })
            }
        }
    })

    new Vue({
        el: '#box',
        data: {
            datalist:[],
        },
        mounted() {
            // ajax
            setTimeout(()=> {
                this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_6.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_265.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_2819.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_219.jpg"]
            }, 2000)
        }
    })
</script>
</body>
</html>

 

指令函数简写

这种方式，更新和创建都会触发，如果两种触发都是同样的处理可以使用简写方式。

示例如下：

Vue.directive("hello", ()=> {
    console.log("创建或者更新都会执行")
})

 

指令函数列表

bind

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted

被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。

update

所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可以发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

componentUpdated

指令所在组件的VNode及其子VNode全部更新后调用。

unbind

只调用一次，指令与元素解绑时调用。

Vue3指令轮播

使用app.directive()定义指令

生命周期需要更换inserted更换为mounted

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/swiper-bundle.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="box">
    <header>导航</header>
    <div class="swiper-container demo">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(data, index) in datalist" :key="data" v-swiper="{
                index:index,
                length:datalist.length
            }">
                <img :src="data" alt=""/>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <footer>底部内容</footer>
</div>
<script src="../lib/swiper-bundle.js"></script>
<script src="../lib/vue.next.js"></script>
<script>
    let obj = {
        data() {
            return {
                datalist:[]
            }
        },
        mounted() {
            // ajax
            setTimeout(()=> {
                this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_6.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_265.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_2819.jpg",
                    "https://tsj.youdubook.com/cover/book_cover_219.jpg"]
            }, 2000)
        }
    }

    let app = Vue.createApp(obj)

    // app.component()
    // app.component()

    app.directive("swiper", {
        // 指令的生命周期
        mounted(el, binging) {
            let {
                index,
                length
            } = binging.value

            if(index === length - 1) {
                new Swiper(".demo", {
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    loop:true,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction:false
                    }
                })
            }
        }
    })

    app.mount("#box")
</script>
</body>
</html>

 

nextick

当数据更新到dom中时，会触发一次性的监听事件。

示例如下：

let obj = {
    data() {
        return {
            datalist:[]
        }
    },
    mounted() {
        // ajax
        setTimeout(()=> {
            this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg",
                "https://tsj.youdubook.com/cover/book_cover_6.jpg",
                "https://tsj.youdubook.com/cover/book_cover_265.jpg",
                "https://tsj.youdubook.com/cover/book_cover_2819.jpg",
                "https://tsj.youdubook.com/cover/book_cover_219.jpg"]
        }, 2000)

        this.$nextTick(() => {
            console.log("比updated执行的都晚，而且只执行一次")
        })
    }
}

可以在tick中处理实例化，会在数据源更新后，触发一次实例化。

示例如下：

let obj = {
    data() {
        return {
            datalist:[]
        }
    },
    mounted() {
        // ajax
        setTimeout(()=> {
            this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg",
                "https://tsj.youdubook.com/cover/book_cover_6.jpg",
                "https://tsj.youdubook.com/cover/book_cover_265.jpg",
                "https://tsj.youdubook.com/cover/book_cover_2819.jpg",
                "https://tsj.youdubook.com/cover/book_cover_219.jpg"]
        }, 2000)

        this.$nextTick(() => {
            console.log("比updated执行的都晚，而且只执行一次")

            new Swiper(".demo", {
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                loop:true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction:false
                }
            })
        })
    }
}

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue指令介绍及应用示例

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JSON_L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值