vue学习（25）自定义指令

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-03-10 11:33 被阅读0次

season2-全局API
Vue div节点滚动事件-加载更多
Vue-02：
VUE-2：自定义指令、事件
vue入门6---vue基本指令、自定义指令、插件
vue自定义指令初探
vue 有自定义指令
vue学习（25）自定义指令
Vue指令钩子函数
vue自定义指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
</head>

<body>
    <div id="root">
        <!-- 1：定义一个v-big指令，和v-text类似，只是把内容放大10倍 -->
        <!-- 2： 定义一个v-fbind指令，和v-bind类似，可以让input默认获取焦点-->
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍后的n值是:<span v-big-number="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <input type="text" v-fbind:value="n">
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        // 全局
        //Vue.directive('xxx',function(){})
        const vm = new Vue({
            el: '#root',
            data: {
                n: 1
            },
            directives: {
                'big-number'(element, binding) {
                    //注意此处的this为window
                    //big函数何时调用：1指令和元素成功绑定时2：指令所在的模板被重新解析。
                    // element是真实dom。
                    console.log(element instanceof HTMLElement);
                    element.innerText = binding.value * 10;
                },
                fbind: {
                    //指令与元素绑定（一上来）
                    bind(element, binding) {
                        element.value = binding.value;
                    },
                    //指令所在的元素被插入页面
                    inserted(element, binding) {
                        element.focus();
                    },
                    //指令所在的模板被重新解析
                    update(element, binding) {
                        element.value = binding.value;
                    }
                }

            }
        })
    </script>
</body>

</html>

知识点

1：局部指令
new Vue({
directives:{指令名，配置对象}
})
new Vue({
directives:{指令名，回调函数}
})
2：全局指令
Vue.directive(指令名，配置对象)
Vue.directive(指令名，回调函数)
3：配置对象中常用的三个回调
①：bind：指令与元素成功绑定时。
②：inserted：指令所在的元素被插入页面时。
③：update ：指令所在的模板被重新解析时。
4：定义指令时不加v-,使用时加v-。
5：指令名是多个单词时，要使用kebab-case的格式，不要使用camelCase。函数名需要加上引号。