欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中的事件處理詳情

 更新時(shí)間：2022年05月27日 10:47:12   作者：??奔跑吧雞翅????  
這篇文章主要介紹了Vue中的事件處理詳情，文章通過給按鈕綁定一個(gè)?click?事件展開詳細(xì)內(nèi)容介紹，需要的小伙伴可以參考一下

一、事件處理

給按鈕綁定一個(gè) click 事件，點(diǎn)擊彈出提示信息

	<!--普通寫法-->
    <button v-on:click="showInfo">點(diǎn)我</button>
    <!--簡寫-->
    <button @click="showInfo">點(diǎn)我</button>

	new Vue({
        el:'#root',
        methods:{
            showInfo(){
                alert('Hello')
            }
        }
    })

 我們來增加參數(shù)：

<button @click="showInfo($event,'world')">點(diǎn)我</button>

showInfo(event,name){
	//console.log(event.target.innerHTML);//點(diǎn)我
	//console.log(this);//此處的this是vm（vue實(shí)例對象）
	//所有被vue管理的函數(shù)最好都寫成普通函數(shù)，不要寫成箭頭函數(shù)
	//否則this就變成了window
	 alert('Hello '+name)
}

 如果只寫 showInfo('world') 那么方法中的 event 參數(shù)就不能用了，所以我們加了一個(gè) $event來占位

事件的基本使用 ：

  • 1.使用v-on :xxx或@xxx綁定事件，其中xxx是事件名
  • 2.事件的回調(diào)需要配置在 methods 對象中，最終會(huì)在 vm 上
  • 3.methods 中配置的函數(shù)，不要用箭頭函數(shù)！否則 this 就不是 vm 了
  • 4.methods 中配置的函數(shù)，都是被Vue 所管理的函數(shù)，this 的指向是 vm 或組件實(shí)例對象
  • 5.@click="demo”和@click="demo($event)”效果一致，但后者可以傳參

二、事件修飾符

Vue中的事件修飾符

  • 1.prevent: 阻止默認(rèn)事件
  • 2.stop:阻止事件冒泡
  • 3.once:事件只觸發(fā)一次
  • 4.capture:使用事件的捕獲模式
  • 5.self:只有 event.target 是當(dāng)前操作的元素時(shí)才觸發(fā)事件
  • 6.passive:事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初識</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        *{
            margin: 20px;
        }

        .demo1{
            width: 100px;
            height: 100px;
            background: aqua;
        }
        .div1{
            padding: 5px;
            background: skyblue;
        }
        .div2{
            padding: 5px;
            background: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background: hotpink;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <!--阻止默認(rèn)事件。默認(rèn)點(diǎn)擊后提示信息，然后跳轉(zhuǎn)百度首頁，現(xiàn)在只提示信息不跳轉(zhuǎn)-->
    <a  rel="external nofollow"  rel="external nofollow"  @click.prevent="showInfo">點(diǎn)我提示信息</a>
    <!--阻止事件冒泡，本來點(diǎn)擊按鈕后會(huì)提示信息，事件冒泡到div上，還會(huì)再彈信息，現(xiàn)在只會(huì)彈一次-->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">點(diǎn)我提示信息</button>
    </div>
    <!--事件只觸發(fā)一次，本來每次點(diǎn)都提示信息，現(xiàn)在只提示一次，再點(diǎn)擊就不提示了-->
    <button @click.once="showInfo">點(diǎn)我提示信息</button>
    <!--使用事件的捕獲模式，本來點(diǎn)擊div2，控制臺會(huì)輸出div2，然后輸出div1。因?yàn)閺膁iv2冒泡到了div1 -->
    <!--事件是先捕獲再冒泡-->
    <!--在div1增加了.capture那么div1的事件在捕獲階段就開始了，所以控制臺會(huì)先輸出div1再div2-->
    <div class="div1" @click.capture="showMsg('div1')">
        div1
        <div class="div2" @click="showMsg('div2')">
            div2
        </div>
    </div>
    <!--只有 event.target 是當(dāng)前操作的元素時(shí)才觸發(fā)事件-->
    <!--本來會(huì)提示兩遍信息，如果在方法中輸出event.target，那么會(huì)輸出兩遍button-->
    <!--現(xiàn)在給div1增加了.self,當(dāng)點(diǎn)擊按鈕時(shí)，click事件冒泡到div1后，觸發(fā)div1的click-->
    <!--但是click的event.target是button，而不是div1，所以這次冒泡后的click不執(zhí)行-->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">點(diǎn)我提示信息</button>
    </div>
    <!--事件的默認(rèn)行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢-->
    <!--scroll是頁面滾動(dòng)條滾動(dòng)會(huì)觸發(fā)的事件，而wheel是鼠標(biāo)滾輪滾動(dòng)會(huì)觸發(fā)的事件-->
    <!--一旦滾動(dòng)條到底部后，滑動(dòng)鼠標(biāo)滾輪繼續(xù)滾動(dòng)，wheel就會(huì)一直觸發(fā)，而scroll不會(huì)觸發(fā)-->
    <!--@wheel 當(dāng)滾輪滾動(dòng)后，執(zhí)行demo，執(zhí)行完demo，頁面上的滾動(dòng)條才向下滾動(dòng)-->
    <!--@wheel 增加.passive后，當(dāng)滾輪滾動(dòng)后，滾輪會(huì)先執(zhí)行，不用等待執(zhí)行完demo-->
    <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                alert('你好')
                //console.log(e.target);
            },
            showMsg(res){
                console.log(res);
            },
            demo(){
                for (let i=0;i<100000;i++){
                    console.log("#");
                }
                console.log("累~~！！");
            }
        }
    })
