一、自定义指令的创建和使用

Vue自带的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...
但是这些指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，如何来自定义指令.

1、自定义指令
①创建
new Vue({
　　directives:{
　　　　change:{
　　　　　　bind:function(){},
　　　　　　update:function(){},
　　　　　　unbind:function(){}
　　　　}
　　}
})

在自定义指令时，在指令对应的配置对象中有3个处理函数指令对应的操作
bind
　　指令在绑定到元素要执行的操作
update
　　如果在调用指令时候，传了参数，当参数变化时候，就会执行update所指定的方法
unbind
　　解绑要执行的操作

②使用自定义指令
directives:{
　　hello:{
　　　　bind:function(){},
　　　　update:function(){},
　　　　unbind:function(){}
　　}
}

使用：
　　v-hello

注意事项：
建议在给指令的命名采用小驼峰式的命名方式，比如changeBackgroundColor,在使用的时候，采用烤串式写法 v-change-background-color

（方法：参数，返回值）

bind方法以及update方法 都是有参数的，
一个是el，对应的是调用指令的元素
一个bindings，是一个对象：name/rawName/value/oldValue...

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="js/vue.js"></script>

    <title></title>

</head>

<body>

<div id="container">

    <p>{{msg}}</p>

    <!-- 准备实现需求：

    在h1标签上面，加上一个按钮，当点击按钮时候，对count实现一次

    自增操作，当count等于5的时候，在控制台输出‘it is a test’

    -->

    <button @click="handleClick">clickMe</button>

    <h1

            v-if="count < 6"

            v-change="count">it is a custom directive</h1>

</div>

<script>

    //directive

    new Vue({

        el: '#container',

        data: {

            msg: 'Hello Vue',

            count:0

        },

        methods:{

            handleClick: function () {

                //按钮单击，count自增

                this.count++;

            }

        },

        directives:{

            change:{

                bind: function (el,bindings) {

                    console.log('指令已经绑定到元素了');

                    console.log(el);

                    console.log(bindings);

                    //准备将传递来的参数

                    // 显示在调用该指令的元素的innerHTML

                    el.innerHTML = bindings.value;

                },

                update: function (el,bindings) {

                    console.log('指令的数据有所变化');

                    console.log(el);

                    console.log(bindings);

                    el.innerHTML = bindings.value;

                    if(bindings.value == 5)

                    {

                        console.log(' it is a test');

                    }

                },

                unbind: function () {

                    console.log('解除绑定了');

                }

            }

        }

    })

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="js/vue.js"></script>

    <title></title>

</head>

<body>

<div id="container">

    <p>{{msg}}</p>

    <h1 v-change-background-color="myBgColor">

        it is a header1

    </h1>

</div>

<script>

    new Vue({

        el: '#container',

        data: {

            msg: 'Hello Vue',

            myBgColor:'#ff0000'

        },

        directives:{

            changeBackgroundColor:{

                bind: function (el,bindings) {

                    console.log('in bind ');

                    console.log(bindings.value);

                    el.style.backgroundColor = bindings.value;

                }

            }

        }

    })

</script>

</body>

</html>

<h4 v-change-background-color="'red'">背景色</h4>这样也是可以的，但是写死了，不好

vue自定义指令的创建和使用的更多相关文章

  1. 每个人都能实现的vue自定义指令

    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...

  2. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  3. vue 自定义指令的魅力

    [第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...

  4. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  5. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

  6. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  7. Vue自定义指令报错：Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  8. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

  9. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

随机推荐

  1. ubuntu终端代理之proxychains

    命令行代理 安装proxychains sudo apt install proxychains 配置proxychains sudo vim /etc/proxychains.conf 在proxy ...

  2. [HNOI2016]树（可持久化线段树+树上倍增）

    [HNOI2016]树(可持久化线段树+树上倍增) 题面 给出一棵n个点的模板树和大树,根为1,初始的时候大树和模板树相同.接下来操作m次,每次从模板树里取出一棵子树,把它作为新树里节点y的儿子.操作 ...

  3. [常用类]StringBuffer 类，以及 StringBuilder 类

    线程安全,可变的字符序列. 字符串缓冲区就像一个String ,但可以修改. 在任何时间点,它包含一些特定的字符序列,但可以通过某些方法调用来更改序列的长度和内容. 字符串缓冲区可以安全地被多个线程使 ...

  4. Javascript 中的深浅拷贝

    工作中经常会遇到需要复制 JS 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 为什么会有深浅拷贝 想要更加透彻的 ...

  5. [THUPC2018] 弗雷兹的玩具商店

    link $solution:$ 好久没写数据结构了,那就写道简单题吧! 可以发现 $m\leq 50$,所以可以去取在 $[l,r]$ 中当价格相同时愉悦值最高的做完全背包 $dp$ . 发现修改价 ...

  6. 高端编程之DOM

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. srs-librtmp pusher(push h264 raw)

    Simple Live System Using SRS https://www.cnblogs.com/dong1/p/5100792.html 1.上面是推送文件,改成推送缓存 封装了三个函数 i ...

  8. VMware新加网卡NAT连接（内网）出现本机与虚拟机ping不通的问题

    今新加网卡NAT连接,配置好之后始终出现eth1:link is not ready. 虚拟机与本机不能建立连接. 解决方案:windows里面打开服务开启VMware NAT Service,并关闭 ...

  9. 7——C++类的使用

     定义了一个类之后,便可以如同用int.double等类型符声明简单变量一样,创建该类的对象,称为类的实例化.           类的定义实际上是定义了一种类型,类不接收或存储具体的值,只作为生成具 ...

  10. SOAP、WSDL、 UDDI之间的关系

    SOAP(Simple Object Access Protocol) 简单对象访问协议: WSDL(Web Services Description Language) Web服务描述语言: UDD ...