总结：
v-on：绑定行内事件，用在“事件属性上”;2.
$event:vue中的事件对象，代替event
事件主体：$event.target:<input>;3.
v-on用 @ 代替4.
v-model:双向数据绑定，代替@input="value=$event.targe.value"
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据的双向绑定</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><p><!-- ES6 原生数据双向绑定 --><span>ES6:</span><input type="text" name="" oninput="this.nextElementSibling.textContent = this.value"><span></span></p><hr><!-- Vue 数据双向绑定 --><!-- v-bind:绑定预定义属性 --><div id="app"><span>Vue:</span><!-- v-on：绑定行内事件，用在“事件属性上” --><!-- $event:vue中的事件对象，代替event --><!-- 事件主体：$event.target:<input> --><!-- v-on 用 @ 代替 --><!-- <input type="text" v-on:input="value=$event.target.value" :value="value"> --><input type="text" @:input="value=$event.target.value" :value="value"><span>{{value}}</span><hr><!-- v-model:双向数据绑定，代替 @input="value=$event.targe.value" --><span>Vue:</span><input type="text" v-model="value" :value="value"><span>{{value}}</span></div><script>const app = Vue.createApp({data() {return {value: 'php1.cn',};},});const vm = app.mount('#app');</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件绑定</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><!-- 函数方法实现:点击链接,输出链接 --><p>事件属性：<a href="https://www.php.cn" onclick="showUrl(this,event)">show Url</a><span class="url"></span></p><script>// function showUrl(ev){// //禁用默认行为// ev.preventDefault();// // ev.target.href = https://www.php.cn// ev.target.nextElementSibling.textContent = ev.target.href;// }// 代码简化// function showUrl(ele, ev) {// //禁用默认行为// ev.preventDefault();// // ev.target.href = https://www.php.cn// ele.nextElementSibling.textContent = ele.href;// }</script><hr><!-- Vue 实现方法 --><div class="app"><!-- @click.prevent:事件修饰符,禁用默认点击行为 --><!-- stop:防止冒泡 --><a href="https://www.php.cn" @click.prevent="showUrl($event)">show Url</a><span class="url">{{url}}</span></div><script>Vue.createApp({//数据data() {return {url: null,};},//方法methods: {showUrl(ev){// ev.preventDefault();//事件禁用放到事件触发(@click后面)//数据注入:所有Data中声明的变量,都是实例的属性this.url = ev.currentTarget.href;},},}).mount('.app');</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
