Vue事件 定義方法執行方法 獲取數據 改變數據 執行方法傳值 以及事件對象

<template>


  <div id="app">  
    
<!-- 
      <img v-bind:src='url' />

      <img :src='url' /> -->

      {{msg}}
    <br>
    <br>
    <br>


      <button v-on:click="run1()">執行方法的第一種寫法</button>
      <br><br><br>

      <button @click="run2()">執行方法的第二種寫法</button>

      <br>
      <br>
      <br>
     
      <button @click="getMsg()">獲取data裏面的msg</button>


      <br>
      <br>
      <br>
      
      <button @click="setMsg()">改變data裏面的msg</button>


      <br>
      <br>
      <br>
      
      <button @click="requestData()">請求數據</button>

      <hr>

      <ul>

        <li v-for="(item,key) in list">
          {{key}}---   {{item}}
        </li>
      </ul>

      <br>
      <br>
      <br>
      <button @click="deleteData('111')">執行方法傳值111</button>

      <br>
      <br>
      <button @click="deleteData('222')">執行方法傳值2222</button>
      <br>
      <br>
      <br>
      <button data-aid='123' @click="eventFn($event)">事件對象</button>      

  </div>
</template>

<script>



    export default {     
      data () { 
        return {
          msg: '你好vue',
          list:[]      
        }
      },
      methods:{

        run1:function(){

          alert('這是一個方法');

        },

        run2(){
          alert('這是另外一個方法');
        },
        getMsg(){
            alert(this.msg);
        },
        setMsg(){

          this.msg="我是改變後的數據"
        },
        requestData(){

            for(var i=0;i<10;i++){

              this.list.push('我是第'+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 lang="scss">



</style>