Vue 方法

Vue 方法是属于 methods 属性下的 Vue 实例的函数。

Vue 方法非常适合与事件处理（v-on）一起使用，以完成更复杂的事情。

Vue 方法还可以用来做除事件处理之外的其他事情。

Vue 'methods' 属性

在本教程中，我们已经使用了一个 Vue 属性，即 data 属性，我们可以在其中存储值。

还有另一个名为 methods 的 Vue 属性，我们可以在其中存储属于 Vue 实例的函数。一个方法可以像这样存储在 Vue 实例中：

const app = Vue.createApp({
  data() {
    return {
      text: ''
    }
  },
  methods: {
    writeText() {
      this.text = 'Hello Wrold!'
    }
  }
})

<div v-on:click="writeText"></div>

实例

v-on 指令用于 <div> 元素，以监听 "click" 事件。当 "click" 事件发生时，将调用 "writeText" 方法并更改文本。

<div id="app">
  <p>Click on the box below:</p>
  <div v-on:click="writeText">
    {{ text }}
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: ''
      }
    },
    methods: {
      writeText() {
        this.text = 'Hello World!'
      }
    }
  })
  app.mount('#app')
</script>

使用事件对象调用方法

当事件发生从而调用方法时，默认情况下会将 事件对象 与方法一起传递。这非常方便，因为事件对象包含许多有用的数据，例如目标对象、事件类型或 'click' 或 'mousemove' 事件发生时的鼠标位置。

实例

v-on 指令在 <div> 元素上用于监听 'mousemove' 事件。当 'mousemove' 事件发生时，会调用 'mousePos' 方法，并且默认情况下会使用该方法发送事件对象，这样我们就可以获得鼠标指针的位置。

我们必须使用 this. 前缀引用方法中 Vue 实例数据属性内部的 "xPos"。

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

如果我们将上面的例子扩展一行，我们也可以根据鼠标指针在 x 方向上的位置来改变背景颜色。我们只需要添加 v-bind 来更改样式属性中的背景颜色：

实例

这里与上面的例子的不同之处在于，背景颜色通过 v-bind 绑定到 ‘xPos’，因此 hsl 'hue' 值设置为等于 'xPos'。

<div
  v-on:mousemove="mousePos"
  v-bind:style="{backgroundColor:'hsl('+xPos+',80%,80%)'}">
</div>

在下面的实例中，事件对象携带 <textarea> 标记中的文本，使其看起来像是在笔记本中书写。

实例

v-on 指令用于 <textarea> 标记以监听 'input' 事件，只要 textarea 元素内的文本发生更改，就会发生该事件。

当 ‘input’ 事件发生时，会调用 ‘writeText’ 方法，并且默认情况下会使用该方法发送事件对象，因此我们可以从 <textarea> 标记中获取文本。Vue 实例中的 'text' 属性由 'writeText' 方法更新。span 元素设置为使用双大括号语法显示 'text' 值，Vue 会自动更新该值。

<div id="app">
  <textarea v-on:input="writeText" placeholder="Start writing.."></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>

传递参数

有时，当事件发生时，我们希望通过方法传递参数。

比方说，你是一名护林员，你想记录麋鹿的目击事件。有时会看到一两只驼鹿，有时一天可能会看到 10 只以上的驼鹿。我们添加了计数 '+1' 和 '+5' 的按钮，并添加了一个 '-1' 按钮以防计数过多。

在这种情况下，我们可以对所有三个按钮使用相同的方法，只需从不同的按钮中使用不同的数字作为参数来调用该方法。这就是我们如何调用带有参数的方法：

<button v-on:click="addMoose(5)">+5</button>

这就是 "addMoose" 方法的样子：

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

让我们在一个完整的实例中看看如何通过方法传递参数。

实例

<div id="app">
  <img src="img_moose.jpg">
  <p>{{ "Moose count: " + count }}</p>
  <button v-on:click="addMoose(+1)">+1</button>
  <button v-on:click="addMoose(+5)">+5</button>
  <button v-on:click="addMoose(-1)">-1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      addMoose(number) {
        this.count+=number
      }
    }
  })
 app.mount('#app')
</script>

传递参数和事件对象

如果我们想同时传递事件对象和另一个参数，那么在调用方法的地方可以使用保留名称 $event，如下所示：

<button v-on:click="addAnimal($event, 5)">+5</button>

Vue 实例中的方法是这样的：

methods: {
  addAnimal(e, number) {
    if(e.target.parentElement.id==="tigers"){
      this.tigers = this.tigers + number
    }
  }
}

现在让我们看一个例子，看看如何用方法传递事件对象和另一个参数。

实例

在本例中，我们的方法同时接收事件对象和文本。

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

较大的实例

在这个例子中，我们看到可以只使用一种方法来计数三只不同的动物，每只动物有三个不同的增量。我们通过传递事件对象和增量来实现这一点：

实例

单击按钮时，增量大小和事件对象都作为参数与方法一起传递。保留字 $event 用于传递带有方法的事件对象，以告知要计数的动物。

<div id="app">
  <div id="tigers">
    <img src="img_tiger.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,1)">-1</button>
  </div>
  <div id="moose">
    <img src="img_moose.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,1)">-1</button>
  </div>
  <div id="kangaroos">
    <img src="img_kangaroo.jpg">
    <button v-on:click="addAnimal($event,1)">+1</button>
    <button v-on:click="addAnimal($event,5)">+5</button>
    <button v-on:click="addAnimal($event,1)">-1</button>
  </div>
  <ul>
    <li>Tigers: {{ tigers }} </li>
    <li>Moose: {{ moose }} </li>
    <li>Kangaroos: {{ kangaroos }} </li>
  </ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        tigers: 0,
        moose: 0,
        kangaroos: 0
      }
    },
    methods: {
      addAnimal(e,number) {
        if(e.target.parentElement.id==="tigers") {
          this.tigers+=number
        }
        else if(e.target.parentElement.id==="moose") {
          this.moose+=number
        }
        else {
          this.kangaroos+=number
        }
      }
    }
  })
 app.mount('#app')
</script>