VUE2第五天学习---自定义指令

阅读目录

  • 1.理解VUE中的自定义指令
回到顶部

1.理解VUE中的自定义指令

默认核心指令有 (v-model 和 v-show), 但是有时候我们需要用到自定义指令,在vue中,代码复用主要形式和抽象是组件,但是在有的情况下,我们仍然需要对DOM元素进行底层操作,所以这个时候我们需要用到自定义指令。

比如下面的一个input框,当页面加载时,元素将获得焦点,我们还没有点击input框,input就获得焦点了,如下demo代码:

<!DOCTYPE html>
<html><head><title>演示Vue</title><style></style></head><body><div id='demo'><input v-focus></div></body><script src="./vue.js"></script><script type="text/javascript">// 注册一个全局定义指令 v-focus
    Vue.directive('focus', {// 绑定元素插入到DOM 中
      inserted: function (el) {// 聚焦元素
        el.focus()}})new Vue({el: '#demo'})</script>
</html>

查看效果

上面的是全局定义指令 v-foucs, 当然我们也可以局部定义,如下代码:

<!DOCTYPE html>
<html><head><title>演示Vue</title><style></style></head><body><div id='demo'><input v-focus></div></body><script src="./vue.js"></script><script type="text/javascript">new Vue({el: '#demo',directives: {focus: {// 指令的定义
          inserted: function (el) {// 聚焦元素
            el.focus()}}}})</script>
</html>

查看效果

然后我们就可以在任何input元素框或者textarea使用 v-focus 了,如下代码:

<input v-focus />

2. 指令定义函数提供了如下几个钩子函数(根据VUE教程来):
bind: 只调用一次,指令第一次绑定到元素时调用,也就是说初始化时候调用一次。
inserted: 被绑定元素插入父节点时调用(父节点需要存在才会调用)。
update: 被绑定元素所在的模板更新时调用(通过比较更新前后的绑定值)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 指令与元素解绑时调用,只调用一次,和bind对应。

上面几个钩子函数有如下参数 (el, binding, vnode, oldVnode)
el: 指令所绑定的元素,可用来直接操作DOM。
binding: {Object} obj有如下属性:
name: 指令名,不包括 v- 前缀
value: 指令绑定值。比如 v-my-directive = '1+1', 那么value就是2.
oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

vnode: Vue编译生成的虚拟节点。
oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

注意: 除了 el 之外,其它参数都应该是只读的,尽量不要修改他们。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

如下demo代码:

<!DOCTYPE html>
<html><head><title>演示Vue</title><style></style></head><body><div id='demo' v-demo:hello.a.b='message'></div></body><script src="./vue.js"></script><script type="text/javascript">Vue.directive('demo', {bind: function(el, binding, vnode) {var s = JSON.stringify;el.innerHTML = 'name: '       + s(binding.name) + '<br/>' + 'value: '      + s(binding.value) + '<br/>' + 'expression: ' + s(binding.expression) + '<br/>' + 'argument: '   + s(binding.arg) + '<br/>' + 'modifiers: '  + s(binding.modifiers) + '<br/>' + 'vnode: '      + Object.keys(vnode).join(', ')}})new Vue({el: '#demo',data: {message: 'hello!'}})</script>
</html>

查看效果

对象字面量
如果指令需要多个值,可以传入一个 JavaScript 对象字面量。
如下代码:

<!DOCTYPE html>
<html><head><title>演示Vue</title><style></style></head><body><div id='demo' v-demo="{ color: 'white', text: 'hello!' }"></div></body><script src="./vue.js"></script><script type="text/javascript">Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"
      console.log(binding.value.text)  // => "hello!"
    })new Vue({el: '#demo'})</script>
</html>

查看效果

在控制台可以看到输出了字符串了。

2. Vue.js自定义指令的用途。
上面是教程中的一些demo,但是在实际当中我们需要用到什么地方呢?我们可以预想到可以使用到预加载数据的地方,比如预加载图片,由于图片加载需要一些时间,因此我们先加载一张占位符图片,
等图片真正加载完成时候,才加载真正的图片,这样的用户体验效果更能更好点。下面是使用vue自定义指令来实现这个功能,代码如下:

 

