Vue事件 定义/执行方法 获取/改变数据 执行方法传值 以及事件对象

下面，我练习的这串代码中对理解Vue事件、定义/执行方法、获取/改变数据，和执行方法传值以及事件对象，有一定的帮助。

<template>

<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
  <div id="app">
    <h3>{{msg}}</h3> <!-- 绑定业务逻辑里的数据-->
    <br>
<!-- 
  <img v-bind:src="url"/>
  <img :src="url" />

 -->
    <button v-on:click="run1()">执行方法的第一种写法</button>
    <br>
    <br>

    <button @click="run2()">执行方法的第二种写法</button>
    <br>
    <br>
    <!--上述为执行方法的两种方式-->

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

    <button @click="setMsg()">改变data里面的msg</button>
    <br>
    <br>
  
    <button @click="requestDate()">请求数据</button>  <!--定义request方法-->
    <br>
    <br>
    <ul>
      <li v-for="(item,key) in list">
        {{key}}---{{item}}          <!-- 将数值进行显示-->
      </li>
    </ul>
    <br>
    <br>

    <button @click="deleteDate('123')">执行方法传值123</button>
    <br>
    <br>
    <button @click="deleteDate('456')">执行方法传值456</button>
    <br>
    <br>
    <button @click="eventFn($event)">事件对象</button>

  </div>
</template>
 
<script>

export default { // 表示将组件暴露出去
  // name: 'App',  给组件起个名字，可以删除
  data () {   //业务逻辑里定义的数据 
    return {
      msg: '这里是个vue',  //  msg: "这里是vue" 这里单引号和双引号是一样的结果
      list:[],   // list 中存放了push进来的值
    }
  },
  methods:{   //这里是放方法的地方
    run1:function(){
      alert('显示第一个方法');//  run1 的方法
    },
    run2(){
      alert('显示第二个方法');//  run2 的方法
    },
    getMsg(){
      alert (this.msg);
    },
    setMsg(){
      this.msg='这是改变后的数据';
    },  
    requestDate(){                   //编写requestDate的方法
      for(var i=0;i<10;i++){        
         this.list.push('这是第'+i+'条数据');  //将数据push进list中
      }
    },
    deleteDate(a){
      alert(a);
    },
    eventFn(e){
      console.log(e);
    }
  }
}
</script>

<style>

</style>

运行效果如下（部分效果没有完全显示）

点击请求数据会一直往后添加数据，因为该方法是一直往list中push数据

右边的截图是点击事件对象所产生的对象。

若想查看完整的效果，可以复制上述代码。若有任何疑问或是不解，请在下方评论，谢谢。