Vue.js Method

Vue.js Method

Vue.js的事件监听一般都通过v-on指令配置在HTML中,虽然也可以在JavaScript代码中使用原生addEventListener方法添加事件监听,但Vue.js本身并不提倡如此。看上去这种方式不符合传统的"关注点分离"的理念,但其实所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上。实际上,采用它提供的v-on指令有如下几点好处:

  • 通过查看HTML模板便能轻松定位JavaScript代码中对应的方法。
  • 无须在JavaScript中手动绑定事件,ViewModel和DOM完全解耦,更易于测试。
  • 当一个ViewModel被销毁时,所有的事件处理器都会自动被删除。

如何绑定事件

内联方式

Vue.js在HTML文档元素中采用v-on指令来监听DOM事件。

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

这里将一个单击事件处理器click绑定到greet方法,该方法在Vue实例中进行定义。
在这种内敛方式下一个事件处理器只能绑定一个方法,如需绑定多个方法,仍需在JavaScript代码中使用addEventListener方法来绑定。
除了直接绑定到一个方法外,也可以直接使用内联JavaScript语句。

<div id="example-2">
	<button v-on:click="say('hi')">Say Hi</button>
	<button v-on:click="count = count + 1">Say What</button>
</div>

与内联表达式相仿,事件处理器限制为一个JavaScript语句。

methods配置

在上一节中,当用户将click事件与某个方法绑定时,需要在Vue实力当中进行定义,所有定义的方法都放在methods属性下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
    <button v-on:click="greet">Greet</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#example',
        methods: {
            greet: function(event){
                // 方法内`this`指向vm
                alert('Welcome to Vue.js By DDFE!')
                // `event`是原生DOM事件
                alert(event.target.tagName)
            }
        }
    })
    //也可以在JavaScript代码中调用方法
    vm.greet()
</script>
</html>

在这里插入图片描述
对于say方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
    <button v-on:click="say('hi')">Say Hi</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#example',
        methods: {
            say: function (msg) {
                alert(msg)
            }
        }
    })
</script>
</html>

在这里插入图片描述
需要注意的地方如下:

  • methods中定义的方法内的this始终指向创建的Vue实例。
  • 与事件绑定的方法支持参数event即原生DOM事件的传入。
  • 方法用在普通元素上时,只能监听原生DOM事件;用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

$events应用

在Vue实例中创建的方法需要访问原生DOM事件时可以直接传入event来获取。如果在内联语句处理器中需要访问原生DOM事件时,则可以用一个特殊变量$event将其传入方法中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example">
    <button v-on:click="say('hi',$event)">Say Hi</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#example',
        methods: {
            say: function (msg,event) {
                event.preventDefault()
            }
        }
    })
</script>
</html>

如何使用修饰符

修饰符是以半角句号(.)开始的特殊后缀,用于表示指令应当以特殊方式绑定。
在使用方式上,事件修饰符可以串联

<a v-on:click.stop.prevent="doThat">

也可以只有修饰符而不绑定事件

<form v-on:submit.prevent>

.prevent

在事件处理器中经常需要调用event.preventDefault()来阻止事件的默认行为,Vue.js提供了.prevent事件修饰符以使之在HTML中便能完成操作。

<form v-on:submit.prevent="onSubmit"></form>

stop

除了event.preventDefault(),用于阻止事件冒泡的event.stopPropagation()也经常被调用,Vue.js也提供了相应的.stop事件修饰符。

<a v-on:click.stop="doThis"></a>

capture

.capture事件修饰符表示添加事件侦听器时采用capture即捕获模式。

<div v-on:click.capture="doThis">...</div>

self

.self事件修饰符表示只当事件在事件在该元素本身(而不是子元素)触发时触发回调。

<div v-on:click.self="doThis">...</div>

按键

监听键盘事件经常需要检测keyCode。

<input v-on:keyup.13="submit">

鉴于记住所有的keyCode比较困难,Vue.js为常用的按键提供了别名。

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

完整的按键别名

  • enter(13)
  • tab(9)
  • delete(8,46)
  • esc(27)
  • space(32)
  • up(38)
  • down(40)
  • left(37)
  • right(39)

@click缩写

<a @click="doSomething"></a>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值