自定义指令创建:

Vue.directive( 'mycolor(指令名称:推荐全部小写,驼峰命名会出现问题,看最后面)' , {

  bind:function(){},

  //本例只介绍inserted

  inserted:function(el, binding){

    el.style.color="red"; // 第一种使用

    el.style.color=binding.value; // 第二种使用

    //el: dom元素; binding: 一个对象,里面包含着vue实例data里面的数据

  },

  update:function(){},

  compinentUpdated:function(){},

  unbind:function(){}

});

new一个vue对象实例:

var vm = new Vue({

  data:{

    color:"gold"

  }

})

应用:

<p v-mycolor> test文本 </p> //第一种使用,结果是红色字体

<p v-mycolor="color"> test文本</p> // 第二种使用,结果是金色字体

问题:

  指令定义时使用驼峰命名,假如命名为myColor,那么应用的时候写的是v-myColor会报错,正确应该是写v-my-color,所以推荐全部小写。

Vue.directive添加全局指令详解的更多相关文章

  1. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  2. Vue插件编写、用法详解(附demo)

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  3. 迈向angularjs2系列(2):angular2指令详解

    一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...

  4. pragma comment的使用 pragma预处理指令详解

    pragma comment的使用 pragma预处理指令详解   #pragma comment( comment-type [,"commentstring"] ) 该宏放置一 ...

  5. pragma指令详解(转载)

    #pragma comment( comment-type [,"commentstring"] ) 该宏放置一个注释到对象文件或者可执行文件.comment-type是一个预定义 ...

  6. npm安装vue详细教程(图片详解)

    npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...

  7. #pragma 预处理指令详解

    源地址:http://blog.csdn.net/jx_kingwei/article/details/367312 #pragma  预处理指令详解              在所有的预处理指令中, ...

  8. Docker技术入门与实战 第二版-学习笔记-3-Dockerfile 指令详解

    前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件 格式: COPY  <源路径> .. ...

  9. nginx.conf中关于nginx-rtmp-module配置指令详解

    译序:截至 Jul 8th,2013 官方公布的最新 Nginx RTMP 模块 nginx-rtmp-module 指令详解.指令Corertmp语法:rtmp { ... }上下文:根描述:保存所 ...

随机推荐

  1. iOS SDWebImage知识点

    1.clear 和 clean clear 先把之前的缓存文件夹删除掉,然后新建一个文件夹 clean 先删除过期的文件,然后计算剩余缓存文件的大小 currentSize > maxSize, ...

  2. Tomcat不停机部署项目

  3. Oracle基础知识点——Oracle服务端和客户端

    Oracle服务端 服务端提供oracle服务的实例,其是数据库的核心,用于数据库的管理,对象的管理与存储.数据的存储.查询.数据库资源的监控.监听等一些服务. 例子:比如一台机子上安装了Oracle ...

  4. Java基础学习-流程控制语句

    在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.也就是说程序的流程对运行结果有直接的影响.所以,我们必须清楚每条语句的执行流程.而且,很多时候我们要通过控制语句的执行顺序来实现我 ...

  5. [译]RabbitMQ教程C#版 - 发布订阅

    先决条件 本教程假定 RabbitMQ 已经安装,并运行在localhost标准端口(5672).如果你使用不同的主机.端口或证书,则需要调整连接设置. 从哪里获得帮助 如果您在阅读本教程时遇到困难, ...

  6. error——Fusion log——Debugging Assembly Loading Failures

    原文 So...you're seeing a FileNotFoundException, FileLoadException, BadImageFormatException or you sus ...

  7. linux下自动获取并安装软件包 apt-get 的命令介绍

    apt-cache search package    搜索包 apt-cache show package    获取包的相关信息,如说明.大小.版本等 sudo apt-get install p ...

  8. 20165306 Exp6 信息搜集与漏洞扫描

    Exp6 信息搜集与漏洞扫描 一.实践内容概述 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 搜索网址目录结构 搜索特定类型的文件 搜索E-Ma ...

  9. C#异常重试通用类Retry

    //Retry机制 public static class Retry { /// <summary> /// 重试零个参数无返回值的方法 /// </summary> /// ...

  10. LeetCode03 最长无重复子串

    题目 给定一个字符串,找出不含有重复字符的最长子串的长度. 解答 刚开始以为只是一遍遍历后来的字符和前面一样便开始算新子串,给的案例都过了,但是卡在了"dvdf" 后来经过重重试验 ...