zoukankan      html  css  js  c++  java
  • vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大

    <script>
        
        //指令钩子函数:
        /*
        bind   只调用一次,指令第一次绑定到元素的时调用
        inserted 被指令绑定指令的元素插入 父节点的时候调用
        update  被绑定的元素模版只要发生变化,就会触发(通过比较模板变化前后)
        componentUpdated 被绑定元素所在模版完成一次更新周期时被触发
        unbind 指令被解除绑定的时候
        */

    /*
    定义指令回调函数(钩子函数的几个参数的意义)
    第一个参数:绑定指令的元素html
    第二个参数:对象的形式输出,自定义指令的信息(指令名字,使用的名字,包括我们传入的值,我们可以利用这个参数,在钩子函数中进行相关操作),
    第三个参数:输出绑定指令的元素的虚拟dom节点信息
    */ const selfcomponent={ template:`<div> <p>自定义组件</p> <input v-model="com"/> <p v-my-dir="com">组件的内容:跟随变色</p> </div>`, //props:['color'], data(){ return { com:'#ddd'}//给一个默认值 }, directives:{ "myDir":{//指令的名字 bind:function(el,binding,nodeDom){ console.log(binding); console.log("bind"); el.style="color:"+binding.value; },
    inserted:function(){ console.log(
    "instered"); }, update:function(el,binding,nodeDom){//每次在input中输入信息,都会触发这个函数 console.log("update"); el.style="color:"+binding.value; }, componentUpdated:function(el,bindging,nodeDom){ console.log("componented"); }, unbind:function(el,binding,nodeDom){ console.log("unbind"); } } } };

      var app =new Vue({
        el:"#app",
        data:{
          color:'red',
         },
        methods:{
      
        },
        components:{
          selfcomponent
        }
      });


    </script>
    <div id="app">
         <selfcomponent ></selfcomponent>                             
    </div>

    以上实现的效果是,在输入框输入颜色信息,例如:red,#ddd.....组件中的信息,会随着你输入的信息变色

    当然也可以全局定义指令:

        Vue.directive("mydirective",function(el,pra,a){
            console.log(el);//将元素标签输出
            console.log(pra);//议对象的形式输出,自定义指令的信息,(包括我们传入的值)
            console.log(a);//以对象的形式输出,vue虚拟节点信息
                //console.log(document.getElementsByTagName("li")[0].parentNode);
                el.style="color:"+pra.value;
        });
  • 相关阅读:
    WRF WPS预处理
    CVS安装
    Linux窗口最小化消失,任务栏上无法找到的解决方法
    NCARG安装配置出现error while loading shared libraries: libg2c.so.0问题额解决办法
    Netcdf安装
    Embedding R-generated Interactive HTML pages in MS PowerPoint(转)
    The leaflet package for online mapping in R(转)
    Some 3D Graphics (rgl) for Classification with Splines and Logistic Regression (from The Elements of Statistical Learning)(转)
    What does a Bayes factor feel like?(转)
    Weka算法介绍
  • 原文地址:https://www.cnblogs.com/evaling/p/7252500.html
Copyright © 2011-2022 走看看