您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

06Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象-完整($event)

发布时间：2023-04-08 18:11:33编辑：雪饮阅读（）

这次没有什么新的知识点，只有一个$event需要注意，是vue中区别于传统JavaScript事件的，传统JavaScript中通过事件绑定到一个函数中好像不用传参都是可以的，记不得太清了是jquery还是传统JavaScript，反正即便不传参，也可以通过arguments获取，或者在函数定义哪里直接能拿到形参的数据。
<template>
  <div id="app">
    <!---事件绑定的两种方法--->
     <button v-on:click="function1()">执行事件的第一种方法</button>
     <button @click="function2()">执行事件的第二种方法</button>
    <!---方法声明的另外一种方式“方法名:function”--->
     <button v-on:click="func3()">调用方法3（01）</button>
     <button @click="func3()">调用方法3（02）</button>
    <!---获取data里面的msg--->
     <button @click="getmsg()">获取data里面的msg</button>
     <!---调用方法并传参--->
     <button @click="getmsg2('11')">调用方法并传参</button>
     <!---事件传参关键词$event及获取节点data前缀数据--->
     <button @click="event1($event)" data-aid="aaaa">event</button>
     <!---一个简单的带索引的数据遍历-->
     <ul>
      <li v-for="(key,item) in list">{{key}}--{{item}}</li>
     </ul>
  </div>
</template>
 
<script>
    export default {    
      data () {
        return {
          msg:"请输入",
          list:[
            'a','b'
          ]
        }
      },
      methods:{
        function1(){
          alert("执行事件的第一种方法");
        },
        function2(){
          alert("执行事件的第二种方法");
        },
        func3:function(){
          alert("调用了方法3");
        },
        getmsg(){
          alert(this.msg);
        },
        getmsg2(param){
          alert(param);
        },
        event1(e){
          console.log("e",e);
          console.log("e.srcElement.dataset",e.srcElement.dataset);
          alert(e.srcElement.dataset.aid);
        }
      }
    }
</script>
 
<style lang="scss">
 
</style>