<div id="app">
  //v-color 是自定义的
 <input type="text" class="form-control" v-color="'blue'"/>
</div>

<script>

//自定义一个设置字体颜色的指令
Vue.directive('color', {
    //样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素就有了一个内联样式
    //将来,元素肯定会显示到页面中去,这时候浏览器的渲染引擎必然会解析样式,应用给这个元素
    bind: function(el, binding){
      //和样式相关的操作,一般都可以在bind中执行
      //el.style.color='red'

//console.log(binding.name)
      //console.log(binding.value) //值 blue
      //console.log(bingding.expression) //表达式 'blue'

el.style.color = binding.value
      },
    inserted:function(el){
      //和JS行为有关的操作,最好在inserted中去执行,防止js行为不生效
    }
})

</script>

//全局定义
export default{
name: '',
data: { },
methods: { },
directives: {
'color': {
bind: function(el, binding){
el.style.color = binding.value
},
inserted: function(el){ }
},
'fontSize': {
bind: function(el, binding){
el.style.fontSize = binding.value
}
}
}
}

官网自定义指令钩子函数参数使用:https://cn.vuejs.org/v2/guide/custom-directive.html

vue学习(十八)使用自定义指令 为字体渲染颜色的更多相关文章

  1. Vue学习之过滤器和自定义指令小结(三)

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

  2. Vue.js学习 Item13 – 指令系统与自定义指令

    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...

  3. vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  4. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  5. VUe键盘修饰符及自定义指令获取焦点

    首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...

  6. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  7. vue第十八单元(单向数据流 vuex状态管理)

    第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...

  8. Vue学习笔记八:v-for,v-if,v-show指令

    目录 v-for指令:遍历 HTML和效果图 v-for讲解 v-if和v-show:创建,删除,显示,隐藏 HTML和效果图 v-if和v-show的原理 v-for指令:遍历 HTML和效果图 有 ...

  9. vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串

    <div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...

随机推荐

  1. 啊湫----今天做项目遇到的redis缓存问题---解决方案

    演示缓存问题 在进行 前端某个功能更新时   传递的参数 问题 导致 缓存储存 覆盖  只缓存到  传递参数的  值 更新完毕后 进行 存储到redis当中  只存入了 当前这个不可以属性和一个id  ...

  2. 深入解读Dictionary

    Dictionary<TKey,TValue>是日常.net开发中最常用的数据类型之一,基本上遇到键值对类型的数据时第一反应就是使用这种散列表.散列表特别适合快速查找操作,查找的效率是常数 ...

  3. plsql截取字符串字段中的某个字符段

    截取字符串 字符串s=" hello world  ! (name) " 如果要截取括号中的字符串可以采取如下方法. select substr(s,instr(s,'(')+1, ...

  4. 浅谈pyautogui模块

    pyautogui模块 PyAutoGUI--让所有GUI都自动化 安装代码: pip install pyautogui 目的 PyAutoGUI是一个纯Python的GUI自动化工具,其目的是可以 ...

  5. 洛谷 P1314 【聪明的质监员】

    二分 思路: 这道题思路还是蛮好想的,一开始想的是暴力枚举w,然后再仔细一看,w增长时,y肯定减小,那么思路出来了: 二分 但是在时二分时,分得是左右端点lr,做错了 求出w的上下界,然后二分 只二分 ...

  6. 读CSAPP第一章的收获

    这个系列只写了CSAPP第三版对于我的收获. 里面的内容很多,我只写我以前不知道的,然后现在又觉得挺有用的内容. 没有很好的排版,将就看. Amadhl定律:主要观点,想要显著加速整个系统,必须提升全 ...

  7. Layui文本框限制正整数

    <input type="text" name="Number" lay-verify="required|integer" plac ...

  8. mysql Unknown error 1146

    错误提示:Couldn't acquire next trigger: Unknown error 1146 spring +quartz 实现任务调度,由于quartz 默认读取表名为大写,新建数据 ...

  9. ES2020的这些新功能令人期待

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/es2020-has-been-finalized- ...

  10. 记一次WPF程序带参数启动

    问题:总共有两个程序.第一个程序使用Process带参数启动第二个程序. 网上一堆人都说什么重写Main入口啊 什么的.然后还一堆人跟着复制发文章.我也是醉了,简直是坑人.为何要舍近求远,直接重写AP ...