【vue】事件-定義方法-執行方法-獲取數據-改變數據-執行方法傳值-事件對象

觸發事件的兩種方式：
第一種方式，用v-on:click綁定。

<button v-on:click="run1()">

第二種方式，用@click=" "綁定。

<button @click="run1()"

注意，用@的方式的話，如果不給函數傳參數，小括號可以省略不寫。

click觸發的事件實際上是一個函數。函數定義在export default 的 methods中。
ES6支持直接對函數進行定義。

    export default {
        data() {
          return{
            msg:'vthzz'
          }

        },
      methods:{
          niub(val){ # 如果帶參數，就這麼寫  不帶參數，不寫val即可。
            this.msg = 'vthnb';
            val.srcElement.hidden = 'hidden';
          }
      }
    }

在函數中獲取data域中的值，要用this.來引用。
怎麼改變數據呢？ 在data中的值，在methods中被改變，就成功的改變了數據。
現在直接上事件對象的代碼。$event就代表了事件對象。

<template>
  <div id="app">
    {{msg}}
    <button type="button" @click="niub($event)">變牛逼</button>
  </div>
</template>

<script>

    export default {
        data() {
          return{
            msg:'vthzz'
          }

        },
      methods:{
          niub(val){
            this.msg = 'vthnb';
            val.srcElement.hidden = 'hidden';
            //最後這個.hidden ，是當前點擊的這個按鈕的屬性
          }
      }
    }
</script>

<style>
</style>