vue比较完整的方法介绍 和获取事件对象

<template>
  <div id="app">
    {{msg}}
    <!--完整方法写法-->
    <button v-on:click="run()">one</button>
    <!--缩写-->
    <button @click="run1()">two</button>
    <!--获取值的方法-->
    <button @click="getMsg()">three</button>
    <!--修改值的方法-->
    <button @click="setMsg()">4</button>
    <br>
    <!--请求数据的方法  请求数据并给下方的ul li 中的list追加元素-->
    <button @click="requestData()">请求数据</button>
    <hr>
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
    <br>
    <!--删除方法用来检测传值-->
    <button @click="deleteData('1111')">删除数据</button>
    <hr>
    <br>
    <!--事件对象-->
    <button data-aid="123" @click="eventFn($event)">事件对象</button>
    <hr>
  </div>

</template>

<script>
  export default{
    // 数据存放位置
    data() {
      return{
        // 数据
        msg:"你好VUE",
        list:[],
      }
    },
    // 自定义方法   方法写的位置
    methods:{
      // 获取输入框值    获取方法
      run:function(){
        // 方法里面获取data里面的数据
        alert(this.msg)
      },
      run1(){
        // 方法里面获取data里面的数据
        alert(this.msg)
      },
      getMsg(){
        // 获取data也就是输出框中的数据
        alert(this.msg);
      },
      setMsg(){
        // 修改data也就是输出框中的数据
        this.msg = "我是你爸爸";
      },
      requestData(){
        // 修改data也就是输出框中的数据
        for (var i = 0;i<10;i++) {
          this.list.push("我是第"+i+"个") ;
          // this.list+="我是第"+i+"个";
        }
      },
      deleteData(val){
        // 用来检测传值
       alert(val);
      },
      // 事件对象
      eventFn(e){
        // 输出对象
       console.log(e);
        // e.srcElement  dom节点
        e.srcElement.style.background='red';
    
        console.log(e.srcElement.dataset.aid); //获取自定义属性的值
      }
    }
  }
</script>

<style>

</style>