<!DOCTYPE html>
<html><head><title>演示Vue</title><style>img { width: 180px; height: 180px; overflow: hidden;}</style></head><body><div id='demo'><img v-for='item in list' v-img='item.url'/></div></body><script src="./vue.js"></script><script type="text/javascript">Vue.directive('img', {inserted: function(el, binding) {console.log(el)// 下面使用一张背景颜色来演示一下,var color = Math.floor(Math.random()*1000000);el.style.backgroundColor = '#' + color; // 随机的背景颜色var img = new Image();img.src = binding.value; img.onload = function() {el.style.backgroundImage = 'url(' + binding.value + ')';}}});new Vue({el: '#demo',data: {list: [{url: 'http://img.alicdn.com/imgextra/i3/730692984/TB2.dQMdxXkpuFjy0FiXXbUfFXa_!!730692984-0-beehive-scenes.jpg_180x180q70'},{url: 'http://img.alicdn.com/imgextra/i2/730692984/TB239AJdw0kpuFjSspdXXX4YXXa_!!730692984-0-beehive-scenes.jpg_180x180q70'},{url: 'http://img.alicdn.com/imgextra/i4/730692984/TB29TsZdrVkpuFjSspcXXbSMVXa_!!730692984-0-beehive-scenes.jpg_180x180q70'}]}})</script>
</html>

查看效果

如上演示可以看到,刚开始载入页面的时候,有那么一瞬间先是背景颜色 最后是图片,这里只是简单的演示一下,在实际使用中,我们可以先放一张预加载的图片,当真正图片加载完成的时候,才显示真正的图片,省的在图片未加载完成的时候,背景图片是空白的效果就不是很好了。

转载于:https://www.cnblogs.com/tugenhua0707/p/6828631.html

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

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

相关文章

python报名_2019年少儿Python创意编程比赛报名时间

2019年Python创意编程比赛时间及相关规定&#xff1a;参赛对象 Python创意编程比赛设初中组和高中组。 全国各地初中、高中(含中等职业学校)在校学生均以个人名义报名参加。 参赛步骤 Python创意编程比赛分初评、复评和终评三个阶段&#xff0c;初评和复评以线上形式开展&#…

【分享】后厂村鲜为人知的另一面

好&#xff01;回归学长每周的杂谈分享&#xff01; 有人说“后厂村”像一座孤岛&#xff0c; 这里远离喧嚣&#xff0c;没有生活气息。 而刚刚到厂的学长&#xff0c; 却想和你分享他鲜为人知的另一面。 内容整理源于网络看客原创侵删 说起后厂村&#xff0c;也许是老北京人…

windows 下安装rabbitmq

2019独角兽企业重金招聘Python工程师标准>>> 1、下载 下载地址&#xff1a;http://www.rabbitmq.com/download.html 2、Windows上安装 2.1 安装安装Erlang 下载erlang&#xff1a;http://www.erlang.org/download/otp_win64_17.3.exe 安装&#xff1a; erlang安装完…

【Kubernetes】k8s 的基本使用指令

今天分享如题&#xff1a; Kubernetes 最近更新缓慢由于工作太忙惹&#xff0c;忙里偷闲整理愿能与君共勉&#x1f4aa; K8S对我来说是个新的技术栈&#xff0c;程序员就是需要一直充电&#x1f50b; 加油&#xff0c;一起进步&#x1f4aa; 结构模型 k8s 是经典的一对多模…

php是如何工作的

a:前提条件: apache服务器启动正常工作 b:客户端浏览器在地址栏输入一个程序地栏 按回车发送请求 {请求}http://127.0.0.1/day03/1.php c:apache接收请求&#xff0c;并且负责查找相应资源1.php d:如果apache没有找到相应的资源,返回错误消息给客户端浏览器404 NOT FOUND e:如果…

c语言 malloc_C语言快速入门——动态内存分配

在前面一系列的字符串操作中&#xff0c;我们都是先定义一个固定大小的字符数组&#xff0c;然后根据所需&#xff0c;或拷贝、或连接、或格式化来为这个数组提供内容。固定大小的数组意味着在程序运行期间&#xff0c;数组所占用的内存是确定的(即划分了固定数量的内存)&#…

FFMPEG设置 cbr讨论

Q:我采用ffmpeg调用x264一直出错&#xff0c;命令如下ffmpeg -s 352x288 -r 50 -pix_fmt yuv420p -i tmp.yuv tmp.h264可不可以给点建议&#xff0c;找了很久也没有找到解决办法&#xff0c;错误时error while opening encoder for output stream 0.0 maybe incorrect parame…

博文声明

本博客用于分享学习笔记 欢迎大神指正&#xff0c;我们互相学习交流&#xff0c;共同成长进步&#xff01; 博客首页:秋叶夏风的博客

【经验分享】工程开发与Coding规范

今天分享分为两部分 :) PART01 工程开发代码规范分享/ PART02 关于某易云自动签到听歌分享- 5Mins DevCoding Rule: PART 1 了解真实工程开发&#x1f3d7;..... 本篇内容分享的宗旨: 学长工作经验之谈仅作分享&#x1f3f7; Ready,Go 代码管理——工具篇 •工程上首先需要…

过滤器与拦截器区别

过滤器与拦截器区别 参考&#xff1a;http://www.cnblogs.com/dreamroute/p/4198087.html?utm_sourcetuicool 过滤器 过滤器是一个程序&#xff0c;它先于与之相关的servlet或JSP页面运行在服务器上。它是随你的web应用启动而启动的&#xff0c;只初始化一次&#xff0c;以后就…

二进制-高效位运算

数独 数独是介绍位运算的好例子&#xff0c;运用位运算和不运用效率差别还是挺大的。我们先看数独需求: 1、当前数字所在行数字均含1-9&#xff0c;不重复 2、当前数字所在列数字均含1-9&#xff0c;不重复 3、当前数字所在宫&#xff08;即3x3的大格&#xff09;数字均含1-9&a…

pytorch resnet50_PyTorch终于能用上谷歌云TPU,推理性能提升4倍,我们该如何薅羊毛?...

晓查 发自 凹非寺量子位 报道 | 公众号 QbitAIFacebook在PyTorch开发者大会上正式推出了PyTorch 1.3&#xff0c;并宣布了对谷歌云TPU的全面支持&#xff0c;而且还可以在Colab中调用云TPU。之前机器学习开发者虽然也能在Colab中使用PyTorch&#xff0c;但是支持云TPU还是第一次…

x264里的2pass指的是什么意思? x264源代码分析2.encode()

A:x264里的2pass指的是什么意思?另外stat是什么意思, 比如有个参数--stats <string> Filename for 2 pass stats [/"%s/"]/n", defaults->rc.psz_stat_out );stats在这是什么意思? 2pass是2次编码的意思&#xff0c;stats是统计文档的名称&a…

项目启动居然如此重要!

项目的启动阶段比较短&#xff0c;项目经理往往容易忽视这个阶段&#xff0c;但是&#xff0c;项目的启动却具有着重要的意义。 定基调&#xff1a; 基调包括工作的节奏、团队氛围和沟通风格等。 一首歌的第一句决定了这首歌的基调&#xff0c;如何唱好这第一句就是项目启动所要…

mysql数据库导入导出文件sql文件

window下 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u dbuser -p dbname > dbname.sql 2.导出一个表 mysqldump -u 用户名 -p 数据库名 表名> 导出的文件名 mysqldump -u dbuser -p dbname users> dbname_users.sql 3.导出…

Android Studio主题设置、颜色背景配置

2019独角兽企业重金招聘Python工程师标准>>> color-themes 效果展示 打开http://color-themes.com/有很多样式可供选择 1. Monokai Sublime Text 3(color theme) 2. Solarized Light (color theme) 3. Visual Studio 2015 Dark(color theme) 导入方式 下载主…

JavaScript中的函数

js函数 *第一种是使用function语句定义函数 function abc(){alert(abc); }*第二种是在表达式中定义函数 var 函数名 function\(参数1&#xff0c;参数2&#xff0c;…\){函数体};//例如&#xff1a;//定义var add function\(a,b\){return ab;}//调用函数document.write\(a…

x264源代码分析1。fread()

相关说明:1. 使用版本: x264-cvs-2004-05-11 2. 这次的分析基本上已经将代码中最难理解的部分做了阐释,对代码的主线也做了剖析,如果这个主线理解了,就容易设置几个区间,进行分工阅读,将各个区间击破了. 3. 需要学习的知识:a) 编码器的工作流程.b) H.264的码流结构,像x264_sp…

在centos下安装pycrypto报错 RuntimeError: autoconf error

解决&#xff1a;yum -y install gcc File "/usr/lib64/python3.6/distutils/dist.py", line 974, in run_command cmd_obj.run() File "/usr/lib64/python3.6/distutils/command/build.py", line 135, in run self.run_command(cm…

Java多线程实现异步调用

在Java平台,实现异步调用的角色有如下三个角色&#xff1a;调用者、 提货单 、真实数据&#xff0c;一个调用者在调用耗时操作,不能立即返回数据时,先返回一个提货单 .然后在过一断时间后凭提货单来获取真正的数据.去蛋糕店买蛋糕&#xff0c;不需要等蛋糕做出来(假设现做要很长…