一、v-on 指令用于 <div> 元素来侦听"mousemove"事件。 当"mousemove"事件发生时，会调用"mousePos"方法，并且默认使用该方法发送事件对象，这样我们就可以获得鼠标指针的位置
1.VUE页面框架
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
2.设置页面标题
<title>mousePos方法</title>
3.将Vue应用程序挂载到具有id="app"的div元素上
<div id="app">
4.显示一段提示文本，告诉用户在下面的方框上移动鼠标指针
<p>Move the mouse pointer over the box below:</p>
5.包含一个div元素，使用v-on指令监听mousemove事件，并执行mousePos方法
<div v-on:mousemove="mousePos"></div>
6.引入 Vue.js 3 的全局脚本
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
7.创建 Vue 应用程序
const app = Vue.createApp({})
8.定义数据对象，包含xPos和yPos两个属性，初始值都为0
data() {
return {
xPos: 0,
yPos: 0
}
},
9.定义方法对象，包含一个名为mousePos的方法，用于处理mousemove事件
methods: {
mousePos(event) {
// 将鼠标在div内的X和Y坐标保存到数据属性xPos和yPos中
this.xPos = event.offsetX;
this.yPos = event.offsetY;
}
}
10.将 Vue 应用程序挂载到页面上的 #app 元素
app.mount('#app')
11.完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>mousePos方法</title>
</head>
<body>
<div id="app">
<p>Move the mouse pointer over the box below:</p>
<div v-on:mousemove="mousePos"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app=Vue.createApp({
data(){
return {
xPos:0,
yPos:0
}
},
methods:{
mousePos(event){
this.xPos=event.offsetX
this.yPos=event.offsetY
}
}
})
app.mount('#app')
</script>
</body>
</html>
二、v-on 指令用于 <textarea> 标签，以侦听"input"事件，每当 textarea 元素内的文本发生更改时就会发生该事件，当"input"事件发生时，将调用"writeText"方法，并且默认使用该方法发送事件对象，以便我们可以从 <textarea> 标签获取文本。
1.显示一个textarea标签，使用v-on指令监听input事件，并执行writeText方法，并显示一个span元素，显示用户在textarea中输入的文本
<textarea v-on:input="writeText" placeholder="Start writting.."></textarea>
<span>{
{text}}</span>
2.定义数据对象，这里包含一个名为text的属性，初始值为空字符串
data() {
return {
text: ''
}
},
3.定义方法对象，包含一个名为writeText的方法，用于处理textarea的input事件，并将textarea中的文本值保存到数据属性text中
methods:{
writeText(event){
this.text=event.target.value
}
}
4.完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-on用于textarea标签</title>
</head>
<body>
<div id="app">
<textarea v-on:input="writeText" placeholder="Start writting.."></textarea>
<span>{
{text}}</span>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app=Vue.createApp({
data(){
return {
text:''
}
},
methods:{
writeText(event){
this.text=event.target.value
}
}
})
app.mount('#app')
</script>
</body>
</html>
5.运行结果
三、记录驼鹿的目击事件
1.显示一张图片，并显示一个段落元素，显示"Moose count: "以及count的值
<img src="img_moose.jpg">
<p>{
{"Moose count: " + count}}</p>
2.三个按钮，分别绑定了不同的点击事件，通过v-on指令调用addMoose方法，并传递不同的参数
<button v-on:click="addMoose(+1)">+1</button>
<button v-on:click="addMoose(+5)">+5</button>
<button v-on:click="addMoose(-1)">-1</button>
3.定义数据对象，这里包含一个名为count的属性，初始值为0
data(){
return{
count:0
}
},
4.定义方法对象，包含一个名为addMoose的方法，用于增加或减少count的值，方法接收一个参数number，根据参数的值来增加或减少count
methods:{
addMoose(number){
this.count+=number
}
}
四、想传递事件对象和另一个参数，我们可以在调用方法的地方使用一个保留名称"$event"，如下所示:使用方法传递事件对象和另一个参数
1.显示一张图片，通过v-on指令监听点击事件，并调用myMethod方法，传递事件对象和文本，显示一个段落元素，通过数据绑定显示msgAndId的值
<img
src="img_tiger.jpg"
id="tiger"
v-on:click="myMethod($event,'Hello')">
2.显示一个段落元素，通过数据绑定显示msgAndId的值
<p>{
{msgAndId}}</p>
3.定义数据对象，这里包含一个名为msgAndId的属性，初始值为空格
data(){
return{
msgAndId:' '
}
},
5.定义方法对象，包含一个名为myMethod的方法，用于处理点击事件，其中方法接收两个参数，事件对象e和文本msg，并更新数据属性msgAndId的值，拼接文本和事件目标的id
methods:{
myMethod(e,msg){
this.msgAndId=msg+','
this.msgAndId +=e.target.id
}
}
6.完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-on接收事件对象和文本</title>
</head>
<body>
<div id="app">
<img
src="img_tiger.jpg"
id="tiger"
v-on:click="myMethod($event,'Hello')">
<p>{
{msgAndId}}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue/global.js"></script>
<script>
const app=Vue.createApp({
data(){
return{
msgAndId:' '
}
},
methods:{
myMethod(e,msg){
this.msgAndId=msg+','
this.msgAndId +=e.target.id
}
}
})
app.mount('#app')
</script>
</body>
</html>
