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>