Vue基础（五）--自定义指令与过渡

已于 2024-01-24 16:21:29 修改
阅读量473 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2019-10-29 11:52:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xch_yang/article/details/102803497
版权
1.自定义指令

分类：全局指令、局部指令

1.1 自定义全局指令

使用全局方法 Vue.directive(指令ID,定义对象) ，一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。
    示例：
<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title></title>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link href="../css/mui.min.css" rel="stylesheet" />
   </head>

   <body>
       <header class="mui-bar mui-bar-nav">
           <h1 class="mui-title">自定义指令</h1>
       </header>
       <div class="mui-content" id="content">
           <div v-hello>{{msg}}</div>
           <button @click="changeData()" type="button" class="mui-btn mui-btn-blue">更新数据</button>
       </div>
       <script src="../js/mui.min.js"></script>
       <script src="../js/vue.js"></script>
       <script type="text/javascript">
           mui.init()
           /**
            * 自定义全局指令
            * 注，使用自定义指令时必须在指令名称前加前缀v，即v-指令名称
            */
           Vue.directive('hello', {
               bind: function() {
                   alert("指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作");
               },
               inserted: function() {
                   alert("被绑定元素插入DOM中时调用");
               },
               update: function() {
                   alert("被绑定元素所在的模板更新时调用");
               },
               componentUpdated: function() {
                   alert("被绑定的元素所在的模板完成一次更新周期时调用，也就是更新完成了");
               },
               unbind: function() {
                   alert("指令与元素解绑时调用，只调用一次");
               }
           })
           var vm = new Vue({
               el: "#content",
               data: {
                   msg: "hello"
               },
               methods: {
                   changeData:function(){
                       this.msg="world"
                   }
               }
           })
       </script>
   </body>

</html>

1.2 钩子函数的参数 (即 el、binding、vnode 和 oldVnode)

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：

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

vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">自定义指令</h1>
        </header>
        <div class="mui-content" id="content">
<!--            <div v-hello>{{msg}}</div>
            <button @click="changeData()" type="button" class="mui-btn mui-btn-blue">更新数据</button> -->
            
            <div v-demo:我是参数=666>钩子函数参数</div>
            
            <div v-simple>hello world!</div>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
            /**
             * 自定义全局指令
             * 注，使用自定义指令时必须在指令名称前加前缀v，即v-指令名称
             */
            Vue.directive('hello', {
                bind: function() {
                    alert("指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作");
                },
                inserted: function() {
                    alert("被绑定元素插入DOM中时调用");
                },
                update: function() {
                    alert("被绑定元素所在的模板更新时调用");
                },
                componentUpdated: function() {
                    alert("被绑定的元素所在的模板完成一次更新周期时调用，也就是更新完成了");
                },
                unbind: function() {
                    alert("指令与元素解绑时调用，只调用一次");
                }
            })
            
            //钩子函数的参数
            Vue.directive('demo',{
                bind(el,binding){
                    console.log(el);//指令所绑定的元素,DOM对象
                    el.style.color="red";//可以对DOM对象进行操作
                    
                    console.log(binding);//一个对象,包含了name、value等属性
                    console.log(binding.name)//demo
                    console.log(binding.value)//666
                    console.log(binding.arg)//传给指令的参数(我是参数)
                }
            })
            
            //传入一个简单的函数（也就是不写那么多钩子函数，直接写方法）,bind和update时调用
            Vue.directive('simple',function(){
                alert("bind和update时调用");
            })
            
            var vm = new Vue({
                el: "#content",
                data: {
                    msg: "hello"
                },
                methods: {
                    changeData:function(){
                        this.msg="world"
                    }
                }
            })
        </script>
    </body>

</html>

1.3 自定义局部指令

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">自定义指令</h1>
        </header>
        <div class="mui-content" id="content">
<!--            <div v-hello>{{msg}}</div>
            <button @click="changeData()" type="button" class="mui-btn mui-btn-blue">更新数据</button>
            <div v-demo:我是参数=666>钩子函数参数</div>
            <div v-simple>hello world!</div> -->

            <!-- 局部指令 -->
            <input v-focus type="text" v-model="msg">
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
            /**
             * 自定义全局指令
             * 注，使用自定义指令时必须在指令名称前加前缀v，即v-指令名称
             */
            Vue.directive('hello', {
                bind: function() {
                    alert("指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作");
                },
                inserted: function() {
                    alert("被绑定元素插入DOM中时调用");
                },
                update: function() {
                    alert("被绑定元素所在的模板更新时调用");
                },
                componentUpdated: function() {
                    alert("被绑定的元素所在的模板完成一次更新周期时调用，也就是更新完成了");
                },
                unbind: function() {
                    alert("指令与元素解绑时调用，只调用一次");
                }
            })
            //钩子函数的参数
            Vue.directive('demo', {
                bind(el, binding) {
                    console.log(el); //指令所绑定的元素,DOM对象
                    el.style.color = "red"; //可以对DOM对象进行操作

                    console.log(binding); //一个对象,包含了name、value等属性
                    console.log(binding.name) //demo
                    console.log(binding.value) //666
                    console.log(binding.arg) //传给指令的参数(我是参数)
                }
            })
            //传入一个简单的函数（也就是不写那么多钩子函数，直接写方法）,bind和update时调用
            Vue.directive('simple', function() {
                alert("bind和update时调用");
            })

            var vm = new Vue({
                el: "#content",
                data: {
                    msg: "hello"
                },
                methods: {
                    changeData: function() {
                        this.msg = "world"
                    }
                },
                directives: { //自定义局部指令
                    focus: {
                        //当被绑定元素插入到DOM中时,获取焦点
                        inserted(el) {
                            el.focus();
                        }
                    }
                }
            })
        </script>
    </body>

