vue自定义指令

最新推荐文章于 2023-07-03 17:05:53 发布

jojo付啾啾

最新推荐文章于 2023-07-03 17:05:53 发布

阅读量146

点赞数

分类专栏： vue 文章标签： vue自定义指令

本文链接：https://blog.csdn.net/dreamfj/article/details/116206157

版权

vue 专栏收录该内容

80 篇文章 3 订阅

订阅专栏

directive方法接收两个参数：

第一个：指令名称（string），不需要v-

第二个：配置项（object），指令可以在不同的生命周期阶段执行，参考官方文档的钩子函数：https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0

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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   <div id="app">
       <p v-color="color">我是p</p>
       <input type="text" v-focus>
   </div>
   <script>
       Vue.directive('color', {
        bind: (el, binding) => {
            el.style.color = binding.value
        }
       })

       Vue.directive('focus', {
        // 此时需要元素渲染之后才能聚焦，所以不能使用bind
        inserted: (el) => {
            el.focus()
        }
       })
       const vue = new Vue({
           el: '#app',
           data: {
            color: 'blue'
           }
       })
   </script>
</body>
</html>

2、自定义局部指令

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   <div id="app">
       <p v-color="color">我是p</p>
   </div>
   <script>
        const vue = new Vue({
            el: '#app',
            data: {
                color: 'red'
            },
            directives: {
                color: {
                    bind: (el, binding) => {
                        el.style.color = binding.value
                    }
                }
            }
        })
   </script>
</body>
</html>

jojo付啾啾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义指令

directive方法接收两个参数：第一个：指令名称（string），不需要v-第二个：配置项（object），指令可以在不同的生命周期阶段执行，参考官方文档的钩子函数：https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B01、自定义全局指令<!DOCTYPE html><html lang="en"><head> &
复制链接

扫一扫