Vue-方法与事件
作者：互联网
基本用法
监听点击事件
v-on
缩写：@
预期：Function | Inline Statement | Object
参数：event
修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
用法：
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"。
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
示例：
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<template v-if="type === 'name'">
<label> nickname :</label>
<input placeholder="your username" key="name-input">
</template>
<template v-else>
<label>email:</label>
<input placeholder="your email" key="email-input">
</template>
<button @click="handleToggleClick">change type</button>
<br>
点击次数: {{ counter }}
<button @click= "counter++" > +1</button>
<button @click= "counter--"> -1</button>
<button @click="rerest"> 重置</button>
<br>
<!-- <ul>
<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul> -->
<ul>
<template v-for="book in books">
<li>书名:{{book.name}}</li>
<li>作者:{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
counter: 0,
type: 'name',
books:[
{name: '富婆秘籍',
author: 'bx'
},
{name: '富婆通讯录',
author: 'bx'
},
{name: '如何让富婆爱上你',
author: 'bx'
}]
},
methods: {
handleToggleClick: function() {
this.type = this.type ==='name'? 'mail': 'name';
},
rerest: function () {
this.counter = 0;
}
}
})
app.books.push({
name: '如何让富婆迷恋你',
author: '净扯淡'
}),
// app.books.splice(3,1,{
// name: '如何PUA富婆',
// author: '[法] 奥利给'
// })
app.$set(app.books, 3, {
name: '如何PUA富婆',
author: '[法] 奥利给'
})
// app.books = app.books.filter(function (item) {
// console.log(item);
// return item.name.match(/爱/);
// })
</script>
</body>
</html>
如果不想在事件上带参数就在方法中规定事件的参数
这样设置 就可以在调用时不带括号
Before： <button @click= "handleAdd（10）"> + 10</button>
After： <button @click= "handleAdd"> + 10</button>
handleAdd: function(count) { count = 10; // this 指向前Vue实例app this.counter += count; },
修饰符
标签：富婆,触发,Vue,name,author,app,事件,方法 来源： https://www.cnblogs.com/banxianer/p/14395782.html