Vue学习5----Vue点击事件，方法，获取数据，改变数据，事件对象及自定义属性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88942198

效果图：

源码（复制即可运行）
App.vue

<!--06Vue点击事件，方法，获取数据，改变数据，事件对象及自定义属性-->
<template>
  <!--渲染-->
  <div id="app">
    <div>{{this.msg}}</div>
    <button v-on:click="imethod1()">点击事件写法1</button>
    <br/>
    <button @click="imethod1()">点击事件写法2</button>
    <br/>
    <button @click="imethod2()">获取data中的数据</button>
    <br/>
    <button @click="setMsg()">改变data中msg的值</button>
    <br/>
    <button @click="liebiao()">点击渲染列表</button>
    <br/>
    <button @click="chuancan('zhh')">带参数的方法</button>
    <br/>
    <button data-aid='123' @click="eventFn($event)">事件对象</button>
    <br/>
    <!--循环一个列表-->
    <ul>
      <li v-for="(item,key) in list">
        {{key}}---   {{item}}
      </li>
    </ul>


  </div>
</template>

<script>
export default {
  name: 'app',
  //数据
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list:[],
    }
  },
  //方法
  methods:{
    imethod1(){
      alert('点击事件1');
    },
    imethod2(){
    //  获取数据
      alert(this.msg);
    },
    setMsg(){
      //数据改变，会自动刷新
      this.msg = '修改后的值';
    },
    liebiao(){
      //数据改变会自动刷新
      for (let i=0;i<10;i++){
        this.list.push("我是数据"+i);

      }
    },
    chuancan(val){
      alert("拿到的参数"+val);

    },
    eventFn(event){
      //事件对象
      console.log(event);
      //获取dom节点
      console.log(event.srcElement);
      //获取自定义的属性,data-aid的值
      console.log(event.srcElement.dataset.aid);
    }
  }
}
</script>

<style lang="scss">

</style>

源码下载：