</script>
</body>
</html>

三、鍵盤事件

給 input 綁定一個(gè) keyup 事件，輸入文字按下回車，打印輸入內(nèi)容，可以這樣寫：

<input type="text" placeholder="按下回車提示輸入" @keyup="showInfo">
new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                //判斷是否回車
                if(e.keyCode !== 13) return
                console.log(e.target.value);
            }
        }
    })

但我們也可以使用回車鍵的別名：

<input type="text" placeholder="按下回車提示輸入" @keyup.enter="showInfo">
new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                console.log(e.target.value);
            }
        }
    })

1、Vue中常用的按鍵別名 回車 =>enter 刪除=>delete(捕獲"刪除”和“退格”鍵) 退出=>esc 空格=>space 換行=> tab（特殊，必須配合 keydown 去使用） 上=> up 下=>down 左=>left 右=>right

2、Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為 kebab-case（短橫線命名)

我們可以通過輸出 e.key 和 e.keyCode 來查看按鍵原始值

showInfo(e){
	console.log(e.key,e.keyCode);
}

所以回車鍵也可以這樣寫 @keyup.Enter="showInfo" 需要注意的是切換大小寫的 CapsLock 需要這樣寫 @keyup.caps-lock="showInfo"

3、系統(tǒng)修飾鍵(用法特殊）：ctrl、alt、 shift、meta(win)

(1).配合 keyup 使用：按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)(2).配合keydown使用：正常觸發(fā)事件

例如我們需要按下 ctrl 時(shí)執(zhí)行 showInfo 方法

<input type="text" placeholder="按下回車提示輸入" @keyup.ctrl="showInfo">

運(yùn)行程序，單純按 ctrl 是不管用的，只有 ctrl 和其他按鍵一起按下，例如 ctrl+z 然后再放開 z ，showInfo 方法才能執(zhí)行

4、也可以使用keyCode去指定具體的按鍵（不推薦)

綁定回車按鍵

<input type="text" placeholder="按下回車提示輸入" @keyup.13="showInfo">

5.Vue.config.keyCodes.自定義鍵名=鍵碼,可以去定制按鍵別名（不推薦）

<input type="text" placeholder="按下回車提示輸入" @keyup.huiche="showInfo">
Vue.config.keyCodes.huiche = 13

使用技巧

1、事件修飾符可以寫多個(gè)

<div class="demo1" @click="showInfo">
	<a  rel="external nofollow"  rel="external nofollow"  @click.stop.prevent="showInfo">點(diǎn)我提示信息</a>
</div>

運(yùn)行結(jié)果是只會(huì)提示 1 次信息，不會(huì)跳轉(zhuǎn)

2、之前說了系統(tǒng)修飾符配合 keyup 使用：按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。如果就是需要兩個(gè)按鍵同時(shí)觸發(fā)事件可以這樣寫： 例如，需要同時(shí)按下 ctrl+y 才執(zhí)行 showInfo

<input type="text" placeholder="按下回車提示輸入" @keyup.ctrl.y="showInfo">

到此這篇關(guān)于Vue中的事件處理詳情的文章就介紹到這了,更多相關(guān)Vue事件處理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vuex的store中的Module用法及說明

    Vuex的store中的Module用法及說明

    這篇文章主要介紹了Vuex的store中的Module用法及說明，具有很好的參考價(jià)值，希望對大家有所幫助。
    2023-01-01
  • vue中實(shí)現(xiàn)checkbox回顯效果

    vue中實(shí)現(xiàn)checkbox回顯效果

    這篇文章主要介紹了vue中實(shí)現(xiàn)checkbox回顯效果,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • vue中的select綁定多個(gè)值

    vue中的select綁定多個(gè)值

    這篇文章主要介紹了vue中的select綁定多個(gè)值，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 簡單理解vue中實(shí)例屬性vm.$els

    簡單理解vue中實(shí)例屬性vm.$els

    這篇文章主要幫助大家簡單理解vue中實(shí)例屬性vm.$els,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • 解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問題

    解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問題

    今天小編就為大家分享一篇解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例

    Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例

    這篇文章主要為大家介紹了Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問題

    vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問題

    這篇文章主要介紹了vue項(xiàng)目移動(dòng)端實(shí)現(xiàn)ip輸入框問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03
  • axios取消請求與避免重復(fù)請求

    axios取消請求與避免重復(fù)請求

    在項(xiàng)目中經(jīng)常有一些場景會(huì)連續(xù)發(fā)送多個(gè)請求,而異步會(huì)導(dǎo)致最后得到的結(jié)果不是我們想要的,并且對性能也有非常大的影響,這篇文章主要給大家介紹了關(guān)于axios取消請求與避免重復(fù)請求的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • vant?toast?關(guān)閉棧溢出問題及解決

    vant?toast?關(guān)閉棧溢出問題及解決

    這篇文章主要介紹了vant?toast?關(guān)閉棧溢出問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-05-05
  • 詳解Vue如何自定義hooks(組合式)函數(shù)

    詳解Vue如何自定義hooks(組合式)函數(shù)

    這篇文章主要為大家詳細(xì)介紹了在Vue中如何實(shí)現(xiàn)自定義hooks(組合式)函數(shù)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-03-03

最新評論