vue自定义指定

最新推荐文章于 2024-07-22 08:55:10 发布

qq_40051569

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量124

点赞数

分类专栏：前端 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40051569/article/details/129401490

版权

前端 vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

自定义指定

附加记录：
在这里插入图片描述

在这里插入图片描述

<body>
    <div id="app">
       <h2>当前的值：<span v-text="account"></span></h2>
       <!-- v-big-number -->
       <h2>十倍：当前的值：<span v-big="account"></span></h2>
       <button @click="account++">+1</button>
       <br>
       <input type="text" v-fbig:value="account">
    </div>
    <script type="text/javascript" >
        // 定义全局指令
        // Vue.directive('fbig',{
        //     // 指令与元素成功绑定时调用
        //     bind(element,binding){
        //         element.value = binding.value
        //     },
        //     // 指令所在元素被插入页面时调用
        //     inserted(element,binding){
        //         element.focus()
        //     },
        //     // 指令所在模板被重新解析时调用
        //     update(element,binding){
        //         console.log(binding.value)
        //         element.value = binding.value
        //         vm.account = binding.value
                
        //     },
        // })
        // Vue.directive('big',function(element,binding){
        //     console.log(binding)
        //     element.innerText = binding.value * 10
        // })
        const vm = new Vue({
            el:'#app', 
            data:{
                account:'12'
            },
            // 指令相关的this 都是windonw
            directives:{
                // big:{},
                // element 真是dom模板
                // binding 里面有value，还有表达式，
                // 指令与元素成功绑定时，调用（第一次） | 指令所在的模板被重新解析时调用
                // 'big-number'
                big(element,binding){
                    // console.log(binding)
                    element.innerText = binding.value * 10
                },
                // 简写方式，相当于，bind和update，没有inserted
                fbig:{
                    // 指令与元素成功绑定时调用
                    bind(element,binding){
                        element.value = binding.value
                    },
                    // 指令所在元素被插入页面时调用
                    inserted(element,binding){
                        element.focus()
                    },
                    // 指令所在模板被重新解析时调用
                    update(element,binding){
                        console.log(binding.value)
                        element.value = binding.value
                        vm.account = binding.value
                        
                    },
                },
                // fbig(element,binding){
                //     element.value = binding.value
                //     element.focus()
                // }
            }
        })
    </script>
</body>