vue 的事件冒泡
一、事件冒泡
方法一、使用event.cancelBubble = true来组织冒泡
<div @click="show2()">
<input type="button" value="按钮" @click="show1($event)">
</div>
methods:{
show1:function(ev){
console.log(ev);
alert(1);
ev.cancelBubble=true; /*阻止冒泡*/
},
show2:function(){
alert(2);
}
}
方法二：使用vue自带的方法组织冒泡
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show1()">
</div>
拓展：事件修饰符
参考API：http://cn.vuejs.org/v2/guide/events.html#事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
二、键盘事件
<input type="text" @keydown="show">
show:function(){
alert(1);
}
<input type="text" @keydown="show2($event)">
show2:function(ev){
console.log(ev.keyCode);
if(ev.keyCode==13){
alert('按下了回车键盘');
}
},
<input type="text" @keyup="show3($event)">
show3:function(ev){
console.log(ev.keyCode);
if(ev.keyCode==13){
alert('回车键盘弹起的时候触发的事件show3');
}
}
拓展：按键修饰符
参考API：http://cn.vuejs.org/v2/guide/events.html#按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
********
注意：在Mac系统键盘上，meta对应命令键 (?)。在Windows系统键盘meta对应windows徽标键(?)。在Sun操作系统键盘上，meta对应实心宝石键 (◆)。在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，比如Knight键盘，space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。
********
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
三、checkbox
注意对比angular写法，选中与不选中直接对应的是显示还是隐藏我们的box，flag在默认的data中设置为false
<input type="checkbox" v-model="flag"/>
<div class="box" v-if="flag">
box
</div>
四、select
对比angular写法http://www.runoob.com/angularjs/angularjs-select.html
data: {
selected: 'C',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
<select v-model="selected">
<option v-for="item in options" :value="item.value">
{{item.text}}
</option>
</select><br/>
选中:{{selected}}
五、radio
对比angular
使用四中的源数据
<ul>
<li v-for="option in options">
<input type="radio" name="myRadio" :value="option.value" v-model="selected"/>{{option.text}}
</li>
</ul><br/>
<span>选择的是: {{ selected }}</span>
六、生命周期函数
对比react生命周期函数
初始化：
getDefaultProps：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
getInitialState：作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。
componentWillMount：在完成首次渲染之前调用，此时仍可以修改组件的state。
render
必选的方法，创建虚拟DOM，该方法具有特殊的规则：
只能通过this.props和this.state访问数据
可以返回null、false或任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态
不能修改DOM的输出
componentDidMount：真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
运行时：
componentWillReceiveProps：组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}
shouldComponentUpdate：组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
componentWillUpdate：接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。
render
componentDidUpdate：完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。
销毁：
componentWillUnmount：组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。
参考API：http://cn.vuejs.org/v2/guide/instance.html#实例生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。
beforeCreate:实例刚刚被创建1
created:实例已经创建完成2
beforeMount:模板编译之前3
mounted:模板编译完成4------********请求数据放在这个里面 必须记住*****
beforeUpdate:数据更新之前
updated:数据更新完毕
beforeDestroy:实例销毁之前
destroyed:实例销毁完成 ----this.$destroy();销毁实例
{{msg}}
<input type="button" value="更新数据" @click="update()">
<input type="button" value="销毁组件" @click="destroy">
data:{
msg:'welcome vue2.0'
},
methods:{ /*自定义方法*/
update(){
this.msg='大家好';
},
destroy(){
this.$destroy(); /*销毁实例 组件*/
}
}
七、模拟百度搜索提示功能
1、监听文本框中的值
2、请求百度的接口
3、实现方法，watch监听文本框的输入变化，按键修饰符keyup实现
4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。
// var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;
<input type="text" v-model="search"/>
<br/>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
方法一watch:
引入<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
data:{
search:'',
list:[]
}
var timer='';
vm.$watch('search',function(newValue){
console.log(newValue);
clearTimeout(timer);
var _that=this;
timer=setTimeout(function(){
//去服务器请求数据
var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;
_that.$http.jsonp(api,{
jsonp:'cb' /*改变回调函数*/
}).then(function(data){
console.log(data.body.s);
_that.list=data.body.s; /*改变data绑定的值*/
})
},200);
})
方法二：键盘事件 @keyup
<input type="text" v-model="search" @keyup="requestData()"/>
data:{
search:'',
list:[],
timer:''
},
methods:{
requestData:function(){
var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search;
var _that=this;
clearTimeout(this.timer); /*清除定时器*/
this.timer=setTimeout(function(){
//去服务器请求数据
_that.$http.jsonp(api,{
jsonp:'cb' /*改变回调函数*/
}).then(function(data){
console.log(data.body.s);
_that.list=data.body.s; /*改变data绑定的值*/
})
},200)
}
}
一、事件冒泡
方法一、使用event.cancelBubble = true来组织冒泡
<div @click="show2()">
<input type="button" value="按钮" @click="show1($event)">
</div>
methods:{
show1:function(ev){
console.log(ev);
alert(1);
ev.cancelBubble=true; /*阻止冒泡*/
},
show2:function(){
alert(2);
}
}
方法二：使用vue自带的方法组织冒泡
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show1()">
</div>
拓展：事件修饰符
参考API：http://cn.vuejs.org/v2/guide/events.html#事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
二、键盘事件
<input type="text" @keydown="show">
show:function(){
alert(1);
}
<input type="text" @keydown="show2($event)">
show2:function(ev){
console.log(ev.keyCode);
if(ev.keyCode==13){
alert('按下了回车键盘');
}
},
<input type="text" @keyup="show3($event)">
show3:function(ev){
console.log(ev.keyCode);
if(ev.keyCode==13){
alert('回车键盘弹起的时候触发的事件show3');
}
}
拓展：按键修饰符
参考API：http://cn.vuejs.org/v2/guide/events.html#按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
********
注意：在Mac系统键盘上，meta对应命令键 (?)。在Windows系统键盘meta对应windows徽标键(?)。在Sun操作系统键盘上，meta对应实心宝石键 (◆)。在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，比如Knight键盘，space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。
********
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
三、checkbox
注意对比angular写法，选中与不选中直接对应的是显示还是隐藏我们的box，flag在默认的data中设置为false
<input type="checkbox" v-model="flag"/>
<div class="box" v-if="flag">
box
</div>
四、select
对比angular写法http://www.runoob.com/angularjs/angularjs-select.html
data: {
selected: 'C',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
<select v-model="selected">
<option v-for="item in options" :value="item.value">
{{item.text}}
</option>
</select><br/>
选中:{{selected}}
五、radio
对比angular
使用四中的源数据
<ul>
<li v-for="option in options">
<input type="radio" name="myRadio" :value="option.value" v-model="selected"/>{{option.text}}
</li>
</ul><br/>
<span>选择的是: {{ selected }}</span>
六、生命周期函数
对比react生命周期函数
初始化：
getDefaultProps：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
getInitialState：作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。
componentWillMount：在完成首次渲染之前调用，此时仍可以修改组件的state。
render
必选的方法，创建虚拟DOM，该方法具有特殊的规则：
只能通过this.props和this.state访问数据
可以返回null、false或任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态
不能修改DOM的输出
componentDidMount：真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
运行时：
componentWillReceiveProps：组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}
shouldComponentUpdate：组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
componentWillUpdate：接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。
render
componentDidUpdate：完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。
销毁：
componentWillUnmount：组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。
参考API：http://cn.vuejs.org/v2/guide/instance.html#实例生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。
beforeCreate:实例刚刚被创建1
created:实例已经创建完成2
beforeMount:模板编译之前3
mounted:模板编译完成4------********请求数据放在这个里面 必须记住*****
beforeUpdate:数据更新之前
updated:数据更新完毕
beforeDestroy:实例销毁之前
destroyed:实例销毁完成 ----this.$destroy();销毁实例
{{msg}}
<input type="button" value="更新数据" @click="update()">
<input type="button" value="销毁组件" @click="destroy">
data:{
msg:'welcome vue2.0'
},
methods:{ /*自定义方法*/
update(){
this.msg='大家好';
},
destroy(){
this.$destroy(); /*销毁实例 组件*/
}
}
七、模拟百度搜索提示功能
1、监听文本框中的值
2、请求百度的接口
3、实现方法，watch监听文本框的输入变化，按键修饰符keyup实现
4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。
// var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;
<input type="text" v-model="search"/>
<br/>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
方法一watch:
引入<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
data:{
search:'',
list:[]
}
var timer='';
vm.$watch('search',function(newValue){
console.log(newValue);
clearTimeout(timer);
var _that=this;
timer=setTimeout(function(){
//去服务器请求数据
var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;
_that.$http.jsonp(api,{
jsonp:'cb' /*改变回调函数*/
}).then(function(data){
console.log(data.body.s);
_that.list=data.body.s; /*改变data绑定的值*/
})
},200);
})
方法二：键盘事件 @keyup
<input type="text" v-model="search" @keyup="requestData()"/>
data:{
search:'',
list:[],
timer:''
},
methods:{
requestData:function(){
var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search;
var _that=this;
clearTimeout(this.timer); /*清除定时器*/
this.timer=setTimeout(function(){
//去服务器请求数据
_that.$http.jsonp(api,{
jsonp:'cb' /*改变回调函数*/
}).then(function(data){
console.log(data.body.s);
_that.list=data.body.s; /*改变data绑定的值*/
})
},200)
}
}
vue 的事件冒泡的更多相关文章
- vue阻止事件冒泡和默认事件
本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...
- vue中事件冒泡规则和事件捕获规则
<div id="app"> <div @click="handleClickOne"> <p @click="hand ...
- vue 阻止事件冒泡
<mt-button type="danger" size="small" @click="cancelOrderInfo(this.even ...
- vue 事件修饰符（阻止默认行为和事件冒泡）
1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...
- vue.js事件，属性，以及交互
这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...
- vue的事件
vue的事件: vue事件简写: vue中事件是 v-on:click=' show()' 但是我嫌弃它写太长每次都要 v-on: 事件 vue中就有事件简写 @click='show()' ...
- vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- 重新认识vue之事件阻止冒泡
冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
随机推荐
- 事务的四个属性ACID
事务四大特征:原子性,一致性,隔离性和持久性. 1. 原子性(Atomicity) 一个原子事务要么完整执行,要么干脆不执行.这意味着,工作单元中的每项任务都必须正确执行.如果有任一任务执行失败,则整 ...
- iOS 10 的一个重要更新-开发 iMessage 的第三方插件
苹果官方的 Messages 在 iOS 10 推出了非常重大的更新,可能主要是想从其他 IM 巨头手里抢点市场份额回来,包括 Facebook Messenger, Wechat 和 Snapcha ...
- java http下载文件/上传文件保存
private boolean downloadFile(String httpUrl, String savePath) { int byteread = 0; try { URL url = ne ...
- 树莓派进阶之路 (010) - 树莓派raspi-config配置（转）
经过前面两步我们的树莓派已经正常的工作起来了,但是在真正用它开发之前还需要进行一些列的配置以及软件的安装,这样开发起来才会得心应手,下面我们介绍一下常用的软件和服务 1.配置选项: 树莓派第一次使用的 ...
- OAuth的机制原理讲解及开发流程(转)
1.OAuth的简述 OAuth(Open Authorization,开放授权)是为用户资源的授权定义了一个安全.开放及简单的标准,第三方无需知道用户的账号及密码,就可获取到用户的授权信息,并且这是 ...
- 【Oracle】详解ORACLE中的trigger(触发器)
本篇主要内容如下: 8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建触发器 8.2.1 触发器触发次序 8.2.2 创建DML触发器 8.2. ...
- 数字的可视化：python画图之散点图sactter函数详解
最近开始学习python编程,遇到scatter函数,感觉里面的参数不知道什么意思于是查资料,最后总结如下: 1.scatter函数原型 2.其中散点的形状参数marker如下: 3.其中颜色参数c如 ...
- MySQL -- 全文检索(自然语言全文检索)
自然语言全文本检索缺省或者modifier被设置为in natural language mode,都是进行自然语言检索.对于表中的每一行,match()都会返回一个关联值. mysql> CR ...
- Aborted connection 1055898 to db: 'xxx' user: 'yyy' host: 'xxx.xxx.xxx.xxx' (Got timeout reading communication packets)
mysql错误日志中,发现大量以下类似信息:(mysql 5.7.18) [Note] Aborted connection 1055898 to db: 'xxx' user: 'yyy' host ...
- 小而美的ghost driver
做过selenium自动化项目的同学应该都遇到过这样的问题:测试用例太多,运行速度过慢导致团队成员怨声载道. 于是便有了selenium grid和多线程运行selenium测试用例的方法.这些方法各 ...