Vue.directive自定义指令

Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色。

写好了这个功能,我们现在就自己定义一个全局的指令。我们这里使用Vue.directive( );

html

<div v-diy="color">{{message}}</div>

js

Vue.directive('diy',function(el,binding,vnode){ el.style='color:'+binding.value;});
var vm = new Vue({el:"#app",data:{message:1,color:"red"}
})

 

自定义指令中传递的三个参数
el: 指令所绑定的元素,可以用来直接操作DOM。binding:  一个对象,包含指令的很多信息。vnode: Vue编译生成的虚拟节点。
自定义指令的生命周期
自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind

具体如下

1.bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2.inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
3.update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
4.componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5.unbind:只调用一次,指令与元素解绑时调用。
bind:
function(){//被绑定console.log('1 - bind');},inserted:function(){//绑定到节点console.log('2 - inserted');},update:function(){//组件更新console.log('3 - update');},componentUpdated:function(){//组件更新完成console.log('4 - componentUpdated');},unbind:function(){//解绑console.log('1 - bind');}

 

转载于:https://www.cnblogs.com/Model-Zachary/p/6940923.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/456318.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML5 SVG

SVG介绍1.什么是svgsvg指可伸缩矢量图形&#xff08;Scalable Vector Graphics &#xff09;svg用来定义用于网络的基于矢量图形svg使用XML格式定义图形svg图像在放大或改变尺寸的情况下其图形质量不会有损失svg是网为王联盟的标准2.svg的优势svg图像可通过文本编辑器来创建和修…

运用Nginx代理和UWSGI将Flask项目部署在Linux中 详细步骤

nginx: 安装可以参照的路径: http://nginx.org/en/linux_packages.html#Ubuntu 启动Nginx nginx [ -c configpath] 默认配置目录&#xff1a;/etc/nginx/nginx.conf 查看进程&#xff1a; ps -ef |grep nginx 控制Nginx nginx -s xxxstop 快速关闭quit …

机器学习算法之KNN

前言 KNN一般用于有监督的分类场景&#xff0c;除此之外&#xff0c;KNN在异常检测场景中也有应用&#xff0c;下面主要介绍下KNN在这两面的应用原理。 KNN做分类的原理 计算步骤如下&#xff1a; 1&#xff09;算距离&#xff1a;给定测试对象&#xff0c;计算它与训练集中…

Supermap 组合单值专题图与标签专题图演示样例

效果图例如以下&#xff1a;单值专题图并显示每一个区域的相关文字信息 代码&#xff1a; <!DOCTYPE> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>单值专题图</title>…

[剑指Offer] 25.复杂链表的复制

1 /*2 struct RandomListNode {3 int label;4 struct RandomListNode *next, *random;5 RandomListNode(int x) :6 label(x), next(NULL), random(NULL) {7 }8 };9 */ 10 class Solution 11 { 12 public: 13 //在旧链表中创建新链表&#xff0…

Flask项目中应用七牛云存储

七牛云存储&#xff1a; https://developer.qiniu.com/kodo/sdk/1242/python 点击注册开通七牛开发者帐号 如果已有账号&#xff0c;直接登录七牛开发者后台&#xff0c;点击这里查看 Access Key 和 Secret Key pip install qiniu q Auth(Access Key,Secret Key) b…

异常检测算法之IForest

前言 IForest即孤立森林&#xff0c;可以用于做异常检测。一句话总结IForest做异常检测的原理&#xff1a;异常点密度小&#xff0c;基于树模型容易被一下切割出来&#xff0c;正常值密度大&#xff0c;需要切割多次才能得到目标值。 原理 iForest算法得益于随机森林的思想&…

JavaScript - 动态数据

1、使用ajax进行数据的请求 function getData(params){$.ajax({type: "POST", //提交方式data: "{params}", //请求参数url:, //请求接口contentType: "application/text;charsetutf-8",async: false, //是否同步dataType: &quo…

用c#编写爬虫在marinetraffic下载船仅仅图片

近期在做船仅仅识别方面的事情&#xff0c;须要大量的正样本来训练adaboost分类器。于是到marinetraffic这个站点上下载船仅仅图片。写个爬虫来自己主动下载显然非常方便。 站点特点 在介绍爬虫之前首先了解一下marinetraffic这个站点的一些特点&#xff1a; 1. 会定期检測爬虫…

发送手机验证码通过调用第三方网易云信API(flask项目)

一、 获取验证码&#xff1a; 1. 输入手机号码 2. 通过ajax发送请求 3. 后端&#xff1a; 获取手机号码 使用requests向第三方的服务端&#xff08;网易云信&#xff09;发送请求 官方文档 https://dev.yunxin.163.com/docs/product/%E7%9F%AD%E4%BF%A1/%E7%9F…

异常检测算法之LOF

前言&#xff1a; LOF&#xff1a;Local outlier factor&#xff0c;即局部异常因子。LOF主要是通过比较每个点p和其邻域点的密度来判断该点是否为异常点&#xff0c;如果点p的密度越低&#xff0c;越可能被认定是异常点。至于密度&#xff0c;是通过点之间的距离来计算的&…

Android属性动画进阶用法

2019独角兽企业重金招聘Python工程师标准>>> 在上周二文章中介绍补间动画缺点的时候有提到过&#xff0c;补间动画是只能对View对象进行动画操作的。而属性动画就不再受这个限制&#xff0c;它可以对任意对象进行动画操作。那么大家应该还记得之前我举的一个例子&am…

5.3linux下C语言socket网络编程简例

原创文章&#xff0c;转载请注明转载字样和出处&#xff0c;谢谢&#xff01; 这里给出在Linux下的简单socket网络编程的实例&#xff0c;使用tcp协议进行通信&#xff0c;服务端进行监听&#xff0c;在收到客户端的连接后&#xff0c;发送数据给客户端&#xff1b;客户端在接受…

parser.add_argument验证格式

article_bp Blueprint(article, __name__, url_prefix/api) api Api(article_bp) parser reqparse.RequestParser() parser.add_argument(name, typestr, help必须填写名称, requiredTrue) channel_fields { id: fields.Integer, cname: fields.String } clas…

异常检测算法之HBOS

前言 HBOS&#xff08;Histogram-based Outlier Score&#xff09;核心思想&#xff1a;将样本按照特征分成多个区间&#xff0c;样本数少的区间是异常值的概率大。 原理 该方法为每一个样本进行异常评分&#xff0c;评分越高越可能是异常点。评分模型为&#xff1a; 假设样…

字典和json 的区别 和转换

前言&#xff1a;字典和json非常像。接下来比较一下两者的异同 先看一下字典的写法&#xff1a; a {a:1,b:2,c:3} 再看一下json的写法&#xff1a; {"studentInfo":{"id":123456,"stu_name":"Dorra"} } 从形式上看&#xff0c;都是…

Struts2的工作原理及工作流程

众所周知&#xff0c;Struts2是个非常优秀的开源框架&#xff0c;我们能用Struts2框架进行开发&#xff0c;同时能 快速搭建好一个Struts2框架&#xff0c;但我们是否能把Struts2框架的工作原理用语言表达清楚&#xff0c;你表达的原理不需要说出底层是怎么实现的&#xff0c;我…

正则表达式采坑

[a-zA-Z]匹配大小写字符 \w 匹配字母、数字、下划线 {5,7} 表示前面的字符&#xff08;即&#xff1a;\w&#xff09;必须至少出现 5 次最多出现 7 次. 合起来就是 >6 少于8个的字符 [a-zA-Z]\w{6,12} --------------》》 就是要输入七位数到十三位&#x…

easyui动态显示和隐藏表头

为什么80%的码农都做不了架构师&#xff1f;>>> var _bt{date:日期,subtime:填写时间,xz:小组,uname:操作人,qdbh:渠道编号,mt:媒体,zh:账户,sjd:时间段,tfwz:投放位置,tfh:投放号,td:团队,sjje:实际金额,jxs:进线数,cb:成本,yxzyjx:有效资源进线,yxzyl:有效资源率…

物联网

如果要说未来什么技术正在或将彻底改变人类生活、工作和娱乐的方式&#xff0c;那必须是物联网。小到各种可穿戴产品&#xff0c;大到汽车、工厂和楼宇&#xff0c;物联网能使一切设备互联并具备智慧。物联网也正改变着产业的格局&#xff0c;索尼、夏普、东芝等日本传统电子设…