vue指令

最新推荐文章于 2024-06-08 19:38:05 发布

Simple_IDE

最新推荐文章于 2024-06-08 19:38:05 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/simple5960/article/details/117015155

vue 专栏收录该内容

59 篇文章

订阅专栏

本文详细介绍了Vue框架中自定义指令的使用方法，包括Vue2与Vue3版本的不同实现方式，并通过实例展示了如何创建自定义指令来操作DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2注册指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="demo">
        <p ref="content">hello world</p>
        <button @click="hint">提示</button>
        <p v-cloak>{{msg}}</p>
    </div>
    <div id="test1">
        <p v-upper-text=msg1></p>
        <p v-lower-text=msg1></p>
    </div>
    <div id="test2">
        <p v-upper-text=msg2></p>
        <p v-lower-text=msg2></p>
    </div>
    <script>
        
        new Vue({
            el:"#demo",
            data:{
                msg:"shit"//在加载前不会显示，使用v-cloak使其不显示
            },
            methods: {
                hint(){
                        alert(this.$refs.content.innerHTML)
                }
            },
        })
        //定义全局指令
        //Vue.directive(id, [definition])
        //el是指令属性所在的标签对象
        //binding包含指令相关信息的对象 如P.value
        Vue.directive('upper-text',function(el,binding){
            console.log(el,binding)
            el.textContent=binding.value.toUpperCase()
        })
        new Vue({
            el:"#test1",
            data:{
                msg1:"What The Tell With U"
            },
            //注册局部指令
            directives:{
                'lower-text':function(el,binding)
                {
                    el.textContent=binding.value.toLowerCase()
                }

            }
        })
        new Vue({
            el:"#test2",
            data:{
                msg2:"What Is Your PornHub"
            }
        })
    </script>
</body>
</html>

vue3注册指令

<div id="app">
   <input v-focus />
</div>
<script>
   const { createApp } = Vue
   
   const app = Vue.createApp({}) // ①
   app.directive('focus', { // ② 
     // 当被绑定的元素挂载到 DOM 中时被调用
     mounted(el) {
       el.focus() // 聚焦元素
     }
   })
   app.mount('#app') // ③
</script>

参考