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)
} }
Vue 事件的更多相关文章
- Vue—事件修饰符
Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...
- vue 事件上加阻止冒泡 阻止默认事件
重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...
- vue事件监听机制
vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发 组件调用时绑定事件 之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...
- Vue 事件的基本使用与语法差异
"v-on:"可以简写为"@" "click"单击 "dblclick"双加 代码: <!doctype html ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- vue事件修饰符(once:prev:stop)
vue事件修饰符(once:prev:stop) stop修饰符 效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...
- Vue事件绑定原理
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...
- Vue 事件的高级使用方法
Vue 事件的高级使用方法 事件方法 在Vue中提供了4中事件监听方法,分别是: $on(event: string | Array, fn) $emit(event: string) $once(e ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
随机推荐
- Windows下mysql5.5主从同步
前置条件: A主机(作为主服务器) 环境:Win7,mysql5.5 IP:172.17.42.82 B主机(作为从服务器) 环境:Win7,mysql5.5 IP:172.17.42.156 主服务 ...
- 2017年编程语言排行榜Top10,第一名是?
关注 最近,IEEE Spectrum 杂志(美国电气电子工程师学会出版的旗舰杂志)发布了一年一度的编程语言排行榜,这也是他们发布的第四届编程语言 Top 榜.据介绍,IEEE Spectrum 的排 ...
- gbdt的面试要点总结-上篇
1.简介 gbdt全称梯度下降树,在传统机器学习算法里面是对真实分布拟合的最好的几种算法之一,在前几年深度学习还没有大行其道之前,gbdt在各种竞赛是大放异彩.原因大概有几个,一是效果确实挺不错.二是 ...
- mysql +keeplive
下载tar包 ./configure --prefix=/usr/local/keepalived --with-kernel-dir=/usr/src/kernels/2.6.32-431.el6. ...
- Java并发Fork-Join框架原理解析
1.什么是Foirk/Join框架 Fork/Join框架是Java7提供用于并行执行任务的框架,是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 2.什么是并行流与顺 ...
- 机器学习,安装python的支持包
windows10,64位: 以下命令行安装均在python目录下,对应的whl文件也被我拷贝到python目录下: http://www.lfd.uci.edu/~gohlke/pythonlibs ...
- Mac上配置不同版本的JDK
Mac上JDK的版本为1.8,编译AOSP时发现需要JDK 1.7.想找一种比较容易切换JDK版本的方式,经过一番Google发现Jenv比较合适. 安装Jenv至少有三种方式: - $ git cl ...
- 设计模式的征途—9.组合(Composite)模式
树形结构在软件中随处可见,比如操作系统中的目录结构,公司组织结构等等,如何运用面向对象的方式来处理这种树形结构是组合模式需要解决的问题.组合模式通过一种巧妙的设计方案来使得用户可以一致性地处理整个树形 ...
- 【Java框架型项目从入门到装逼】第二节 - Spring框架 AOP的丧心病狂解说,你喜欢露娜的月下无限连吗?
继续上一节的内容,多几个jar包: aop技术是面向切面编程思想,作为OOP的延续思想添加到企业开发中,用于弥补OOP开发过程中的缺陷而提出的编程思想.AOP底层也是面向对象:只不过面向的不是普通的O ...
- javaweb-3-在Eclipse中引入Tomcat
一.在Eclipse中引入Tomcat 第一步: 第二步: 第三步: 第四部: