阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> </head>
<body>
<!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数,
如果事件绑定函数调用,那么事件对象必须作为最后一个参数$event显示传递 -->
<div id = "app1">
<div v-text="num"></div>
<div v-on:click="handle0" >
<button v-on:click="handle1">点击</button>
</div> </div>
<script src="vue.js"></script>
<script>
var vue1 = new Vue({
el: '#app1',
data:{
num:0
},
methods:{
handle0:function(){
this.num++;
},
handle1:function(event){
// event.stopPropagation();
}, }
})
</script>
</body>
</html>
将<button v-on:click="handle1">点击</button>改成
<button v-on:click.stop="handle1">点击</button>
就能等效上述阻止冒泡

阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> </head>
<body>
<!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数,
如果事件绑定函数调用,那么事件对象必须作为最后一个参数$event显示传递 -->
<div id = "app1">
<div>
<a href="http://www.baidu.com" v-on:click.prevent="handle1">百度</a>
</div> </div>
<script src="vue.js"></script>
<script>
var vue1 = new Vue({
el: '#app1',
data:{
num:0
},
methods:{
handle1:function(event){
// event.preventDefault();
}, }
})
</script>
</body>
</html>

按键修饰符

v-on:keyup.enter='handleSubmit'

v-on:keyup.delete='clearContent'

3vue的更多相关文章

  1. 3- vue django restful framework 打造生鲜超市 - model设计和资源导入

    3- vue django restful framework 打造生鲜超市 - model设计和资源导入 使用Python3.6与Django2.0.2(Django-rest-framework) ...

  2. .3-Vue源码之数据劫持(1)

    写了一半关机了,又得重新写,好气. 上一节讲到initData函数,其中包含格式化.代理.监听. // Line-3011 function initData(vm) { var data = vm. ...

  3. java Gui编程 事件监听机制

    1.     GUI编程引言 以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式:   1. 命令交互方式    图书管理系统 ...

  4. 实现点击页面其他地方,隐藏div(原生和VUE)

    1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...

  5. 最新vue.js完整视频教程12套

    0.1智能社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js实战小米阅读开发 0.4走进Vue.js2.0 0.5Vuejs教程45节课 0.6Vue.js+N ...

  6. vue.js 视频教程

    0.1智能社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js实战小米阅读开发 0.4走进Vue.js2.0 0.5Vuejs教程45节课 0.6Vue.js+N ...

  7. 前端面试之vue相关的面试题

    hello,你们的小可爱,皮皮聪又来发表感想了. 首先简单概括下会遇到的问题: 1.vuex作用 ①vuex是一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化. ②vue中的多个组件之间 ...

  8. LeetCode: Evaluate Reverse Polish Notation 解题报告

    Evaluate Reverse Polish Notation Evaluate the value of an arithmetic expression in Reverse Polish No ...

  9. 9-4前端vue面试的问题

    就没有什么顺序了,肖师傅的一些提问: 1- 配置文件中proxyTable的作用 2-@import '~styles/mixins.styl'  ~的作用 3-vue模拟的本地中访问地址的url带有 ...

  10. 步入vue.js世界

    一.遇见vue.js 1.1 Vue.js是什么? Vue.js 是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.Vue.js通过简单的 ...

随机推荐

  1. vue高级进阶( 三 ) 组件高级用法及最佳实践

      vue高级进阶( 三 ) 组件高级用法及最佳实践 世界上有太多孤独的人害怕先踏出第一步. ---绿皮书 书接上回,上篇介绍了vue组件通信比较有代表性的几种方法,本篇主要讲述一下组件的高级用法和最 ...

  2. jmeter取样器之KafkaProducerSampler(往kafka插入数据)

    项目背景 性能测试场景中有一个业务场景的数据抽取策略是直接使用kafka队列,该场景需要准备的测试数据是kafka队列里的数据,故需要实现插入数据到kafka队列,且需要实现控制每分钟插入多少条数据. ...

  3. 如何把百度地图左边的搜索列表导出成excel里?

    有很多人问我,怎么样能够快速的把BAIDU地图左边的搜索列表里的商家地图,电话,导出到EXCEL里. 我就开发了一个小软件,专门为快速的实现导出数据到EXCEL. 为了使用方便,已经将全国的所又省份, ...

  4. 普通java项目打成jar包,引入第三方jar .

    ja方法1 .  MANIFEST.MF 中添加  Class-Path . 1.  项目src目录下创建  META-INF/MANIFEST.MF 文件.文件内容 Manifest-Version ...

  5. taro+vue3+TS+Pinia+tailwindcss+NutUI项目创建与开发

    一.初始化 1.Taro 基本安装并初始化项目 npx @tarojs/cli init WechatAppDemo -选择框架:vue3 -是否使用ts?y -请选择css预编译器:无 -请选择we ...

  6. ionic 架构

    1.路由:rout,页面内容:html,页面css:scss,js脚本内容:ts 2.功能介绍 路由:负责组织每个页面. 页面css:scss,负责定制每个组件的内容,比如组件是iobag,那么在这个 ...

  7. Window下载并安装WinSCP客户端

    winSCP官方网站:https://winscp.net/eng/docs/lang:chs. 环境 操作系统:Window 10 企业版LTSC;内存:8GB;操作类型:64位. 步骤 1. 打开 ...

  8. jquery的网络引用地址

    http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min ...

  9. gin 使用gorilla 关闭 websocket 时候设置close code 和message

    gin 使用gorilla 时建立websocket的教程很多博客都有写,但是很少有人讲关闭websocket时自定义 close code 和message.主要是使用:websocket.Form ...

  10. Mac电脑设置环境变量

    转载自:https://jingyan.baidu.com/article/8065f87f47b29523312498e4.html 1.使用快捷键Command+R(或者Windows键+R),或 ...