一、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.offsetXthis.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的值
<imgsrc="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"><imgsrc="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>
