Tabla de contenido
Enlace de datos tridireccional y bidireccional
1. Mecanismo de eventos
$Vue usa el comando v-on para escuchar eventos DOM y ejecuta código JavaScript cuando se activa. También puede recibir un nombre de método que debe llamarse. Podemos pasar el objeto de evento nativo a través del parámetro de evento en el método, y también puede pasar otros parámetros. Puede abreviar v-on: nombre del evento a @nombre del evento
<body>
<div id="app">
<!-- 直接运行一些 JavaScript 代码 -->
<button v-on:click="console.log('我被点击了')">点击我</button>
<!-- 接收一个需要调用的方法名称，即函数名，函数实现写在methods中 -->
<button v-on:click="handler">点击我</button>
<!-- 传递参数 -->
<button v-on:click="handler1($event,'Hi')">点击我</button>
<!-- 简写 -->
<button @click="handler1($event,'Hi')">点击我</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
handler(){
console.log('hello vue');
},
handler1(e,n){
console.log(e,n);
}
}
})
</script>
</body>
2. Modificadores de eventos
Es un requisito muy común llamar a event.preventDefault() o event.stopPropagation() en los controladores de eventos de JavaScript. Vue proporciona una mejor manera: el controlador de eventos solo tiene una lógica de datos pura, en lugar de tratar con los detalles de los eventos DOM, estos detalles se completan a través de modificadores de eventos.
Los modificadores comunes son los siguientes:
.stop detener el burbujeo de eventos
.prevent evita el comportamiento predeterminado del evento
.capture ejecuta la función de procesamiento de eventos durante la fase de captura de eventos
.self activa el controlador solo cuando event.target es el elemento actual en sí
El controlador de eventos .once se ejecuta una vez y se desvincula
El comportamiento por defecto del evento .passive scrolling (es decir, el comportamiento scrolling) se activará inmediatamente, generalmente se utiliza junto con el scroll para mejorar el rendimiento del terminal móvil (porque cada vez que se produce un evento, el navegador comprobará si existe preventDefault para evitar la acción predeterminada del evento.. Agregamos .passive para decirle al navegador que no es necesario consultar, y no usamos preventDefault para evitar la acción predeterminada. Passive y previene el conflicto y no puede ser vinculado a un oyente al mismo tiempo. )
Modificadores clave (generalmente utilizados junto con el tipo de evento keyup):
.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right 、.ctrl、.alt、.shift、.meta
Modificadores del mouse (evento mouseup):
.izquierda , .derecha , .medio
<style>
.outer{
width: 400px;
height: 400px;
background-color: rgb(233, 47, 202);
display: flex;
justify-content: center;
align-items: center;
}
.outer1{
overflow: scroll;
height: 100px;
}
.inner{
width: 200px;
height: 200px;
background-color: rgb(237, 143, 20);
}
</style>
</head>
<body>
<div id="app">
<!-- 按下回车执行 enter 或者 13 (13表示回车键)-->
<!-- <input type="text" @keyup.enter="console.log('键盘按下了')"> -->
<input type="text" @keyup.13="console.log('键盘按下了')">
<!-- 按下鼠标执行 mouseup middle 中间滚轮 left right -->
<input type="text" @mouseup.middle="console.log('鼠标按下了')">
<br>-------------------------------------------------------
<!-- .stop 阻止事件冒泡 -->
<div class="outer" @click="outer">
<div class="inner" @click.stop="inner">stop 阻止事件冒泡</div>
</div>
<br>-------------------------------------------------------
<!-- .captrue 事件捕获阶段执行 -->
<div class="outer" @click.capture="outer">
<div class="inner" @click="inner">.captrue 事件捕获阶段执行</div>
</div>
<!-- 阻止事件的默认行为 prevent -->
<a @click.prevent="toJump" href="https://www.baidu.com">百度一下</a>
<!-- 事件修饰符 passive 一般与scroll连用 表示直接使用事件默认行为-->
<div class="outer outer1" @scroll="outer">
<div class="inner" @click="inner"></div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
outer(){
console.log('outer被点击了');
},
inner(event){
console.log('inner被点击了');
// 原生阻止事件冒泡
// event.stopPropagation()
},
toJump(event){
// 原生阻止事件默认行为
// event.preventDefault()
}
}
})
</script>
</body>Enlace de datos tridireccional y bidireccional
El enlace de datos bidireccional<input> se puede crear en formularios y <textarea>en <select>elementos con la directiva v-model . Selecciona automáticamente el método correcto para actualizar el elemento según el tipo de control. A pesar de su magia, v-model es esencialmente nada más que azúcar sintáctico. Es responsable de escuchar los eventos de entrada del usuario para actualizar los datos y realizar un procesamiento especial para algunos escenarios extremos. Use v-model para vincular el valor, luego no es necesario escribir el atributo de nombre.
<body>
<div id="app">
<!-- v-model 数据改变 v-model 视图也会更新-->
{
{stu}}
<!-- lazy修饰符 懒加载，按下回车后才更新数据 -->
<!-- 用户名: <input type="text" v-model.lazy="stu.username"> -->
<!-- trim修饰符 去除前后空格 -->
<br>
<br>
用户名: <input type="text" v-model.trim="stu.username">
<!-- number修饰符 将输入的值转成数字类型-->
密码: <input type="password" v-model.number="stu.password">
<!-- 单选按钮 -->
<br>
男:<input type="radio" value="male" v-model="stu.gender">
女:<input type="radio" value="female" v-model="stu.gender">
<br>
<!-- 复选框 -->
游泳<input type="checkbox" value="swimming" v-model="stu.hobbies">
篮球<input type="checkbox" value="basketball" v-model="stu.hobbies">
足球<input type="checkbox" value="football" v-model="stu.hobbies">
<br>
<!-- 多行文本框 -->
<textarea v-model="stu.introduce"></textarea>
<br>
<!-- 下拉框 -->
<select v-model="stu.city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="liuzhou">柳州</option>
</select>
</div>
<script>
new Vue({
el:"#app",
data:{
// 表单对象
stu:{
hobbies:[]
}
},
methods:{}
})
</script>
</body>