Vue Methods 方法的使用（VUE学习5）

发布时间：2023年12月31日

一、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>

文章来源:https://blog.csdn.net/b312738566/article/details/135264419
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章