3vue
阻止冒泡
<!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的更多相关文章
- 3- vue django restful framework 打造生鲜超市 - model设计和资源导入
3- vue django restful framework 打造生鲜超市 - model设计和资源导入 使用Python3.6与Django2.0.2(Django-rest-framework) ...
- .3-Vue源码之数据劫持（1）
写了一半关机了,又得重新写,好气. 上一节讲到initData函数,其中包含格式化.代理.监听. // Line-3011 function initData(vm) { var data = vm. ...
- java Gui编程 事件监听机制
1. GUI编程引言 以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式: 1. 命令交互方式 图书管理系统 ...
- 实现点击页面其他地方，隐藏div（原生和VUE）
1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...
- 最新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 ...
- 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 ...
- 前端面试之vue相关的面试题
hello,你们的小可爱,皮皮聪又来发表感想了. 首先简单概括下会遇到的问题: 1.vuex作用 ①vuex是一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化. ②vue中的多个组件之间 ...
- LeetCode: Evaluate Reverse Polish Notation 解题报告
Evaluate Reverse Polish Notation Evaluate the value of an arithmetic expression in Reverse Polish No ...
- 9-4前端vue面试的问题
就没有什么顺序了,肖师傅的一些提问: 1- 配置文件中proxyTable的作用 2-@import '~styles/mixins.styl' ~的作用 3-vue模拟的本地中访问地址的url带有 ...
- 步入vue.js世界
一.遇见vue.js 1.1 Vue.js是什么? Vue.js 是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.Vue.js通过简单的 ...
随机推荐
- macos下编译glfw
环境准备 # macos 环境配置,需要预装xcode和cmake brew install cmake # 下载源码 git clone https://github.com/glfw/glfw.g ...
- kernel32.dll函数简介
kernel32.dll是非常重要的32位动态链接库文件,属于内核级文件.它控制着系统的内存管理.数据的输入输出操作和中断处理,当Windows启动时,kernel32.dll就驻留在内存中特定的写保 ...
- 在LUbuntu上搭建Neovim+LaTeX环境
目录 安装.配置vimtex 安装texlive 安装zathura 安装.配置vimtex Plug 'lervag/vimtex' let g:tex_flavor= 'latex' " ...
- Oracle 存储过程5：PL/SQL异常处理
PL/SQL异常处理是PL/SQL块中对执行部分出现异常进行处理的部分.PL/SQL采用的是统一异常处理机制,当异常发生时,程序会自动跳转到异常处理部分,交给异常处理程序进行异常匹配,再调用对应的处理 ...
- RayLink测评 | 完全免费，功能超越同类付费远程控制软件!!
*本文转载自自媒体[下1个好软件],作者:锋哥. 远程控制软件目前的需求非常大,因为某些原因,你可能得居家办公远程控制公司的电脑,又或者出差不再需要带笨重的笔记本办公,一台平板电脑远程就搞定等等. 但 ...
- spring-cloud-alibaba-dubbo踩坑记
在https://start.aliyun.com/bootstrap.html下载了示例程序,用的版本如下: spring-boot:2.3.7.RELEASE spring-cloud-aliba ...
- Vue非父子組件(爺孫關係)通信Provide&&Inject
通常,当我们需要从父组件向子组件传递数据时,我们使用 props.想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容.在这种情况下,如果仍然将 prop 沿着组件链逐级传递 ...
- java8 检查
// 检查放款日期 boolean allMatch = cdiscountMonthBillDetails.stream().map(CdiscountMonthBillDetail::getTra ...
- GVK和GVR
一.GVK与GVR 在Kubernetes体系中,资源是最重要的概念.Kubernetes使用Group.Version.Resource.Kind来描述 Group即资源组,在kubernetes中 ...
- Codeforces Round #769 (Div. 2) - D. New Year Concert
GCD + st表 + 二分 Problem - 1632D - Codeforces 题意 给出一个长度为 \(n\;(1<=n<=2*10^5)\) 的数组 \(a[i]\;(1< ...