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>