关于事件冒泡和键盘事件 以及与Angular的区别
- 一、事件冒泡
- 方法一、使用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="htps://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)
- }
- }
关于事件冒泡和键盘事件 以及与Angular的区别的更多相关文章
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码
MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pag ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- javascript 事件传播与事件冒泡,W3C事件模型
说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...
- 关于JS事件冒泡与JS事件代理(事件委托)
连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 谈事件冒泡(Bubble)和事件捕捉(capture)
事件的发生顺序 假设在一个元素中又嵌套了另一个元素并且两者都有一个onClick事件处理函数(event handler).如果用户单击元素2,则元素1和元素2的单击事件都会被触发.但是哪一个事件先被 ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- javascript每日一练(七)——事件二:键盘事件
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...
随机推荐
- [转载]virtual box如何生成新的UUID
原文地址:virtual box如何生成新的UUID作者:阿昭 问题描述:在为Virtual Box加载多台虚拟机器(显然这些虚拟机器都来自一个模板)的时候,出现如下错误: "Cannot ...
- 【AI】Computing Machinery and Intelligence - 计算机器与智能
[论文标题] Computing Machinery and Intelligence (1950) [论文作者] A. M. Turing (Alan Mathison Turing) [论文链接] ...
- Category 的一些事
来源:伯乐在线 - Tsui YuenHong 链接:http://ios.jobbole.com/90422/ 点击 → 申请加入伯乐在线专栏作者 新增实践部分:偏方 Hook 进某些方法来添加功能 ...
- lu协程练习
生产者和消费者问题:当协程调用yield时,从一个悬而未决的resume中返回.简单的协程练习: function receive() local status,value = coroutine.r ...
- Linux下Setuid命令! 转载
Linux下Setuid命令! 转载 在Linux系统中每个普通用户都可以更改自己的密码,这是合理的设置. 问题是:用户的信息保存在文件/etc/passwd中,用户的密码保存在文件/etc/sha ...
- JAVA List删除时需注意的地方
JAVA的LIST在删除时,一般会用list.remove(o); 但这样往往会出现问题,先来看下面的这段代码: package com.demo; import java.util.ArrayLis ...
- 简单解决XP共享连接数10限制(转)
1.建立一个txt文件,在里面输入以下文字:net session /delete /y,并将其保存为clear session.bat文件.net session用于查看本机共享的会话详细情况,可以 ...
- 在Linux上rpm安装运行Redis 3.0.4
http://www.rpmfind.net搜索redis,找到redis3.0.4的rpm源选做 wget ftp://fr2.rpmfind.net/linux/remi/enterprise/6 ...
- golang ---image
package main import ( "image" "image/color" "image/gif" "os" ...
- top 学习
通常top命令是会持续运行而不终止的. 要在脚本里用,需要添加一些选项参数,尤其是-b.例如:top -b -n 2 -d 3 >/tmp/log -b表示批处理模式(Batch mode),以 ...