正文
关于事件冒泡和键盘事件 以及与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)
}
}
