事件处理
选项式
<template>
<h1>{{ count }}</h1>
<!-- 事件绑定v-on:click -->
<button type="button" v-on:click="addCount">点击累加</button>
<!-- 简写方式@click -->
<button type="button" @click="addCount">点击累加</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods:{
addCount(){
// data中的参数可以用this.key获取
this.count++
}
}
}
</script>组合式
<template>
<h1>{{ count }}</h1>
<!-- 事件绑定v-on:click -->
<button type="button" v-on:click="addCount">点击累加</button>
<!-- 简写方式@click -->
<button type="button" @click="addCount">点击累加</button>
</template>
<script setup>
import {ref} from 'vue';
let count = ref(0);
// function addCount() {
// count.value ++;
// }
const addCount = () => {
count.value ++;
}
</script>事件传参
event对象
选项式
<template>
<button @click="test">点击</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods:{
test(event){
// event:每一个事件触发时，都会产生一个与之对应的事件对象 event ，其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容
console.log(event.target) // event.target获取被触发的元素
}
}
}
</script>组合式
<template>
<button @click="test">点击</button>
</template>
<script setup>
function test(event){
// event:每一个事件触发时，都会产生一个与之对应的事件对象 event ，其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容
console.log(event.target) // event.target获取被触发的元素
console.log(event.target.tagName)//获取被触发dom的标签名
}
</script>传递自定义参数
选项式
<template>
<!-- 如果需要传递自定义参数，并且还要传递event对象，那么event需要$event的方式传递 -->
<button @click="test('张三',20,$event)">点击</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods:{
test(name,age,event){
console.log('姓名:'+name+',age:'+age)
console.log(event.target)
}
}
}
</script>组合式
<template>
<!-- 如果需要传递自定义参数，并且还要传递event对象，那么event需要$event的方式传递 -->
<button @click="test('张三',20,$event)">点击</button>
</template>
<script setup>
function test(name,age,event){
console.log('姓名:'+name+',age:'+age)
console.log(event.target)
}
</script>阻止默认行为
选项式
<template>
<a @click="testjs" href="https://www.baidu.com">点击js</a><br>
<!-- vue阻止默认行为,点击事件后面加prevent -->
<a @click.prevent="testvue" href="https://www.baidu.com">点击vue</a>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
testjs(event){
//event.preventDefault()阻止默认行为，可以使a标签不再跳转，这是js的写法
event.preventDefault()
console.log('点击了')
},
testvue(){
console.log('点击了')
}
}
}
</script>组合式
<template>
<a @click="testjs" href="https://www.baidu.com">点击js</a><br>
<!-- vue阻止默认行为,点击事件后面加prevent -->
<a @click.prevent="testvue" href="https://www.baidu.com">点击vue</a>
</template>
<script setup>
function testjs(event){
//event.preventDefault()阻止默认行为，可以使a标签不再跳转，这是js的写法
event.preventDefault()
console.log('点击了')
}
function testvue(){
console.log('点击了')
}
</script>阻止事件冒泡
选项式
<template>
<div id="box" @click="divCli">
<!-- vue处理事件冒泡加stop即可 -->
<button @click.stop="subCli">点击</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
divCli(){
console.log("父亲事件")
},
subCli(event){
//event.stopPropagation(); //js方式
console.log("儿子事件")
}
}
}
</script>
<style>
#box {
width: 300px;
height: 300px;
background-color: red;
text-align: center;
line-height: 300px;
}
</style>组合式
<template>
<div id="box" @click="divCli">
<!-- vue处理事件冒泡加stop即可 -->
<button @click.stop="subCli">点击</button>
</div>
</template>
<script setup>
function divCli(){
console.log("父亲事件")
}
function subCli(event){
//event.stopPropagation(); //js方式
console.log("儿子事件")
}
</script>
<style scoped>
#box {
width: 300px;
height: 300px;
background-color: red;
text-align: center;
line-height: 300px;
}
</style>表单输入绑定
选项式
<template>
用户名：<input type="text" v-model="username"><br>
年龄：<input type="number" v-model.number="age"><br>
用户性别：<input type="radio" v-model="sex" value="男">男<input type="radio" v-model="sex" value="女">女<br>
爱好：<input type="checkbox" v-model="habby.swim">游泳<input type="checkbox" v-model="habby.run">跑步<br>
籍贯：
<select v-model="city">
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
<option value="温州">温州</option>
</select><br>
您输入的用户名：{{ username }}<br>
您输入的年龄：{{ age }}<br>
您输入的性别：{{ sex }}<br>
您输入的爱好：{{ habby }}<br>
您输入的籍贯：{{ city }}<br>
</template>
<script>
export default {
data() {
return {
username: "",
age: 0,
sex: '男',
habby: {
swim: false,
run: false
},
city: ""
}
}
}
</script>组合式
<template>
用户名：<input type="text" v-model="data.username"><br>
年龄：<input type="number" v-model.number="data.age"><br>
用户性别：<input type="radio" v-model="data.sex" value="男">男<input type="radio" v-model="data.sex" value="女">女<br>
爱好：<input type="checkbox" v-model="data.habby.swim">游泳<input type="checkbox" v-model="data.habby.run">跑步<br>
籍贯：
<select v-model="data.city">
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
<option value="温州">温州</option>
</select><br>
您输入的用户名：{{ data.username }}<br>
您输入的年龄：{{ data.age }}<br>
您输入的性别：{{ data.sex }}<br>
您输入的爱好：{{ data.habby }}<br>
您输入的籍贯：{{ data.city }}<br>
</template>
<script setup>
import { reactive } from 'vue';
let data = reactive({
username: "",
age: 0,
sex: '男',
habby: {
swim: false,
run: false
},
city: ""
})
</script>案例
选项式
<template>
<table border="1" width="500px">
<thead>
<tr>
<th>序号</th>
<th>用户编号</th>
<th>用户名称</th>
<th>用户性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 如果后端发过来的数据没有id,可以直接用index作为key -->
<tr v-for="(item,index) in list" :key="item.userId">
<td>{{ index }}</td>
<td>{{ item.userId }}</td>
<td>{{ item.username }}</td>
<td>{{ item.sex }}</td>
<td><button @click="delUser(item,index)">删除</button></td>
</tr>
</tbody>
</table>
<div id="box">
<p>用户编号：<input type="text" v-model="user.userId"></p>
<p>用户名称：<input type="text" v-model="user.username"></p>
<p>用户性别：<input type="radio" v-model="user.sex" value="男">男<input type="radio" v-model="user.sex" value="女">女</p>
<p><button type="button" @click="addUser">添加</button></p>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
userId: 10001,
username: '张三',
sex: '男'
},
{
userId: 10002,
username: '李四',
sex: '女'
},
{
userId: 10003,
username: '王五',
sex: '男'
}
],
user: {
userId: '',
username: '',
sex: ''
}
}
},
methods:{
delUser(user,index){
console.log("删除用户信息：用户编号:"+user.userId+",用户名:"+user.username+",性别:"+user.sex)
this.list.splice(index,1); // splice根据下标删除数据
},
addUser(){
this.list.push(this.user)
this.user = {
userId: '',
username: '',
sex: ''
}
}
}
}
</script>组合式
<template>
<table border="1" width="500px">
<thead>
<tr>
<th>序号</th>
<th>用户编号</th>
<th>用户名称</th>
<th>用户性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 如果后端发过来的数据没有id,可以直接用index作为key -->
<tr v-for="(item, index) in userList.list" :key="item.userId">
<td>{{ index }}</td>
<td>{{ item.userId }}</td>
<td>{{ item.username }}</td>
<td>{{ item.sex }}</td>
<td><button @click="delUser(item, index)">删除</button></td>
</tr>
</tbody>
</table>
<div id="box">
<p>用户编号：<input type="text" v-model="user.userId"></p>
<p>用户名称：<input type="text" v-model="user.username"></p>
<p>用户性别：<input type="radio" v-model="user.sex" value="男">男<input type="radio" v-model="user.sex" value="女">女</p>
<p><button type="button" @click="addUser">添加</button></p>
</div>
</template>
<script setup>
import { reactive } from 'vue';
let userList = reactive({
list: [
{
userId: 10001,
username: '张三',
sex: '男'
},
{
userId: 10002,
username: '李四',
sex: '女'
},
{
userId: 10003,
username: '王五',
sex: '男'
}
]
});
let user = reactive({
userId: '',
username: '',
sex: ''
});
function addUser() {
userList.list.push(user);
user = {
userId: '',
username: '',
sex: ''
}
}
function delUser(user, index) {
console.log("删除用户信息：用户编号:" + user.userId + ",用户名:" + user.username + ",性别:" + user.sex)
userList.list.splice(index, 1); // splice根据下标删除数据
}
</script>