指令v-on 语法

Vue指令v-on语法详解

最新推荐文章于 2025-04-16 23:15:25 发布

原创最新推荐文章于 2025-04-16 23:15:25 发布 · 550 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端全栈开发同时被 2 个专栏收录

207 篇文章

订阅专栏

VUE

55 篇文章

订阅专栏

指令v-on 语法内联语句

v-on指令用于监听DOM事件，并在事件触发时执行相应的方法。它的语法可以采用内联语句或者指定一个方法名。

内联语句的语法如下： v-on:事件名="JavaScript 语句"

其中，事件名可以是DOM事件（比如click、mouseover、keydown等），也可以是自定义事件。

在内联语句中，可以直接写JavaScript代码，它会在事件触发时执行。

下面是一个示例，展示了v-on的内联语句语法和用法：

<template>
  <button v-on:click="sayHello">点击我</button>
</template>

<script>
export default {
  methods: {
    sayHello: function() {
      alert('Hello World!');
    }
  }
}
</script>

在上面的例子中，当点击按钮时，会弹出一个提示框显示"Hello World!"。

你也可以在内联语句中使用JavaScript表达式，例如：

<template>
  <button v-on:mouseover="counter++">鼠标移入</button>
  <p>计数器的值：{{ counter }}</p>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  }
}
</script>

在这个例子中，当鼠标移入按钮时，计数器的值会加1，并且通过插值语法将计数器的值显示在页面上。

总结一下，v-on指令的内联语句语法允许你在事件触发时直接写JavaScript代码，并且可以使用Vue实例的方法和数据。

指令v-on 语法 methods处理函数

指令v-on用于绑定事件监听器，作为一种语法糖，简化了添加事件监听器的过程。它的语法如下：

v-on:事件类型="方法名"

其中，事件类型是指要监听的事件，例如click、mouseenter等，方法名是指在Vue实例中定义的一个方法。

在Vue实例中，可以使用methods属性来定义这些方法。它的语法如下：

methods: {
  方法名: function() {
    // 方法的实现逻辑
  }
}

这样，当事件触发时，Vue会自动调用相应的方法。

下面是一个完整的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>v-on 方法处理函数</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <button v-on:click="sayHello">Click me</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      methods: {
        sayHello: function() {
          alert('Hello!')
        }
      }
    })
  </script>
</body>
</html>

在这个例子中，我们定义了一个按钮，并使用v-on:click将click事件绑定到sayHello方法上。当按钮被点击时，sayHello方法会被调用，弹出一个对话框显示“Hello!”。