1. Uso básico de v-on
En el caso contrario anterior se utilizó la escucha del evento de clic v-on:click. Aquí hay una reseña:
<!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>Úselo v-on:clickpara vincular el botón para escuchar eventos y funciones de devolución de llamada, @ es v-on:azúcar sintáctico, es decir, también se puede usar taquigrafía @click. El método generalmente necesita escribir el nombre del método más (), que @clickse puede omitir, como se mencionó anteriormente <button @click="increment">加</button>.
2. Paso de parámetros de v-on
Después de comprender el uso básico de v-on, ahora necesitamos comprender el paso de parámetros.
<!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> - El evento no pasa parámetros, puedes omitir ()
- El método de llamada de evento pasa parámetros y los paréntesis se omiten al escribir la función, pero la función en sí necesita pasar un parámetro, que es el parámetro de evento nativo pasado.
- Si necesita pasar un determinado parámetro y evento al mismo tiempo, puede
$eventpasar el evento.
El botón 4 llama btnClick2(value){}, en este momento undefined. () se omite cuando se llama al botón 5, y el evento nativo se pasará automáticamente. Si necesitamos el objeto de evento y otros parámetros, podemos usar el $eventobjeto.
3. Modificadores de 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>.stopEl uso del evento de clic de btn no se propagará y no se expandirá a la capa superior, llame aevent.stopPropagation()..preventLa llamadaevent.preeventDefaultevita el comportamiento predeterminado..enterEscuche los eventos del teclado;onceEl evento solo se activa una vez (uso común); 5.captureUtilice el modo de captura del evento; 6.selfEl evento solo se activa cuando event.target es el elemento de la operación actual; 7.passiveSe ejecuta el comportamiento predeterminado del evento inmediatamente, sin esperar a que se complete la devolución de llamada del evento: 1. Alias de teclas comúnmente utilizados en Vue: retorno de carro => ingresar eliminar => eliminar (capturar las teclas "eliminar" y "retroceso") salir => esc espacio => espacio nueva línea = > tab (especial, debe usarse con la tecla presionada) activado => arriba abajo => abajo izquierda => izquierda derecha => derecha 2. Vue no proporciona un botón de alias, puede usar el valor de clave original del botón para vincular, pero preste atención para convertir a kebab-case (nombramiento de línea horizontal corta) 3. Teclas modificadoras del sistema (uso especial): ctrl, alt, shift, meta (1). Usar con keyup: presione otras teclas mientras presiona la tecla modificadora, y luego suelte las otras teclas, se activará el evento. (2) Uso con pulsación de tecla: evento de activación normal. 4. También puede usar keyCode para especificar una clave específica (no recomendado) 5. Vue.config.keyCodes Nombre de clave personalizado = código de clave, puede personalizar el alias de clave
<!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>También puede utilizar keyCode para especificar claves específicas (no recomendado)
<!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>Otro método que se puede utilizar cuando se pierde el foco del cuadro de texto de inicio de sesión
<!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>en el marco
<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>o
<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) {
...
}
}
}