Vue自定义指令及封装轮播图案例

最新推荐文章于 2024-06-04 15:27:50 发布

前端魔法师

最新推荐文章于 2024-06-04 15:27:50 发布

阅读量413

点赞数

分类专栏： Vue 文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/k464746/article/details/105102988

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

自定义指令简介
自定义指令注册
钩子函数
- - 钩子函数案例
钩子函数参数
- - 参数简单案例
函数简写
- - 函数简写案例
对象字面量
自定义指令与轮播图简单案例

自定义指令简介

自定义指令，对普通的DOM元素进行底层操作。
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令注册

举个聚焦输入框的例子，如下：
directive全局注册,directives局部注册

	 <div id="app">
        <!-- 通过v-focus来去使用自定义指令 -->
    <input type="text" v-focus>

    </div>

    <script src="./base/vue.js"></script>
    <script>
       

       //注册自定义指令  v-focues   全局注册
       Vue.directive("focus",{
           inserted(el){//当被绑定的元素插入dom的时候就会执行
            el.focus()
        }
       })

       


        new Vue({
            el:"#app",
           /*  directives:{  //局部注册
                focus:{
                    inserted(el){
                        el.focus()
                    }
                }
            }*/
        })
    </script>

打开或刷新页面时，自动聚焦输入框

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用）。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数案例

我们可以借助一个简单的案例来认识这几个钩子函数

 <div id="app">
 		<!-- :msg="msg" 自定义指令的绑定 -->
        <my-comp v-if="msg" :msg="msg"></my-comp>
        <button @click="update">更新</button>
        <button @click="uninstall">卸载</button>
        <button @click="install">安装</button>
    </div>

    <!--引入vue.js-->
    <script src="./base/vue.js"></script>
    <script>
        //v-hello
        Vue.directive('hello', {
        //当钩子函数被调用时,输出相应的钩子函数
            bind: function (el){
                console.log('bind');
            },
            inserted: function (el){
                console.log('inserted');
            },
            update: function (el){
                console.log('update');
            },
            componentUpdated: function (el){
                console.log('componentUpdated');
            },
            unbind: function (el){
                console.log('unbind');
            }
        });

        var myComp = {
            template: '<h1 v-hello>{{msg}}</h1>',
            props: {
                msg: String
            }
        }

        new Vue({
            el: '#app',
            data: {
                msg: 'Hello'
            },
            components: {
                myComp: myComp
            },
            methods: {
            //点击更新按钮  更改自定义指令名称
                update: function (){
                    this.msg = 'Hi';
                },
           //点击卸载按钮时 自定义指令与元素解绑
                uninstall: function (){
                    this.msg = '';
                },
           //点击安装按钮  自定义指令与元素绑定
                install: function (){
                    this.msg = 'Hello';
                }
            }
        })
    </script>

在这里插入图片描述

打开页面运行
bind inserted 被调用
点击更新按钮
update componentUpdated被调用
点击卸载按钮
unbind被调用
点击安装按钮
bind inserted 被调用

钩子函数参数

el、binding、vnode 和 oldVnode

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性

name：指令名，不包含v-的前缀；
value：指令的绑定值；例如：v-my-directive=“1+1”，value的值是2；
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；
expression：绑定值的字符串形式；例如：v-my-directive=“1+1”，expression的值是’1+1’；
arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 ‘foo’；
modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{‘a’:true,‘b’:true}

vnode：Vue编译的生成虚拟节点；

oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。

参数简单案例

binding.name 可以获取指令的名字 v-demo ==> demo
binding.value 可以获取指令的内容 v-demo="message" ==> message 的值 hello
binding.expression 字符串形式的指令表达式 v-demo="message" ==> message
binding.arg 可以获取 v-demo:foo ==> foo
binding.modifiers 可以获取指令的修饰符 v-demo:foo.a.b ==> {"a":true,"b":true}

 <div id="app">
        <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
    </div>

    <script src="./base/vue.js"></script>
    <script>
        // binding.name   可以获取指令的名字        v-demo ==>  demo
        //binding.value   可以获取指令的内容        v-demo="message"  ==>  hello
        //binding.expression   字符串形式的指令表达式   v-demo="message"  ==>  message
        //binding.arg    可以获取v-demo:foo  ==>  foo
        //binding.modifiers  可以获取指令的修饰符 v-demo:foo.a.b ==>  {"a":true,"b":true}
        Vue.directive('demo', {
            bind: function (el, binding, vnode) {
                var s = JSON.stringify
                //el 指令所绑定的元素，可以用来直接操作 DOM
                el.innerHTML =
                    'name: ' + s(binding.name) + '<br>' +
                    'value: ' + s(binding.value) + '<br>' +
                    'expression: ' + s(binding.expression) + '<br>' +
                    'argument: ' + s(binding.arg) + '<br>' +
                    'modifiers: ' + s(binding.modifiers) + '<br>' +
                    //vnode：Vue编译的生成虚拟节点；
                    'vnode keys: ' + Object.keys(vnode).join(', ')
            }
        })

        new Vue({
            el: '#app',
            data: {
                message: 'hello!'
            }
        })
    </script>

