zoukankan      html  css  js  c++  java
  • vue.directive自定义指令

    <body>
        <h2>vue.directive自定义指令</h2>
        <div id="app">
        
                <p v-cai="color">{{num}}</p>
                 <!-- <button v-on:click="add">Add</button> -->    
                 <button @click="add">Add</button>
                 <p><button onclick="unbind()">解绑</button></p>
            
        </div>
        
    </body>
    <script type="text/javascript">
        //全局API  在构造器外部用Vue提供给我们的  api函数来定义新的功能
        // Vue.directive("cai",function(el,binding){  //  cai 是自定义api  名字。参数  el  是指 p标签对象, binding是 接口数据对象            
        //     console.log(binding);
        //     console.log(el);
        //     el.style="color:"+binding.value;
    
        // });
        function unbind(){
            app.$destroy();//解绑   销毁解绑  app为   vue实例化化对象  变量app
        }
        Vue.directive("cai",{  //directive命令
            bind:function(el,binding){
                console.log('bind  只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作');
                el.style.color=binding.value;
            },
            inserted:function(){
                console.log("inserted 被绑定元素插入父节点时调用 父节点存在即可调用,不必存在于document中")
            },
            update:function(){
                console.log("update,被绑定于元素所在的模版更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模版更新")
            },
            componentUpdated:function(){
                console.log("componentUpdated,被绑定元素所在模版完成一次更新周期时调用")
            },
            unbind:function(){
                console.log("unbind,只调用一次,指令与元素解绑时调用")
            }
        })
    
    
        var app=new Vue({
            el:"#app",
            data:{
                num:10,
                color:'red'
            },
            methods:{   //   方法   名字固定
                add:function(){   //  add函数名  随意写
                    this.num++;
                }
            }
        })
    </script>
  • 相关阅读:
    Flutter DraggableScrollableSheet 可滚动对象的容器
    Flutter 避免阻塞ui线程
    Android Kotlin 数据驱动模板
    ng mock服务器数据
    rxjs 常用的subject
    Flutter 在同一页面显示List和Grid
    dart2native 使用Dart 在macOS,Windows或Linux上创建命令行工具
    Flutter 创建透明的路由页面
    ng 发布组件库
    js实现单张或多张图片持续无缝滚动
  • 原文地址:https://www.cnblogs.com/jinsuo/p/8478850.html
Copyright © 2011-2022 走看看