vue2.* 事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象 05

<template>
  <div id="app">
    <button v-on:click="run1()">执行事件的第一种写法</button>
    <button @click="run2()">执行事件的第二种写法</button>
    <br>
    <br>
    <br>
    <button @click="rdata()">请求数据</button>
    <ul>
        <li v-for="(item,key) in list">
            {{key}}---{{item}}
        </li>
    </ul>
    <br>
    <br>
    <br>
    <button @click="deldata('111')">删除数据</button>
    <br>
    <br>
    <br>
    <button data-aid='123' @click="edata($event)">事件对象</button>

  </div>
</template>

<script>
export default {
  data () {/*业务逻辑里面定义的数据*/
    return {
        msg:'你好',
        list:[]
    }
  },
  methods:{/*方法*/
    run1:function(){
        alert('执行事件的第一种写法');
    },
    //下面是es6方法的写法
    run2(){
        alert('执行事件的第二种写法');
    },
    rdata(){
        for(var i=0;i<10;i++){
            this.list.push('我是第'+i+'条数据')
        }
    },
    deldata(val){
        alert(val)
    },
    edata(e){
        console.log(e)
        //e.srcElement  dom节点
        e.srcElement.style.color = 'red'
        console.log(e.srcElement.dataset.aid); /*获取自定义属性的值*/
        //alert(e.screenX);
    }
  }
}
</script>

<style>

</style>