在这里插入图片描述

函数简写

大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

函数简写案例

简写之前

  <div id="app">
        <p v-color="'pink'">pink pig </p>
        <p v-color="'red'">pink pig </p>
        color==>{{color}}
        <!-- 点击按钮之后,颜色变为绿色 -->
        <p><button @click="color='green'">点击更改color</button></p>
        <p v-color="color">color</p>
    </div>

    <script src="./base/vue.js"></script>
    <script>
        Vue.directive('color', {
            bind: function (el, binding, vnode) {
            //bind只调用一次，指令第一次绑定到元素时调用
                el.style.background = binding.value
            },
            //inserted：被绑定元素插入父节点时调用（父节点存在即可调用)
            //只有用inserted钩子函数的时候,才能在color颜色改变时得到binding.value,从而改变颜色
            update(el,binding){
                el.style.background=binding.value
            }
        })

        new Vue({
            el: '#app',
            data: {
                color:"orange"
            }
        })
    </script>

在这里插入图片描述

简写之后

//简写形式
   Vue.directive("color",function(el,binding,vnode){
            el.style.background=binding.value
        })

  new Vue({
            el: '#app',
            data: {
                color:"orange"
            }
        })

对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法类型的 Javascript 表达式。

<!-- 传入对象 -->
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>
 Vue.directive('demo', function (el, binding) {
	        console.log(binding.value) // => {color: "white", text: "hello!"}
            console.log(binding.value.color) // => "white"
            console.log(binding.value.text)  // => "hello!"
        })

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

在这里插入图片描述

自定义指令与轮播图简单案例

需求:封装一个指令,实现内部帮助我们实例化轮播图的功能
利用swiper插件点击查看swiper插件的使用
出现问题
- swiper插件的使用需要对轮播图进行实例化,swiper实例化了多次之后,其实还是可以进行轮播效果,但是我们发现分页器效果已经失效了
- 因为有三个swiper-slide真实dom生成然后插入,所以new swiper 实例化了3次===>导致了分页器不管用了
解决等最后一个元素插入完成后再去实例化
- 获取到最后一个插入的元素的下标===传入的datalist的数据的长度-1,这时候最后一个元素插入完成,进行实例化就只会实例化一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入swiper.css样式 -->
    <link rel="stylesheet" href="./base/swiper.min.css">
    <style>
        .swiper {
            height: 300px;
            font-size: 50px;
            text-align: center;
            border: 1px solid skyblue;
        }
    </style>
</head>

<body>


    <div id="box">
        <div class="swiper-container swiper">
            <div class="swiper-wrapper">
                <!-- 内部数据datalist发生变化了,然后生成3个swiper-slide真实dom,插入到swiper-wrapper中 -->
                <div class="swiper-slide" 
               		v-for="data,index in datalist" 
               		v-swiper:swiper="{
                            current:index,
                            length:datalist.length,
                            swiper:'swiper'
                                }">
                    <!--swiper 对象字面量 -->
                    {{data}}
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>


    <!-- 引入是wiper or vue 插件 -->
    <script src="./base/swiper.min.js"></script>
    <script src="./base/vue.js"></script>
    <script>
	     // 需求:封装一个指令,实现内部帮助我们实例化轮播图的功能		

        // 有很多的插件,其实只能实例化一次
        // swiper实例化了多次之后,其实还是可以进行轮播效果,但是我们发现分页器效果已经失效了


        // 因为有三个swiper-slide真实dom生成然后插入,所以new swiper  实例化了3次===>导致了分页器不管用了
        // 解决 等最后一个元素插入完成后再去实例化
        //那么获取到最后一个插入的元素的下标===传入的datalist的数据的长度-1
        Vue.directive("swiper", {
            inserted(el, binding, vnode) {
                console.log(binding.value.length)            //通过对象字面量 拿到length 3
                console.log(vnode.context.datalist.length)  //通过vnode 拿到 length  3 

                //最后一个元素插入完毕了,再进行一次实例化操作就可以了
                if (binding.value.current === binding.value.length - 1) {
                    //可以通过  binding.arg    v-swiper:swiper => swipeer 得到轮播图类名
                    //可以通过  binding.value.swiper     得到轮播图类名
                    swiper = new Swiper("." + binding.arg, {//默认swiper会执行3次,因为插入了3个swiper-slide的真实dom
                        loop: true,
                        pagination: {
                            el: ".swiper-pagination"
                        }
                    })
                }

            }
        })


        var vm = new Vue({
            el: "#box",
            data: {
                datalist: []    //定义了初始化数据
            },
            created() {
                //模拟了一个异步请求,3秒之后得到数据,渲染虚拟dom
                setTimeout(() => {
                    this.datalist = ["111", "222", "333"]
                }, 3000);
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

前端魔法师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令及封装轮播图案例

文章目录自定义指令简介自定义指令注册钩子函数钩子函数案例钩子函数参数参数简单案例函数简写函数简写案例对象字面量自定义指令与轮播图简单案例自定义指令简介自定义指令，对普通的DOM元素进行底层操作。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM...
复制链接

扫一扫

专栏目录