Vue.js Method

Posted 2022-02-06 shi_zi_183

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于Vue.js Method的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js Method

vue.js基础知识篇:过渡Method和Vue实例方法

实例分析Vue.js中 computed和method不同机制

通过调用Local Method响应Vue.js事件总线时丢失上下文

Method