一、事件冒泡

方法一、使用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)

            }

        }

一、事件冒泡

方法一、使用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 的事件冒泡的更多相关文章

  1. vue阻止事件冒泡和默认事件

    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...

  2. vue中事件冒泡规则和事件捕获规则

    <div id="app"> <div @click="handleClickOne"> <p @click="hand ...

  3. vue 阻止事件冒泡

    <mt-button type="danger" size="small"  @click="cancelOrderInfo(this.even ...

  4. vue 事件修饰符(阻止默认行为和事件冒泡)

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  5. vue.js事件,属性,以及交互

    这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...

  6. vue的事件

    vue的事件: vue事件简写: vue中事件是 v-on:click=' show()'    但是我嫌弃它写太长每次都要 v-on: 事件 vue中就有事件简写   @click='show()' ...

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

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

  8. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  9. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

随机推荐

  1. iOS 持续集成

    iOS 持续集成系列 - 开篇 前言 iOS 开发在经过这几年的野蛮生长之后,慢慢地趋于稳定.无论开发语言是 Objective-C 还是 Swift,工程类型是 Hybird 还是原生,开发思想是 ...

  2. java 取模运算% 实则取余 简述 例子 应用在数据库分库分表

    java 取模运算%  实则取余 简述 例子 应用在数据库分库分表 取模运算 求模运算与求余运算不同.“模”是“Mod”的音译,模运算多应用于程序编写中. Mod的含义为求余.模运算在数论和程序设计中 ...

  3. windbg cs

    !cs 扩展显示一个或多个临界区(critical section)或者整个临界区树 !cs Address 指定要显示的临界区地址.如果省略该参数,调试器显示当前进程中所有临界区.   :> ...

  4. 浅谈bitmap算法

    一.bitmap算法思想 32位机器上,一个整形,比如int a; 在内存中占32bit位,可以用对应的32bit位对应十进制的0-31个数,bitmap算法利用这种思想处理大量数据的排序与查询.  ...

  5. is-a,has-a,like-a是什么 sql server中,N''表示什么意思? 关于SQL SERVER的N前缀的理解

    https://blog.csdn.net/ooppookid/article/details/51174122#commentBox 1.is-a,has-a,like-a是什么 在面向对象设计的领 ...

  6. Android开发 Fragment中调用startActivityForResult返回错误的requestCode

    返回错误的requestCode返回值为65537,在Fragment里调用startActivityForResult,就必须在Fragment里处理onActivityResult.

  7. Intent----android中的伟大邮差

    在android中,intent就像是一个邮差,辛勤高效的在各个组件之间来回穿梭.我们可以通过它启动一个Activity或者Service,或者是发送给广播组件,又或者是与后台的Service进行通信 ...

  8. Fragment使用具体解释

    fragment是Google在3.0版本号中推出的新功能,如今已经增加到V4包中,假设要使用V4兼容包中的Fragment须要将Activity换成FragmentActivity,调用的getSu ...

  9. Mysql命令行改动字段类型

    在做微信公众平台 知识百科(账号:zhishiwiki) 时,由于字段先前设计的不合理.导致内容装不下,因此须要改动其字段类型为 text 这里使用到了 alter 命令 alter table 表名 ...

  10. 手把手带你画一个 时尚仪表盘 Android 自己定义View

    拿到美工效果图.咱们程序猿就得画得一模一样. 为了不被老板喷,仅仅能多练啊. 听说你认为前面几篇都so easy,那今天就带你做个相对照较复杂的. 转载请注明出处:http://blog.csdn.n ...