Vue指令v-on

原创已于 2025-06-22 21:24:05 修改 · 625 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #经验分享

于 2025-02-03 21:04:38 首次发布

Vue2.x 专栏收录该内容

23 篇文章

订阅专栏

一、Vue中的v-on指令是什么？

v-on指令的作用是：为元素绑定事件。

二、v-on指令的简写

“v-on：“指令可以简写为”@”

三、v-on指令的使用

1、v-on指令绑定的方法定义在methods属性中。
2、v-on指令绑定的方法内部通过this关键字可以访问定义在data中数据。
案例代码执行如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="appid">
    <p>1、事件绑定</p>
    <input type="button" value="鼠标点击事件绑定" v-on:click="dolt"> 
    <input type="button" value="鼠标移入事件绑定" v-on:mouseenter="dolt"> 
    <input type="button" value="鼠标双击事件绑定" v-on:dblclick="dolt"> 
    <br>
    <p>2、事件绑定（ "v-on:"指令简写为"@"）</p>
    <input type="button" value="鼠标点击事件绑定" @click="dolt"> 
    <input type="button" value="鼠标移入事件绑定" @mouseenter="dolt"> 
    <input type="button" value="鼠标双击事件绑定" @dblclick="dolt"> 
    <p>3、v-on指令绑定的方法定义在methods属性中，且方法内部可通过this关键字访问定义在data中数据。</p>
    <input type="button" value="火影忍者" @click="change">
    <h3 @click="change">{{school}}</h3>
  </div>
  <script>
    var app = new Vue({
      el: '#appid',
      data: {
        school: "火影忍者",
      },
      methods:{
        dolt:function(){
          alert("慕斯");
        },
        change:function(){
          console.log(this.school);
          this.school+="很好看!"
        }
      }
    })
  </script>
</body>
</html>