Vue自學之路9-vue模版語法（事件修飾符&按鍵修飾符)

 Vue中的事件修飾符

1) .stop 阻止冒泡

<input type='button' @click.stop='handle1()'/>VUE方式阻止冒泡</input>

2) .prevent 阻止默認行爲

<a href="https://blog.csdn.net/ccgshigao?spm=1010.2135.3001.5343" v-on:click.prevent="handle2()"></a>

Vue中的按鍵修飾符

1) .enter 回車鍵

<input @keyup.enter='submit'/>

2) .delete 刪除鍵

<input @keyup.delete='handle'/>

經常使用的時間修飾符

• .stop 阻止事件繼續傳播
• .prevent 阻止標籤默認行爲
• .capture 使用事件捕獲模式,即元素自身觸發的事件先在此到處理，而後才交由內部元素進行處理
• .self 只當在 event.target 是當前元素自身時觸發處理函數
• .once 事件將只會觸發一次
• .passive 告訴瀏覽器你不想阻止事件的默認行爲

 經常使用的按鍵修飾符

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

自定義按鍵修飾符別名

在config.keyCodes對象中設置

Vue.config.keyCodes.f1 = 112

事件修飾符的例子

<div id='app'>
    <form>
        <div>
            <!--敲擊delete鍵，調用handleContent，清空用戶名-->
            <input type='text'  @keyup.delete='handleContent' v-module='uname' />
        </div>
        <div>
            <!--敲擊回車鍵，當放開的時候，會調用handleSubmit-->
            <input type='text' @keyup.enter='handleSubmit' v-module='pwd' />
        </div>
         <div>
            <input type='button' @click='handleSubmit' value='提交' />
        </div>
    </form>
    <div v-on:click='handle0'>
        <input type='button' @click='handle1()'/>傳統方式阻止冒泡</input>
    </div>
    
    <!-- 能夠預約義別名 -->
    <input type='text' @keyup.aaa='handleKeyCode' />
    <!-- 直接使用KeyCode的值 -->
    <input type='text' @keyup.65='handleKeyCode' />
    <div v-on:click='handle0'>
        <!-- .stop阻止冒泡 -->
        <input type='button' @click.stop='handle2()'/>VUE方式阻止冒泡</input>
    </div>
    
    <a href="https://blog.csdn.net/ccgshigao?spm=1010.2135.3001.5343" v-on:click="handle3()"></a>
    <!-- .prevent阻止默認行爲 -->
    <a href="https://blog.csdn.net/ccgshigao?spm=1010.2135.3001.5343" v-on:click.prevent="handle2()"></a>
    <div>{{ num }}</div>
</div>

<!-- 先下載vue.js -->
<script type='text/javascript' src='js/vue.js'></script>
<script>
//1. html中書寫標籤
//2. 引入vue.js
//3. 使用vue進行數據渲染。

//自定義按鍵修飾符
Vue.config.keyCodes.aaa = 65;

var vm = new Vue(
    {
        el: '#app', //綁定到id選擇器
        data: {
           "uname": "",
           "pwd" : "",
           "num" : 0,
        },methods: {
            //空參數，默認第一個參數傳遞event
            handle0: function(event){
                num++;
                
            },
            handle1: function(event) {
                event.stopPropation();
            }，
            
            handle2: function(event) {
                //do nothing;
            },
            
            handle3: function(event) {
                event.preventDefault();
            },
            handleKeyCode:function(event) {
                console.log(event.keyCode);
            },  
            handleSubmit: function(event){
                console.log(this.uname+":"+this.pwd);
            },
            handleContent: function(event){
                this.uname = "";
                
            }
           
        }
    }
)
</script>

傳送門：2021最新測試資料&大廠職位

博主：測試生財（一個不爲996而996的測開碼農）

座右銘：專一測試開發與自動化運維，努力讀書思考寫做，爲內卷的人生奠基財務自由。

內容範疇：技術提高，職場雜談，事業發展，閱讀寫做，投資理財，健康人生。

csdn：https://blog.csdn.net/ccgshigao

博客園：https://www.cnblogs.com/qa-freeroad/

51cto：https://blog.51cto.com/14900374

微信公衆號：測試生財（按期分享獨家內容和資源）