自定义指令创建:

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. 自动化工具-ansible服务部署与使用

    1.前言 1.1ansible软件介绍 python 语言是运维人员必须会的语言 ansible 是一个基于python 开发的自动化运维工具 其功能实现基于ssh远程连接服务 ansible 可以实 ...

  2. CEF 支持JSON操作

    转载:https://blog.csdn.net/foruok/article/details/50687864(解析json) 转载:https://blog.csdn.net/foruok/art ...

  3. Python模块 2

    collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型: 1.namedtuple: 生成可以使用名字来访问 ...

  4. 一.MySQL安装

    版本:linux7.6 一.编译安装 1.下载epel源 [root@db01 ~]# wget -O /etc/yum.repos.d/epel.repo https://mirrors.aliyu ...

  5. 关于文件目录等的特殊权限setuid, setgid , sticky chattr, lsattr

    有三种特殊权限 总之, 设置这些特殊权限有两种方法, 一是使用 chmod ugo的方式, 另一个是 使用 数字的方式, 通常的读写执行 权限 是 3位 数字, 那么 特殊权限 就用 4位数字, 而且 ...

  6. 信息安全之路-web-xss学习(3)

    DOM型xss DOM型xss属于在客户端执行的xss,并不经过服务端解析.测试过程如下 Low型: 源代码: <script> if (document.location.href.in ...

  7. CI框架简单使用

    CodeIgniter框架 1.回忆MVC 1.1.M:模型,提供数据,保存数据 1.2.V:视图,只负责显示,表单form 1.3.C:控制器,协调模型和视图 1.4.action:动作,是控制器中 ...

  8. 拿取页面值 跟拿取value里面的值

    拿取页面输入框的数值 使用  val() val()设置或返回表单字段的值 拿取value里面的数值 value(); attr() 获取属性值

  9. lua --- 表操作

    c api 参考手册:http://www.leeon.me/a/lua-c-api-manual // LuaTest.cpp : 定义控制台应用程序的入口点. // #include " ...

  10. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序

    jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...