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

一、v-on 指令用于

元素来侦听"mousemove"事件。 当"mousemove"事件发生时，会调用"mousePos"方法，并且默认使用该方法发送事件对象，这样我们就可以获得鼠标指针的位置

1.VUE页面框架

2.设置页面标题

3.将Vue应用程序挂载到具有id="app"的div元素上

4.显示一段提示文本，告诉用户在下面的方框上移动鼠标指针

Move the mouse pointer over the box below:

5.包含一个div元素，使用v-on指令监听mousemove事件，并执行mousePos方法

6.引入 Vue.js 3 的全局脚本

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.完整代码：

    


    

        
Move the mouse pointer over the box below:
        

    
    

    

二、v-on 指令用于 标签，以侦听"input"事件，每当 textarea 元素内的文本发生更改时就会发生该事件，当"input"事件发生时，将调用"writeText"方法，并且默认使用该方法发送事件对象，以便我们可以从 <textarea> 标签获取文本。 </h2> <h3>1.显示一个textarea标签，使用v-on指令监听input事件，并执行writeText方法，并显示一个span元素，显示用户在textarea中输入的文本</h3> <pre><code class="language-html"><textarea v-on:input="writeText" placeholder="Start writting.."> {{text}}

2.定义数据对象，这里包含一个名为text的属性，初始值为空字符串

data() {
                return {
                    text: ''
                }
            },

3.定义方法对象，包含一个名为writeText的方法，用于处理textarea的input事件，并将textarea中的文本值保存到数据属性text中

methods:{
         writeText(event){
         this.text=event.target.value
       }
   }

4.完整代码：

    


    

        
        {{text}}
    
    
    

5.运行结果

三、记录驼鹿的目击事件

1.显示一张图片，并显示一个段落元素，显示"Moose count: "以及count的值

{{"Moose count: " + count}}

2.三个按钮，分别绑定了不同的点击事件，通过v-on指令调用addMoose方法，并传递不同的参数

+1
+5
-1

3.定义数据对象，这里包含一个名为count的属性，初始值为0

data(){
                return{
                    count:0
                }
            },

4.定义方法对象，包含一个名为addMoose的方法，用于增加或减少count的值，方法接收一个参数number，根据参数的值来增加或减少count

methods:{
                addMoose(number){
                    this.count+=number
                }
            }

四、想传递事件对象和另一个参数，我们可以在调用方法的地方使用一个保留名称"$event"，如下所示:使用方法传递事件对象和另一个参数

1.显示一张图片，通过v-on指令监听点击事件，并调用myMethod方法，传递事件对象和文本，显示一个段落元素，通过数据绑定显示msgAndId的值

2.显示一个段落元素，通过数据绑定显示msgAndId的值

{{msgAndId}}

3.定义数据对象，这里包含一个名为msgAndId的属性，初始值为空格

            data(){
                return{
                    msgAndId:' '
                }
            },

5.定义方法对象，包含一个名为myMethod的方法，用于处理点击事件，其中方法接收两个参数，事件对象e和文本msg，并更新数据属性msgAndId的值，拼接文本和事件目标的id

            methods:{
                myMethod(e,msg){
                    this.msgAndId=msg+','
                    this.msgAndId +=e.target.id
                }
            }

6.完整代码：

    


    

        
        
{{msgAndId}}