在自定义指令的时候,和js行为有关的,最好就写在inserted中去,防止js代码不生效。
和样似有关的操作放在bind中去
Vue.direactive 【d儿 Rai K T V】 没有s哈

<body>
<div id="app">
<input type="text" value="" v-color="'red'">
//注意red有单引号和双引号,red变量要使用单引号扩起来哈

</div> <script>
Vue.directive("color", { //【d儿 Rai K T V】
bind: function (el, binging) {
el.style.color = binging.value; //接受颜色
console.log(binging) //Object {name: "color", rawName: "v-color", value: "red", expression: "'red'",
},
inserted: function (el) {
},
updated(el) {//[a p dei ti d]
//当v-model跟新的时候,就会执行这个函数 这个函数会执行多次
},
}) var vm = new Vue({
el: "#app",
data: { }
});
</script>
</body>

自定义v-color指令的更多相关文章

  1. angular8自定义管道、指令以及获取dom值

    版本: 1.自定义管道: example: 定义一个*ngFor 可以获取key值的管道 keyObject.pipe.ts // key value 管道 import { Pipe, PipeTr ...

  2. vue 自定义拖拽指令

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

  3. vue自定义长按指令

    1.前言 在word中,当我们需要删除一大段文本的时候,我们按一下键盘上的退格键,就会删除一个字,当我们长按住退格键时,就会连续不停的删除,这就是键盘按键的长按功能.那么我们也想在网页中让一个按钮也具 ...

  4. Angular 自定义拖拽指令

    指令 组件是一种带模版的指令.指令是超级. 结构型指令(改变布局)和属性型指令(改变外观和行为). Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通 ...

  5. v:bind指令对于传boolean值的注意之处

    1,

  6. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  7. Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  8. Vue -自定义指令&钩子函数

    除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...

  9. 2.0 vue内置指令与自定义指令

    1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...

  10. Freemaker 自定义指令和函数

    自定义函数和指令都可以在前台或者后台进行指定. 个人理解:指令的作用,主要是进行页面调整之后进行输出:函数的作用,主要是为了进行运算,返回运算结果供前台展示. (一) 自定义指令 使用以下格式调用自定 ...

随机推荐

  1. RabbitMQ 备份交换机(alternate-exchange)介绍

    RabbitMQ之备份交换机(alternate-exchange) 1.备份交换器,AlternateExchange(AE) 备份交换器是为了实现没有路由到队列的消息,声明交换机的时候添加属性al ...

  2. JavaScript设计模式基础(一)

    模式的起源 模式 起源于建筑学.20世纪70年代,哈佛大学建筑学博士Christopher Alexander和他的团队花大约20年,来研究为解决同一个问题而设计出的不同建筑结构,从中发现那些高质量设 ...

  3. 华为开发者联盟 方舟编译器 DevEco IDE

    华为开发者联盟 https://developer.huawei.com/consumer/cn/ 方舟编译器是为支持多种编程语言.多种芯片平台的联合编译.运行而设计的统一编程平台,包含编译器.工具链 ...

  4. iOS技术博客

    iOS 技术提高 原文 http://blog.devtang.com/2014/07/27/ios-levelup-tips/# 1.阅读博客 美团技术博客 https://tech.meituan ...

  5. 【好书推荐】《剑指Offer》之硬技能(编程题7~11)

    本文例子完整源码地址:https://github.com/yu-linfeng/BlogRepositories/tree/master/repositories/sword <[好书推荐]& ...

  6. idea开发时springboot项目时的自动编译和热部署

    前提:最好将idea的启动器设置一下 操作:1.file > Build,Execution,Deployment > Compiler 勾选 Build project automati ...

  7. 一天两道pat(3)1007,1008

    1007没什么好说的,就是注意暴力求素数的时候,循环到(根号n)+1就好: 重点说说1008,不用新开一个数组就实现循环移位的操作 一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下 ...

  8. python del和垃圾回收

    1. del是删除对象 2. python中的垃圾回收是删除引用计数

  9. ETCD:词汇表

    原文地址:词汇表 本文档定义了etcd文档,命令行和源代码中使用的各种术语. Alarm 每当集群需要操作员干预以保持可靠性时,etcd服务器都会发出警报. Authentication 身份验证管理 ...

  10. mysql的repeat()函数

    用来复制字符串,如下'ab'表示要复制的字符串,2表示复制的份数 mysql> select repeat('ab',2); +----------------+ | repeat('ab',2 ...