一、事件冒泡
方法一、使用 event.cancelBubble = true 来组织冒泡
- 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>
二、键盘事件
- show:function(){
- alert(1);
- }
- show2:function(ev){
- console.log(ev.keyCode);
- if(ev.keyCode==13){
- alert('按下了回车键盘');
- }
- },
- 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
- if="flag">
- box
四、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'
- }]
- }
- for = "item in options": value = "item.value" > {
- {
- item.text
- }
- }
- 选中: {
- {
- selected
- }
- }
五、radio
对比 angular
使用四中的源数据
- for = "option in options" > {
- {
- option.text
- }
- }
- 选择的是: {
- {
- selected
- }
- }
六、生命周期函数
对比 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
- }
- }
- 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;
- for="item in list">
- {{item}}
方法一 watch:
- 引入
- 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
- 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)
- }
- }
来源: http://www.cnblogs.com/wxtlinlin/p/6551029.html