</html>

1.4 自定义指令实战

拖动页面中的元素（onmouseover,onmouseout,onmousedown,onmousemove,onmouseup）,使用自定义指令。

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style>
            .hello{
                position: absolute;
                height: 50px;
                width: 50px;
                background: #007AFF;
                top: 0px;
                left: 0px;
            }
            .world{
                position: absolute;
                height: 50px;
                width: 50px;
                background: #2AC845;
                top: 0px;
                right: 0px;
            }
        </style>
    </head>

    <body>
        <div id="content">
            <div class="hello" v-drag>{{msg}}</div>
            <div class="world"b v-drag>world</div>
        </div>
        <script src="../js/vue.js"></script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()

            var vm = new Vue({
                el: "#content",
                data: {
                    msg: "hello"
                },
                directives: {
                    drag: function(el) {
                        console.log(el);
                        el.onmousedown = function(e) { //鼠标按下
                            console.log(e.clientX); //鼠标点击位置距离页面左侧的距离
                            console.log(el.offsetLeft); //div元素距离页面左侧的距离

                            //获取鼠标点击处分别与div左边和上边的距离(鼠标位置-div距离）)
                            var disX = e.clientX - el.offsetLeft;
                            var disY = e.clientY - el.offsetTop; //上边
                            console.log(disX, disY);

                            //移动(用document，不用el,为了防止鼠标移出div使用document.onmousemove)
                            document.onmousemove = function(e) {
                                //获取移动后div的位置(鼠标位置-disX/disY)
                                var l = e.clientX - disX;
                                var t = e.clientY - disY;
                                el.style.left = l + "px";
                                el.style.top = t + "px";
                            }

                            //停止移动(鼠标弹起时)
                            document.onmouseup = function(e) {
                                document.onmousemove = null;
                                document.onmouseup = null;
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>

2.过渡（动画）
2.1 简介

Vue在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果，本质上还是使用css3动画，transition、animation

2.2 基本用法

使用transition组件，将需要动画的元素放入组件中

  <transition name="">
    元素
  </transition>

过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。

  • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
11610148-418579d33e504c5a.png
image

注：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style>
            .hello{
                width: 200px;
                height: 200px;
                background: #007AFF;
            }
            .fade-enter-active,.fade-leave-active{
                transition: all 3s ease;
            }
            .fade-enter-active{/*进入后*/
                opacity: 1;
                width: 200px;
                height: 200px;
            }
            .fade-leave-active{
                opacity: 0;/*透明度0，当宽高为20的时候变为0*/
                width: 20px;
                height: 20px;
            }
            /*进入的初始状态，需要放在.fade-enter-active的后面*/
            .fade-enter{
                opacity: 0;
                width: 50px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <div id="content">
            <button @click="show=!show">显示/隐藏</button>
            <transition name="fade">
                <div class="hello" v-show="show">{{msg}}</div>
            </transition>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({
                el: "#content",
                data: {
                    show: false,
                    msg: "hello world!"
                }
            })
        </script>
    </body>

</html>

钩子函数
可以在属性中声明 JavaScript 钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style>
            .hello{
                width: 200px;
                height: 200px;
                background: #007AFF;
            }
            .fade-enter-active,.fade-leave-active{
                transition: all 3s ease;
            }
            .fade-enter-active{/*进入后*/
                opacity: 1;
                width: 200px;
                height: 200px;
            }
            .fade-leave-active{
                opacity: 0;/*透明度0，当宽高为20的时候变为0*/
                width: 20px;
                height: 20px;
            }
            /*进入的初始状态，需要放在.fade-enter-active的后面*/
            .fade-enter{
                opacity: 0;
                width: 50px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <div id="content">
            <button @click="show=!show">显示/隐藏</button>
            <transition name="fade" 
            @before-enter="beforeEnter" 
            @enter="enter" 
            @after-enter="afterEnter" 
            @enter-cancelled="enterCancelled"
            @before-leave="beforeLeave"
            @leave="leave" 
            @after-leave="afterLeave" 
            @leave-cancelled="leaveCancelled">
                <div class="hello" v-show="show">{{msg}}</div>
            </transition>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({
                el: "#content",
                data: {
                    show: false,
                    msg: "hello world!"
                },
                methods: {
                    beforeEnter: function(el) {
                        // alert("动画进入之前");
                    },
                    enter: function(el) {
                        // alert("动画进入时");
                    },
                    afterEnter: function(el) {
                        // alert("动画进入之后");
                        el.style.background="red";
                    },
                    beforeLeave: function(el) {
                        // alert("动画即将离开之前");
                    },
                    leave: function(el) {
                        // alert("动画离开时");
                    },
                    afterLeave: function(el) {
                        // alert("动画离开之后");
                        el.style.background="blue";
                    }
                }
            })
        </script>
    </body>

</html>

2.3 结合第三方动画库animate.css一起使用

示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <link href="../css/animate.css" rel="stylesheet" />
        <style>
            .hello{
                width: 100px;
                height: 100px;
                background: #4CD964;
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div id="content">
            <button @click="show=!show">显示/隐藏</button>
            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                <div class="hello" v-show="show">{{msg}}</div>
            </transition>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
            var vm = new Vue({
                el: "#content",
                data: {
                    show: false,
                    msg: "hello world!"
                }
            })
        </script>
    </body>

</html>

注：使用animate动画库的class时要先加上它的基础class，比如我们要使用从左进入的动画，需这样写：

class="animated bounceInLeft"

2.4 多元素动画

<transition-group> 元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag 属性配置哪个元素应该被渲染。

注意，每个 <transition-group> 的子节点必须有 独立的 key ，动画才能正常工作

<transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类 (通过 name 属性或配置 move-class 属性自动生成)。如果 CSS transform 属性是“可过渡”属性，当应用移动类时，将会使用 FLIP 技术 使元素流畅地到达动画终点。

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

练习：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <link href="../css/animate.css" rel="stylesheet" />
        <style>
            .hello{
                width: 100px;
                height: 100px;
                background: blue;
                margin: 10px auto;
            }
        </style>
    </head>

    <body>
        <div id="content">
            <input type="text" v-model="name" placeholder="输入一些字符,如果底下元素包含则显示" />
            <transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                <div v-for="(item,index) in arr2" class="hello" :key="index" v-show="show">
                    {{item}}
                </div>
            </transition-group>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init();
            var vm = new Vue({
                el: "#content",
                data: {
                    show: true,
                    msg: "hello world!",
                    arr: ['tom', 'jack', 'chaoyoung', 'mark', 'rose', 'curry'],
                    name: ""
                },
                computed: { //利用计算属性,筛选真正需要显示的arr(也就是包含输入框里的字符的)
                    arr2: function() {
                        var temp = [];
                        this.arr.forEach(value=>{
                            if (value.includes(this.name)) {
                                console.log('包含:'  + '--' + value);
                                temp.push(value);
                            }
                        })
                        return temp;
                    }
                },
                watch: {
                    name: function(newValue, oldValue) {
                        console.log("name变成了:" + newValue)
                    }
                }
            })
        </script>
    </body>

</html>

原创不易，转载请注明出处。

程序员大佬超
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
（详解）Vue3自定义指令
大雾起了清晨
05-28 2238
created：在绑定元素的 attribute 或事件监听器被应用之前调用；beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；mounted：在绑定元素的父组件被挂载后调用，大部分自定义指令都写在这里；beforeUpdate：在更新包含组件的 VNode 之前调用；updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；beforeUnmount：在卸载绑定元素的父组件之前调用；
Vue 全局自定义指令使用
pzh044511的博客
08-19 495
2.自定义指令内部逻辑。
Vue中的自定义指令和使用方式，2024年最新前端大事件项目
最新发布
2401_84140023的博客
04-11 664
（1）定义全局自定义指令以下就是一个自定义指令让文本框获取焦点的实例：//自定义全局的指令//第一个参数永远是el，表示原生的js对象bind: function (el) { //当指令绑定到元素上的时候，会立即执行bind函数，只执行一次，此时元素还没有插入到DOM中,focus聚焦此时不会生效el.focus()},inserted: function (el) { //当元素插入到DOM中的时候，会执行inserted函数，只执行一次el.focus()},
Vue2 局部自定义指令 / 全局自定义指令
技术前端，忠于热爱 @0.活在风浪里
12-06 3705
全局自定义指令 1 在mian.js写 2 在需要的组件使用 局部自定义指令 directives全局没有s 局部加s 写法也不同 script> export default { data() { return { color: "red",//为 变量背景色局部自定义指令 写值 }; }, methods: {}, components: {}, created() {}, //局部 的自定义指令directives与da.
Vue指令（常用指令介绍和使用、自定义全局与局部指令、钩子函数和钩子函数参数等）
AIWWY的博客
05-05 1680
目录 Vue指令 v-model 修饰符 v-bind:（:） 修饰符 绑定属性 绑定样式 对象和数组的绑定的方式注意点 v-on:（@） 修饰符 v-show v-if v-else v-else-if v-for 复用原则导致数据混乱问题 解决方法 v-text v-html v-once v-clock v-slot:(#) 自定义指令 自定义全局指令 Vue.directive('color',{bind(el,obj,vnode,oldVnode)
全局自定义指令
weixin_54160772的博客
08-19 256
全局自定义指令
vue基础知识-菜鸟入门
01-03
10. **自定义类名 事件过渡.html**: Vue的过渡系统支持通过`v-bind:class`和`v-bind:style`指令动态绑定类和样式，以及在过渡过程中添加特定的类。同时，可以使用`v-on`指令配合事件修饰符来控制过渡事件，如`v-on:...
vue-基础-进阶-111
02-01
2. **数据绑定**：Vue的数据绑定基于声明式语法，允许开发者使用`v-bind`指令将JavaScript变量与DOM元素属性关联。双向数据绑定则通过`v-model`实现，常见于表单元素，确保视图和模型的同步。 3. **指令与过滤器**...
v-blur:VVue指令动态模糊元素
05-12
绑定对象属性选项默认类型isBlurred 错误的布尔值不透明0.5 数字筛选'模糊（1.5px）' 细绳过渡'所有.2s线性' 细绳用import Vue from 'vue'import vBlur from 'v-blur'Vue . use ( vBlur )// Alternatively an ...
Vue.js自定义指令的用法与实例解析
11-30
市面上大多数关于Vue.js自定义指令的文章都在讲语法，很少讲实际的应用场景和用例，以致于即便明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。 　自定义指令是用来操作DOM的。尽管Vue推崇数据...
vue 注册或获取全局指令directive
01-07
注册方法 Vue.directive(‘my-directive’, { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) {{msg}} 更新 ```import Vue from 'vue'; Vue.directive(loading,{ update(el,binding,vnode){ if(binding.value){ co
vue基础1-12！！！！！
06-08
12. **指令与组件的自定义**：开发者可以根据需求自定义指令和组件，扩展Vue的功能，实现个性化开发。 通过学习这些基础概念，开发者可以逐步掌握Vue.js的使用，为构建复杂的应用奠定坚实的基础。在实际项目中，...
vue初识之自定义指令
qq_45907365的博客
05-11 407
Vue中的自定义指令是一种扩展Vue功能的方式，可以用来封装常用的DOM操作或者添加一些特殊的行为。自定义指令可以在Vue实例中全局注册或者局部注册，注册后可以在模板中使用v-指令的形式调用全局自定义指令是在Vue实例化之前定义的指令，可以在整个应用程序中使用。定义全局指令需要使用Vue.directive()方法// 全局定义 // 第一个参数 自定义指令的名字,定义时不加v-,使用时加v- // 第二个参数 对象{} Vue . directive('color' , {
自定义指令解析
weixin_62916044的博客
06-24 864
Vue中的自定义指令解析
vue之自定义指令
WHTGS的博客
04-06 259
在vue中有很多指令，例如：v-on v-bind v-model v-for v-if等等，通过这些指令，可能也能最终达到我们需要的效果，为何要弄个自定义指令呢？ 通过使用自定义指令，我们会发现它对dom的操作更加方便、更灵活、可复用（全局）。接下来就详细介绍一下自定义指令的使用。 一、自定义指令的分类： 1 全局自定义指令： 顾明私有，全局的元素都可以使用这个指令，通过一个小栗子我们简单了...
【Vue】基础系列（十一）Vue指令-常用内置指令-自定义指令-全局指令-局部指令
YK菌的博客
01-25 1813
学习Vue常用内置指令与自定义指令
vue的全局指令
anshaobiao6449的博客
01-31 559
vue有四个全局指令：directive、extent、set、component directive:自定义指令 //写一个改变颜色的指令 Vue.directive('amie',function(el,binding,vnode){ el.style='color:'+binding.value; }); //HTML <div v-am...
75-局部自定义指令——bind和update方法
jolinoy的博客
07-08 420
75-局部自定义指令——bind和update方法这里通过directives指令实现。
vue--点击图片放大的自定义指令（低级版）
05-26
好的，以下是一个简单的自定义指令实现点击图片放大的功能： ```javascript Vue.directive('enlarge', { bind: function (el) { el.addEventListener('click', function () { el.style.transform = 'scale(2)'; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员大佬超

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

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

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

打赏作者

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

抵扣说明：

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

余额充值