Vue自定义指令详解-优快云博客

本文详细介绍了在Vue中如何创建和使用自定义指令，包括全局和局部指令的注册方式，以及如何实现类似于v-text但能转换文本为全大写或全小写的指令。通过实例展示了指令的bind方法如何操作DOM元素。

常用内置指令
v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
</head>
<body>
<div id="test">
    <p v-upper-text="msg"></p>
    <p v-lower-text="msg"></p>
</div>
<div id="test2">
    <p v-upper-text="msg"></p>
    <p v-lower-text="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    // 注册一个全局指令
    // el: 指令所在的标签对象
    // binding: 包含指令相关数据的容器对象
    Vue.directive('upper-text', function (el, binding) {
        console.log(el, binding)
        el.textContent = binding.value.toUpperCase()
    })
    new Vue({
        el: '#test',
        data: {
            msg: "I Like You"
        },
        // 注册局部指令
        directives: {
            'lower-text'(el, binding) {
                console.log(el, binding)
                el.textContent = binding.value.toLowerCase()
            }
        }

    })

    new Vue({
        el: '#test2',
        data: {
            msg: "I Like You Too"
        }
    })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/love-life-insist/p/10097623.html