vue中自定义指令-优快云博客

本文链接：https://blog.youkuaiyun.com/gunsmoke/article/details/106206486

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="main" class="container">
        <!--用自定义指令去操作dom-->
        <div v-gunsmoke>自定义指令</div>
        <!--绑定初始值的指令-->
        <div v-gunsmoke1="'200px'">自定义指令1</div>
    </div>

    <script>
        Vue.directive('gunsmoke',{
            //inserted生命周期只会执行一次
            inserted(element) {
                //element是自动传入的对象,这里输出结果为<div>自定义对象</div>
                console.log(element);
                //得到dom就可以为所欲为了
                element.style.fontSize = '90px';
                console.log('gunsmoke inserted')
            }
        });
        Vue.directive('gunsmoke1',{
            //inserted生命周期只会执行一次
            inserted(element,binding) {
                //element是自动传入的对象,这里输出结果为<div>自定义对象</div>
                //binding是绑定的初始值 
                console.log(element,binding);
                //得到dom就可以为所欲为了
                element.style.fontSize = binding.value;
                console.log('gunsmoke inserted')
            },
            //更新操作,每次更新都会执行
            update(el,bind) {
                console.log(el,bind)
            }
        });
        new Vue({
            el: '#main',
            data: {
            },
            methods: {
            }
        })
    </script>

</body>
</html>