Vue学习第5天（事件监听）

布满荆棘的人生 2022-12-18 00:50 152阅读 0赞

# 01：v-on的基本使用 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
       <h2>{
       {message}}</h2>
      
      <button @click="add()">+</button>
      <button @click="subs()">-</button>
      
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          message: 0,
         },
        methods:{
          add(){
            this.message++;
          },
          subs(){
            this.message--;
          }
        }
      })
    </script>
    </body>
    </html>

02：@click 传参  ，当传递多个参数，一个需要传递生成的对象参数  $event

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <h2>{
       {message}}</h2>
      
      
      
      <button @click="add">+</button>
      <button @click="subs()">-</button>
    
      
      <button @click="onSubClick">传递本身的参数</button>
      
      <button @click="onSubClick2('aaa',$event,underNum)">传递一个值和一个对象的按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue ({
        el : '#app',
        data: {
          message: 0,
          underNum: '我是下面的数字'
        },
        methods:{
          add(){
            this.message++;
          },
          subs(){
            this.message--;
          },
          onSubClick(abc){
            console.log(abc);
            console.log("===============");
          },
          onSubClick2(num,event,underNum){
            console.log("num>>"+num);
            console.log(event);
            console.log("underNum>>"+underNum);
          }
    
        }
      })
    </script>
    </body>
    </html>