1. Basic use of v-on
Listening to the click event was used in the previous counter case v-on:click. Here is a review:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{
{count}}</h2>
<!-- <button v-on:click="count++">加</button>
<button v-on:click="count--">减</button> -->
<button @click="increment">加</button>
<button @click="decrement()">减</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
count:0
},
methods: {
increment(){
this.count++
},
decrement(){
this.count--
}
}
})
</script>
</body>
</html>Use v-on:clickto bind the button to listen to events and callback functions, @ is v-on:syntactic sugar, that is, shorthand can also be used @click. The method generally needs to write the method name plus (), which @clickcan be omitted, as mentioned above <button @click="increment">加</button>.
2. Parameter passing of v-on
After understanding the basic use of v-on, now we need to understand parameter passing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 事件没传参 -->
<button @click="btnClick">按钮1</button>
<button @click="btnClick()">按钮2</button>
<!-- 事件调用方法传参，写函数时候省略小括号，但是函数本身需要传递一个参数 -->
<button @click="btnClick2(123)">按钮3</button>
<button @click="btnClick2()">按钮4</button>
<button @click="btnClick2">按钮5</button>
<!-- 事件调用时候需要传入event还需要传入其他参数 -->
<button @click="btnClick3($event,123)">按钮6</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
btnClick(){
console.log("点击XXX");
},
btnClick2(value){
console.log(value+"----------");
},
btnClick3(event,value){
console.log(event+"----------"+value);
}
}
})
</script>
</body>
</html> - The event does not pass parameters, you can omit ()
- The event call method passes parameters, and the parentheses are omitted when writing the function, but the function itself needs to pass a parameter, which is the native event event parameter passed in
- If you need to pass in a certain parameter and event at the same time, you can
$eventpass in the event.
Button 4 calls btnClick2(value){}, at this time undefined. () is omitted when button 5 is called, and the native event event will be automatically passed in. If we need the event object and other parameters, we can use the $eventobject.
3. Modifiers of v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-on的修饰符</title>
<style>
.div {
height:80px;
background:#f00;
}
</style>
</head>
<body>
<div id="app">
<!--1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() -->
<div @click="divClick">
<button @click.stop="btnClick">按钮1</button>
</div>
<!-- 2. .prevent 调用event.preeventDefault阻止默认行为 -->
<form action="www.baidu.com">
<button type="submit" @click.prevent="submitClick">提交</button>
</form>
<!--3. 监听键盘的事件 -->
<form @submit.prevent=''>
账号<input type="text" name="user"/>
密码<input type="text" name="password" @keyup.enter="submit"/>
<input type="submit" value="登录"/>
</form>
<!--4. 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!--5. capture使用事件的捕获模式 -->
<div class="box1" @click.capture="show(111)">
div1外面
<div class="box2" @click="show(222)">
div2里面
</div>
</div>
<!-- 6.只有event.target是当前操作的元素时才触发事件 -->
<div class="div" @click.self="showself">
<button @click="showself">点我</button>
</div>
<!-- 7.passive事件的默认行为立即执行，无需等待事件回调执行完毕 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
btnClick(){
console.log("点击button");
},
divClick(){
console.log("点击div");
},
submitClcik(){
console.log("提交被阻止了")
},
submit(){
console.log("keyup点击")
},
showInfo(){
alert('web学习真有趣')
},
show(msg){
console.log(msg)
},
showself(e){
console.log(e.target);
},
}
})
</script>
</body>
</html>.stopThe use of btn's click event will not propagate, and will not bubble to the upper layer, callevent.stopPropagation()..preventCallingevent.preeventDefaultprevents the default behavior..enterListen for keyboard events;onceThe event is only triggered once (commonly used); 5.captureUse the capture mode of the event; 6.selfThe event is only triggered when event.target is the element of the current operation; 7.passiveThe default behavior of the event is executed immediately, without waiting for the event callback to complete; 1. Commonly used key aliases in Vue: carriage return => enter delete => delete (capture "delete" and "backspace" keys) exit => esc space => space newline => tab (special, must be used with keydown) on => up down => down left => left right => right 2. Vue does not provide an alias button, you can use the original key value of the button to bind, but pay attention to convert to kebab-case (short horizontal line naming) 3 .System modifier keys (special usage): ctrl, alt, shift, meta (1). Use with keyup: press other keys while pressing the modifier key, and then release the other keys, the event will be triggered. (2). Use with keydown: normal trigger event. 4. You can also use keyCode to specify a specific key (not recommended) 5. Vue.config.keyCodes. Custom key name = key code, you can customize the key alias
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>键盘事件</title>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{
{msg}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="show">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
new Vue({
el:'#app',
data:{
msg:'web前端'
},
methods: {
show(e){
// console.log(e.key,e.keyCode)CapsLock这样的，应该使用@keyup.caps-lock="show"
console.log(e.target.value)
}
},
})
</script>
</html>You can also use keyCode to specify a specific key (not recommended)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>键盘事件</title>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{
{msg}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.13="show">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
new Vue({
el:'#app',
data:{
msg:'web前端'
},
methods: {
show(e){
// console.log(e.key,e.keyCode)CapsLock这样的，应该使用@keyup.caps-lock="show"
console.log(e.target.value)
}
},
})
</script>
</html>Another way to lose the focus of the login text box can be used
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-on的修饰符</title>
</head>
<body>
<div id="app">
<!--3. 监听键盘的事件 -->
<form @submit.prevent=''>
账号<input type="text" name="user"/>
密码<input type="text" name="password" />
<input type="submit" value="登录" @keyup.enter="submit"/>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
submit(){
console.log("keyup点击")
}
},
created() {
let that = this;
document.onkeydown =function(e){
e = window.event || e;
if(e.code=='Enter'||e.code=='enter'){//验证在登录界面和按得键是回车键enter
that.submit();//登录函数
}
}
}
})
</script>
</body>
</html>in the frame
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form" @keyup.enter.native="login">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary" @keyup.enter.native="login">登录</el-button>
<!-- <el-button type="info" @click="resetLoginForm">重置</el-button> -->
</el-form-item>
</el-form>or
<template>
<div>
<el-form :model="form">
<el-form-item prop="username">
<el-input v-model.trim="form.username" auto-complete="off" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" @keyup.enter.native="handleLogin('form')" v-model.trim="form.password" auto-complete="off" placeholder="输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleLogin('form')">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
methods: {
handleLogin(form) {
...
}
}
}