vue.js學(xué)習(xí)第二天

1、 vue事件綁定

在vue中給一個(gè)元素綁定事件可以用 v-on:+事件名稱(click、mouseover、mouseout、keyup、keydown 等),v-on:這種寫(xiě)法有些繁瑣,v-on:可以用 @符代替

<div v-on:click="fn1" ></div> 
<div @click="fn1" ></div>
//以上兩種綁定事件的方式是等價(jià)的
2、vue中event事件對(duì)象

現(xiàn)在比如有這樣一個(gè)需求,點(diǎn)擊按鈕要獲取鼠標(biāo)相對(duì)于瀏覽器的xy坐標(biāo),原生js中只需要給點(diǎn)擊方法傳一個(gè)event對(duì)象,通過(guò)event對(duì)象來(lái)獲取相應(yīng)的值,vue中也提供了一個(gè)類似的方法 $event,vue多一個(gè)$符號(hào)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <button id="app" @click="fn1($event)">{{message}}</button>  //這里的fn1方法傳遞了一個(gè)$event參數(shù),和原生event類似
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                     message: '點(diǎn)我'
                },
                methods:{
                    fn1: function(ev){
                      console.log(ev.clientX +":"+ev.clientY ) //在控制臺(tái)中查看x 和y坐標(biāo)的值
                    }
                }
            })
        </script>
    </body>
</html>
3、vue 阻止事件冒泡

阻止事件冒泡在開(kāi)發(fā)是很常見(jiàn)的需求,在原生js中可以直接把event對(duì)象中的cancelBubble屬性設(shè)置成ture 就可以阻止事件向上冒泡,在vue提供了更簡(jiǎn)單的方法,直接在事件名稱后面點(diǎn)上stop即可,@click.stop,vue稱之為事件修飾符。
除了.stop外 vue還提供另外四個(gè)事件修飾符.prevent .capture .self .once ,具體使用方法可參考vue官方文檔 http://cn.vuejs.org/v2/guide/events.html#事件修飾符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app" @click="fn2"> 
            <button  @click="fn1($event)">{{btnText}}</button>
            <button  @click.stop="fn1">{{btnText}}</button>  //vue自帶的方法,fn1中的ev.cancelBubble = true 可以省略了
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                     btnText :"點(diǎn)我"
                },
                methods:{
                    fn1: function(ev){
                        ev.cancelBubble = true  //如果用了vue自帶的stop方法 這行代碼可以省略了
                        console.log('1')    
                    },
                    fn2:function(){
                        console.log('2')    
                    }
                }
            })
        </script>
    </body>
</html>
4、vue中的keyCode

在日常開(kāi)發(fā)中,最常見(jiàn)的一個(gè)小需求(回車提交),當(dāng)用戶按了回車鍵就提交用戶填寫(xiě)的數(shù)據(jù),在原生js中還是要依靠event事件對(duì)象,通過(guò)event來(lái)獲取keyCode,記住keyCode不是一件容易的事所以 Vue 為最常用的按鍵提供了別名,目前vue提供了下面這樣鍵盤(pán)別名:
.enter 回車鍵
.tab tab切換
.delete (捕獲 “刪除” 和 “退格” 鍵)
.esc esc鍵
.space 空格鍵
.up 鍵盤(pán)上鍵
.down 鍵盤(pán)下鍵
.left 鍵盤(pán)左鍵
.right 鍵盤(pán)右鍵

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div  id="app">
            <input type="text" @keyup.enter="fn1" value="按回車試試" />
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                },
                methods:{
                    fn1: function(){
                        alert('您按了回車')  
                    }   
                }
            })
        </script>
    </body>
</html>

上面的例子只用了.enter做示范,其他的都類似。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容