1. 一、事件冒泡
  2.  
  3. 方法一、使用event.cancelBubble = true来组织冒泡
  4.  
  5. <div @click="show2()">
  6. <input type="button" value="按钮" @click="show1($event)">
  7. </div>
  8. methods:{
  9. show1:function(ev){
  10. console.log(ev);
  11. alert(1);
  12. ev.cancelBubble=true; /*阻止冒泡*/
  13. },
  14. show2:function(){
  15. alert(2);
  16. }
  17. }
  18.  
  19. 方法二:使用vue自带的方法组织冒泡
  20.  
  21. <div @click="show2()">
  22. <input type="button" value="按钮" @click.stop="show1()">
  23. </div
  24.  
  25. 拓展:事件修饰符
  26.  
  27. 参考APIhttp://cn.vuejs.org/v2/guide/events.html#事件修饰符
  28.  
  29. 在事件处理程序中调用 event.preventDefault() event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
  30.  
  31. 为了解决这个问题, Vue.js v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
  32.  
  33. .stop
  34.  
  35. .prevent
  36.  
  37. .capture
  38.  
  39. .self
  40.  
  41. .once
  42.  
  43. <!-- 阻止单击事件冒泡 -->
  44.  
  45. <a v-on:click.stop="doThis"></a>
  46.  
  47. <!-- 提交事件不再重载页面 -->
  48.  
  49. <form v-on:submit.prevent="onSubmit"></form>
  50.  
  51. <!-- 修饰符可以串联 -->
  52.  
  53. <a v-on:click.stop.prevent="doThat"></a>
  54.  
  55. <!-- 只有修饰符 -->
  56.  
  57. <form v-on:submit.prevent></form>
  58.  
  59. <!-- 添加事件侦听器时使用事件捕获模式 -->
  60.  
  61. <div v-on:click.capture="doThis">...</div>
  62.  
  63. <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
  64.  
  65. <div v-on:click.self="doThat">...</div>
  66.  
  67. <!-- 点击事件将只会触发一次 -->
  68.  
  69. <a v-on:click.once="doThis"></a>
  70.  
  71. 二、键盘事件
  72.  
  73. <input type="text" @keydown="show">
  74. show:function(){
  75. alert(1);
  76. }
  77. <input type="text" @keydown="show2($event)">
  78. show2:function(ev){
  79. console.log(ev.keyCode);
  80. if(ev.keyCode==13){
  81. alert('按下了回车键盘');
  82. }
  83. },
  84. <input type="text" @keyup="show3($event)">
  85. show3:function(ev){
  86. console.log(ev.keyCode);
  87. if(ev.keyCode==13){
  88. alert('回车键盘弹起的时候触发的事件show3');
  89. }
  90. }
  91.  
  92. 拓展:按键修饰符
  93.  
  94. 参考APIhttp://cn.vuejs.org/v2/guide/events.html#按键修饰符
  95.  
  96. 在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
  97.  
  98. <!-- 只有在 keyCode 13 时调用 vm.submit() -->
  99.  
  100. <input v-on:keyup.13="submit">
  101.  
  102. 记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名
  103.  
  104. <!-- 同上 -->
  105.  
  106. <input v-on:keyup.enter="submit">
  107.  
  108. <!-- 缩写语法 -->
  109.  
  110. <input @keyup.enter="submit">
  111.  
  112. 全部的按键别名:
  113.  
  114. .enter
  115.  
  116. .tab
  117.  
  118. .delete (捕获 “删除” “退格” 键)
  119.  
  120. .esc
  121.  
  122. .space
  123.  
  124. .up
  125.  
  126. .down
  127.  
  128. .left
  129.  
  130. .right
  131.  
  132. .ctrl
  133.  
  134. .alt
  135.  
  136. .shift
  137.  
  138. .meta
  139.  
  140. ********
  141.  
  142. 注意:在Mac系统键盘上,meta对应命令键 (?)。在Windows系统键盘meta对应windows徽标键(?)。在Sun操作系统键盘上,meta对应实心宝石键 (◆)。在其他特定键盘上,尤其在MITLisp键盘及其后续,比如Knight键盘,space-cadet键盘,meta被标记为“META”。在Symbolics键盘上,meta被标记为“META 或者 Meta”。
  143.  
  144. ********
  145.  
  146. 可以通过全局 config.keyCodes 对象自定义按键修饰符别名:
  147.  
  148. // 可以使用 v-on:keyup.f1
  149.  
  150. Vue.config.keyCodes.f1 = 112
  151.  
  152. <!-- Alt + C -->
  153.  
  154. <input @keyup.alt.67="clear">
  155.  
  156. <!-- Ctrl + Click -->
  157.  
  158. <div @click.ctrl="doSomething">Do something</div>
  159.  
  160. 三、checkbox
  161.  
  162. 注意对比angular写法,选中与不选中直接对应的是显示还是隐藏我们的boxflag在默认的data中设置为false
  163.  
  164. <input type="checkbox" v-model="flag"/>
  165.  
  166. <div class="box" v-if="flag">
  167.  
  168. box
  169.  
  170. </div>
  171.  
  172. 四、select
  173.  
  174. 对比angular写法http://www.runoob.com/angularjs/angularjs-select.html
  175.  
  176. data: {
  177.  
  178. selected: 'C',
  179.  
  180. options: [
  181.  
  182. { text: 'One', value: 'A' },
  183.  
  184. { text: 'Two', value: 'B' },
  185.  
  186. { text: 'Three', value: 'C' }
  187.  
  188. ]
  189.  
  190. }
  191.  
  192. <select v-model="selected">
  193.  
  194. <option v-for="item in options" :value="item.value">
  195.  
  196. {{item.text}}
  197.  
  198. </option>
  199.  
  200. </select><br/>
  201.  
  202. 选中:{{selected}}
  203.  
  204. 五、radio
  205.  
  206. 对比angular
  207.  
  208. 使用四中的源数据
  209.  
  210. <ul>
  211.  
  212. <li v-for="option in options">
  213.  
  214. <input type="radio" name="myRadio" :value="option.value" v-model="selected"/>{{option.text}}
  215.  
  216. </li>
  217.  
  218. </ul><br/>
  219.  
  220. <span>选择的是: {{ selected }}</span>
  221.  
  222. 六、生命周期函数
  223.  
  224. 对比react生命周期函数
  225.  
  226. 初始化:
  227.  
  228. getDefaultProps:作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。
  229.  
  230. getInitialState:作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props
  231.  
  232. componentWillMount:在完成首次渲染之前调用,此时仍可以修改组件的state
  233.  
  234. render
  235.  
  236. 必选的方法,创建虚拟DOM,该方法具有特殊的规则:
  237.  
  238. 只能通过this.propsthis.state访问数据
  239.  
  240. 可以返回nullfalse或任何React组件
  241.  
  242. 只能出现一个顶级组件(不能返回数组)
  243.  
  244. 不能改变组件的状态
  245.  
  246. 不能修改DOM的输出
  247.  
  248. componentDidMount:真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM
  249.  
  250. 运行时:
  251.  
  252. componentWillReceiveProps:组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件propsstate
  253.  
  254. componentWillReceiveProps: function(nextProps) {
  255.  
  256. if (nextProps.bool) {
  257.  
  258. this.setState({
  259.  
  260. bool: true
  261.  
  262. });
  263.  
  264. }
  265.  
  266. }
  267.  
  268. shouldComponentUpdate:组件是否应当渲染新的propsstate,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。
  269.  
  270. componentWillUpdate:接收到新的props或者state后,进行渲染之前调用,此时不允许更新propsstate
  271.  
  272. render
  273.  
  274. componentDidUpdate:完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。
  275.  
  276. 销毁:
  277.  
  278. componentWillUnmount:组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。
  279.  
  280. 参考APIhttp://cn.vuejs.org/v2/guide/instance.html#实例生命周期
  281.  
  282. 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。
  283.  
  284. beforeCreate:实例刚刚被创建1
  285.  
  286. created:实例已经创建完成2
  287.  
  288. beforeMount:模板编译之前3
  289.  
  290. mounted:模板编译完成4------********请求数据放在这个里面 必须记住*****
  291.  
  292. beforeUpdate:数据更新之前
  293.  
  294. updated:数据更新完毕
  295.  
  296. beforeDestroy:实例销毁之前
  297.  
  298. destroyed:实例销毁完成 ----this.$destroy();销毁实例
  299.  
  300. {{msg}}
  301.  
  302. <input type="button" value="更新数据" @click="update()">
  303.  
  304. <input type="button" value="销毁组件" @click="destroy">
  305.  
  306. data:{
  307.  
  308. msg:'welcome vue2.0'
  309.  
  310. },
  311.  
  312. methods:{ /*自定义方法*/
  313.  
  314. update(){
  315.  
  316. this.msg='大家好';
  317.  
  318. },
  319.  
  320. destroy(){
  321.  
  322. this.$destroy(); /*销毁实例 组件*/
  323.  
  324. }
  325.  
  326. }
  327.  
  328. 七、模拟百度搜索提示功能
  329.  
  330. 1、监听文本框中的值
  331.  
  332. 2、请求百度的接口
  333.  
  334. 3、实现方法,watch监听文本框的输入变化,按键修饰符keyup实现
  335.  
  336. 4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。
  337.  
  338. // var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;
  339.  
  340. <input type="text" v-model="search"/>
  341. <br/>
  342.  
  343. <ul>
  344. <li v-for="item in list"
  345.  
  346. {{item}}
  347.  
  348. </li>
  349. </ul>
  350.  
  351. 方法一watch:
  352.  
  353. 引入<script src="htps://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
  354. data:{
  355. search:'',
  356. list:[]
  357. }
  358. var timer='';
  359.  
  360. vm.$watch('search',function(newValue){
  361. console.log(newValue);
  362. clearTimeout(timer);
  363. var _that=this;
  364. timer=setTimeout(function(){
  365. //去服务器请求数据
  366. var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;
  367. _that.$http.jsonp(api,{
  368. jsonp:'cb' /*改变回调函数*/
  369. }).then(function(data){
  370. console.log(data.body.s);
  371. _that.list=data.body.s; /*改变data绑定的值*/
  372. })
  373. },200);
  374. })
  375.  
  376. 方法二:键盘事件 @keyup
  377.  
  378. <input type="text" v-model="search" @keyup="requestData()"/>
  379.  
  380. data:{
  381. search:'',
  382. list:[],
  383. timer:''
  384. },
  385. methods:{
  386. requestData:function(){
  387. var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search;
  388. var _that=this;
  389. clearTimeout(this.timer); /*清除定时器*/
  390. this.timer=setTimeout(function(){
  391. //去服务器请求数据
  392. _that.$http.jsonp(api,{
  393. jsonp:'cb' /*改变回调函数*/
  394. }).then(function(data){
  395. console.log(data.body.s);
  396. _that.list=data.body.s; /*改变data绑定的值*
  397. })
  398. },200)
  399. }
  400. }

关于事件冒泡和键盘事件 以及与Angular的区别的更多相关文章

  1. vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  2. 常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码

    MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pag ...

  3. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  4. javascript 事件传播与事件冒泡,W3C事件模型

    说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...

  5. 关于JS事件冒泡与JS事件代理(事件委托)

    连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...

  6. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  7. 谈事件冒泡(Bubble)和事件捕捉(capture)

    事件的发生顺序 假设在一个元素中又嵌套了另一个元素并且两者都有一个onClick事件处理函数(event handler).如果用户单击元素2,则元素1和元素2的单击事件都会被触发.但是哪一个事件先被 ...

  8. JavaScript的事件对象_键盘事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  9. javascript每日一练(七)——事件二:键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

随机推荐

  1. [转载]virtual&nbsp;box如何生成新的UUID

    原文地址:virtual box如何生成新的UUID作者:阿昭 问题描述:在为Virtual Box加载多台虚拟机器(显然这些虚拟机器都来自一个模板)的时候,出现如下错误: "Cannot ...

  2. 【AI】Computing Machinery and Intelligence - 计算机器与智能

    [论文标题] Computing Machinery and Intelligence (1950) [论文作者] A. M. Turing (Alan Mathison Turing) [论文链接] ...

  3. Category 的一些事

    来源:伯乐在线 - Tsui YuenHong 链接:http://ios.jobbole.com/90422/ 点击 → 申请加入伯乐在线专栏作者 新增实践部分:偏方 Hook 进某些方法来添加功能 ...

  4. lu协程练习

    生产者和消费者问题:当协程调用yield时,从一个悬而未决的resume中返回.简单的协程练习: function receive() local status,value = coroutine.r ...

  5. Linux下Setuid命令! 转载

    Linux下Setuid命令! 转载  在Linux系统中每个普通用户都可以更改自己的密码,这是合理的设置. 问题是:用户的信息保存在文件/etc/passwd中,用户的密码保存在文件/etc/sha ...

  6. JAVA List删除时需注意的地方

    JAVA的LIST在删除时,一般会用list.remove(o); 但这样往往会出现问题,先来看下面的这段代码: package com.demo; import java.util.ArrayLis ...

  7. 简单解决XP共享连接数10限制(转)

    1.建立一个txt文件,在里面输入以下文字:net session /delete /y,并将其保存为clear session.bat文件.net session用于查看本机共享的会话详细情况,可以 ...

  8. 在Linux上rpm安装运行Redis 3.0.4

    http://www.rpmfind.net搜索redis,找到redis3.0.4的rpm源选做 wget ftp://fr2.rpmfind.net/linux/remi/enterprise/6 ...

  9. golang ---image

    package main import ( "image" "image/color" "image/gif" "os" ...

  10. top 学习

    通常top命令是会持续运行而不终止的. 要在脚本里用,需要添加一些选项参数,尤其是-b.例如:top -b -n 2 -d 3 >/tmp/log -b表示批处理模式(Batch mode),以 ...