Vue深度学习-方法与事件处理器

Posted 2020-10-16 BluesQian

方法处理器

可以用 v-on 指令监听 DOM 事件：

<div id="app">
    <button v-on:click = "greet">Greet</button>
</div>

Js代码

new Vue({
    el: ‘#app‘,
    data: {
        message: ‘菜鸟教程!‘
    },
    methods:{
        greet:function () {
            alert("OP");
        }
    }
})

内联语句处理器

除了直接绑定到一个方法，也可以用内联 javascript 语句：

<div id="app">
    <button v-on:click = "greet(‘welcome‘)">Greet</button>
</div>

Js代码

new Vue({
    el: ‘#app‘,
    data: {
        message: ‘菜鸟教程!‘
    },
    methods:{
        greet:function (msg) {
            alert(msg);
        }
    }
})

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="say(‘hello!‘, $event)">Submit</button>

js代码：

new Vue({
  el: ‘#example‘,
  methods: {
    say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
  }
})

事件修饰符

在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。为了解决这个问题，Vue.js 为 v-on 提供两个事件修饰符：.prevent 与 .stop。

<!-- 阻止单击事件冒泡 -->
<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>

按键修饰符

在监听键盘事件时，我们经常需要检测 keyCode。Vue.js允许为v-on添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

常用按键别名：enter、tab、delete、esc、space、up、down、left、right。