学习vue第九节，自定义vue指令

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
            <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
            
    </head>
    <body>
        <div id="app">
            
            <!-- 调用局部指令 v-fontweight v-fontsize -->
            <input type="text" v-model="msg1" v-fontweight="'bold'" /><span v-fontsize='"25px"'>{{msg1}}</span>
            
            <br />
            <!-- 调用全局指令 v-focus v-focus 有参数的情况下加双引号 -->
            <input type="text" v-focus v-color='"red"'/>
        </div>
        <script type="text/javascript">
            // 自定义 全局指令。
            // 参数1：指令名称，不用加v-前缀
            // 参数2：对象，可以加一些指令相关的函数
            Vue.directive('focus',{
                // inserted 表示被绑定元素插入父节点时调用,触发函数【触发一次】
                inserted:function(el){//el参数表示添加指令的dom对象
                    el.focus();
                }                
            })
            
            Vue.directive('color',{
                // 每当绑定到元素上时，会立即执行（相当于在内存中就执行，所有focus指令不能用bind）【触发一次】
                bind:function(el,binding){//el参数表示添加指令的dom对象,binding 表示一个对象，有多个属性
                // binding.name  binding.value  binding.expression 
                    el.style.color=binding.value;
                }                
            })
            var vm=new Vue({
                el:'#app',
                data:{
                    msg1:''
                },
                methods:{
                    
                },
                directives:{//定义私有的指令
                    'fontsize':{
                        bind:function(el,size){
                             el.style.fontSize=size.value
                        }
                    },
                    'fontweight':function(el,weight){//定义私有的指令简写-默认使用bind 和update ，参照color的bind
                        el.style.fontWeight=weight.value;
                        
                    }
                }
                
            })
        </script>
    </body>
</html>
复制代码

以前都是用vue自带的指令，现在我们也可以自己创建指令了

posted @   三线码工  阅读(123)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示