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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。