vue.js 事件綁定

時間 2019-11-10

原文原文鏈接

1.添加事件監聽 v-on

(1)使用v-on指令能夠添加事件監聽，語法：
v-on:eventName="fn" 也能夠簡寫成 @eventName="fn"
(2)回調函數的參數：$event就是當前觸發事件的元素，即便不傳$event,在回調函數中也能夠使用event這個參數vue

基本使用：app

<div id="app">
    <button v-on:click="test">點我</button>
    <button v-on:click="test2('hello vue')">點我2</button>
    <button v-on:click="test3($event)">點我3</button>
    <button v-on:click="test4">點我4</button>
</div>

methods: {
    test() {
        console.log('hi');
    },
    test2(content) {
        console.log(content);
    },
    test3(event) {
        console.log(event.target);
    },
    test4(){
       //即便不傳$event,在回調函數中也能夠使用event這個參數
       console.log(event.target.innerText);
    }
}

其餘事件：函數

<body>
    <div id="app">
        <!-- 點擊事件 -->
        <button @click="testClick">點我</button>
        <!-- input事件 -->
        <input type="text" @input="testInput">
        <!-- change事件 -->
        <select @change="testChange">
            <option value="020">廣州</option>
            <option value="021">上海</option>
        </select>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{},
        methods:{
            testClick(){
                console.log('Click')
            },
            testInput(){
                console.log('Input')
            },
            testChange(){
                console.log('Change')
            }
        }
    })
</script>

2.事件修飾符

事件修飾符用來控制事件的冒泡和默認行爲，共有2個：
.stop:阻止事件冒泡
.prevent:阻止默認事件spa

基本使用：code

<!-- 阻止事件冒泡 -->
<div id="big" @click="test">
    <div id="small" @click.stop="test2"></div>
</div>
<!-- 阻止默認事件，點擊a連接不會發生跳轉，只會執行test方法的代碼 -->
<a href="https://www.baidu.com/" @click.prevent="test">百度一下</a>

3.按鍵修飾符

按鍵修飾符用來監聽某個按鍵是否被按下事件

使用@keyup指令能夠爲元素添加鍵盤事件，例如：ip

<!-- 任何按鍵按下都會觸發回調函數 -->
<textarea @keyup="testKeyup" cols="30" rows="10"></textarea>

若是咱們想在特定按鍵按下才觸發回調的話就添加按鍵修飾符或按鍵碼，例如：
語法： @keyup.按鍵修飾符=回調函數
語法： @keyup.按鍵碼=回調函數get

<!-- 只有回車鍵按下的時候纔會觸發回調函數 -->
<!-- 下面的兩種寫法效果是一致的 -->

<!--使用按鍵碼，回車鍵的keyCode是13 -->
<textarea @keyup.13="testKeyup" cols="30" rows="10"></textarea>
<!--使用按鍵修飾符，由於回車鍵比較經常使用，因此vue爲他設置了名稱，能夠直接使用enter來代替。 -->
<textarea @keyup.enter="testKeyup" cols="30" rows="10"></textarea>

methods: {
    testKeyup() {
        console.log('回車鍵被按下了');
    }
}

Vue 提供了絕大多數經常使用的鍵修飾符：input

.enter
.tab
.delete (捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right

其他按鍵能夠用按鍵碼回調函數

<!--q的keyCode是81，當按下q鍵時會觸發test方法 -->
<input type="text" value="hello" @keyup.81="test">

你能夠經過全局 Vue.config.keyCodes.自定義按鍵修飾=按鍵碼，來自定義按鍵修飾符，例如：

//q的keyCode是81
<input type="text" value="hello" @keyup.q="test">

Vue.config.keyCodes.q=81

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。