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>