码农教程 - 一技在手,衣食无忧! tools

Vue 方法

❮ 上一节 下一节 ❯

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

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

Vue 方法还可以用于执行事件处理之外的其他操作。

Vue 的“方法”属性

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

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

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

提示：我们需要写this.作为前缀从方法内部引用数据属性。

当我们单击时调用“writeText”方法<div>元素我们可以编写下面的代码：

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

该示例如下所示：

示例

这个v-on指令用于<div>元素来监听“点击”事件。当“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>
亲自试一试 »

使用事件对象调用方法

当事件发生并调用方法时，事件对象默认情况下通过该方法传递。这非常方便，因为事件对象包含许多有用的数据，例如目标对象、事件类型或发生“单击”或“鼠标移动”事件时的鼠标位置。

示例

这个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更改样式属性中的背景颜色：

示例

与上面示例的区别在于，背景颜色绑定到“xPos”v-bind以便将 hsl 'hue' 值设置为等于 'xPos'。

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

在下面的示例中，事件对象携带来自<textarea>标签，使其看起来像我们在笔记本中书写。

示例

这个v-on指令用于<textarea>标签来侦听“输入”事件，每当 textarea 元素内的文本发生更改时就会发生该事件。

当“input”事件发生时，将调用“writeText”方法，并且默认情况下使用该方法发送事件对象，因此我们可以从<textarea>标签。 Vue 实例中的“text”属性由“writeText”方法更新。 span 元素设置为使用双花括号语法显示“文本”值，并且由 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>
亲自试一试 »

Vue练习

通过练习测试一下

练习:

编写缺少的代码，以便在单击 <div> 标记时调用“writeText”方法。

<div id="app">
  <p>Click on the box below:</p>
  <div =>
    {{ text }}
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: ''
      }
    },
    : {
      writeText() {
        this. = 'Hello World!'
      }
    }
  })
  app.mount('#app')
</script>

开始练习


❮ 上一节 下一节 ❯