当前位置：首页 > news >正文

Vue 组件 - 指令

news 来源：原创 2025/5/31 10:50:45

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.valueif (index === length - 1) {new Swiper(".demo", {// 如果需要分页器pagination: {el: '.swiper-pagination',},loop:true,autoplay: {delay: 2500,disableOnInteraction:false}})}}})new Vue({el: '#box',data: {datalist:[],},mounted() {// ajaxsetTimeout(()=> {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() {// ajaxsetTimeout(()=> {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.valueif(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() {// ajaxsetTimeout(()=> {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() {// ajaxsetTimeout(()=> {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}})})}
}