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

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. 【CF321E】+【bzoj5311】贞鱼

    决策单调性 + WQS二分 我们首先列出转移式: \(f[i]=Min(f[j]+Sum[j+1 , i])\) 首先我们考虑如果让一段区间的小鱼在一起的代价怎么预处理,我们可以对于一个上三角矩阵求个 ...

  2. sde自动备份到文件gdb

    本方法原理是使用python(以下简称py)调用arcmap的gp,在上再用bat调用py的方式实现.优点是能应用于所有数据库类型(包括pg,oracle等)的sde库 环境:arcmap 10.4, ...

  3. [APIO2019] 奇怪装置

    $solution:$ 问题其实就是求两个式子的循环节. 钦定 $t\mod B=0$且 $(t\neq 0)$,其 $t$ 为循环节. 则将 $1$ 式拆开得 $\frac{t\times (B+1 ...

  4. 11-jQuery简介和选择器

    # jQuery > jQuery是一个是免费.开源的javascript库, 也是目前使用最广泛的javascript函数库.>> jQuery极大的方便你完成web前段的相关操作 ...

  5. Spark2.0集成Hive操作的相关配置与注意事项

    前言 已完成安装Apache Hive,具体安装步骤请参照,Linux基于Hadoop2.8.0集群安装配置Hive2.1.1及基础操作 补充说明 Hive中metastore(元数据存储)的三种方式 ...

  6. CentOS 6.5下源码安装LAMP(Linux+Apache+Mysql+Php)环境

    ---恢复内容开始--- 一.系统环境 系统平台:CentOS 6.5 (Final) Apache版本:httpd-2.2.31.tar.gz(最新版本2015-07-16) Mysql 版本:my ...

  7. linux强制用户下线命令

    linux强制用户下线命令   前提:必须是root权限操作:(1)使用who查看目前有哪些用户登录了服务器,见下图(2)使用pkill -kill -t pts/1命令踢出第一个用户.命令解释:pt ...

  8. 实现memcpy()函数及过程总结

    1.为什么会写memcpy 在之前的应聘笔试上遇到一道笔试题,题目要求实现一个my_memcpy函数.函数原型:void * my_memcpy(void *dst, const void *src, ...

  9. loj6038「雅礼集训 2017 Day5」远行 树的直径+并查集+LCT

    题目传送门 https://loj.ac/problem/6038 题解 根据树的直径的两个性质: 距离树上一个点最远的点一定是任意一条直径的一个端点. 两个联通块的并的直径是各自的联通块的两条直径的 ...

  10. mac上如何搜索文件？

    在Mac上如果你用会了搜索功能那绝对是个事半功倍的技巧.因为Mac本身有强大的文件索引能力, 可以帮你快速的找到你需要的文件.就好比我要找到上周修改过的word文档应该怎么办? * 使用语音命令让Si ...