methods 方法

在Vue裡面methods是以物件來定義，內層都是函式，以下幾種來示範methods的觸發方式：

使用事件觸發：

<div id='app'>
  <h3>使用事件觸發：</h3>
  <button @click="clickEvent">點擊事件</button>
</div>

const App = {
  data() {
    return {
    }
  },
  methods: {
    clickEvent(){
      console.log('點擊事件觸發')
    }
  }
};
Vue.createApp(App).mount('#app')

使用其他函式觸發：

<div id='app'>
  <h3>事件觸發：</h3>
  <button @click="clickEvent('isClickEvent')">點擊事件</button>
  <h3>函式觸發：</h3>
  <button @click="callClick">其他函式觸發</button>
</div>

const App = {
  data() {
    return {
    }
  },
  methods: {
    clickEvent(name){
      console.log(name,'點擊觸發')
    },
    callClick(){
      this.clickEvent('callClick');
    }
  }
};
Vue.createApp(App).mount('#app')

生命週期觸發：

<div id='app'>
  <h3>事件觸發：</h3>
  <button @click="clickEvent('isClickEvent')">點擊事件</button>
  <h3>函式觸發：</h3>
  <button @click="callClick">其他函式觸發</button>
</div>

const App = {
  data() {
    return {
    }
  },
  methods: {
    clickEvent(name){
      console.log(name,'事件觸發')
    },
    callClick(){
      this.clickEvent('callClick');
    }
  },
  created() {
    this.clickEvent('生命週期觸發');
  }
};
Vue.createApp(App).mount('#app')

生命週期之後會寫一篇文章，和大家一起認識。

使用methods完成簡單購物車

<div id='app'>
<!--   <h3>事件觸發：</h3>
  <button @click="clickEvent('isClickEvent')">點擊事件</button>
  <h3>函式觸發：</h3>
  <button @click="callClick">其他函式觸發</button> -->
  <h3>商品列表</h3>
  <ul>
    <li v-for="item in products" :key="item.name">
      {{ item.name }} - {{ item.price }}
      <button @click="addCart(item)">加入購物車</button>
    </li>
  </ul>
  <br>
  <h3>購物車列表</h3>
  <ul>
    <li v-for="product in carts" :key="product.name">
        {{ product.name }}
    </li>
  </ul>
  <h3>總金額：</h3>
  {{ sum }}
</div>

const App = {
  data() {
    return {
    products: [
            {
                name: '上衣',
                price: 300,            
            },
            {
                name: '褲子',
                price: 500,            
            },
            {
                name: '鞋子',
                price: 1500,           
            },
            {
                name: '帽子',
                price: 600,
            },
            ],
    carts: [],
    sum: 0,
    }
  },
  methods: {
    addCart(add) {
      this.carts.push(add);
      this.total();
    },
    total() {
      let total = 0;
      this.carts.forEach(item => {
        console.log(item.price);
        total += item.price;
      });
      this.sum = total;
    }
  }
};
Vue.createApp(App).mount('#app')

觸發加入購物車時，會將商品列表v-for裡的item傳入addCart(item)當參數，傳回到methods的addCart(add)函式做處理，處理完之後push到this.carts，達到購物車列表的渲染。

methods底下的函式，建議都不要用箭頭函式，拿上面範例來修改：

methods: {
    addCart:(add) => {
      console.log(this) //變成全域 window
      this.carts.push(add);
      this.total();
    },
    total:() => {
      let total = 0;
      this.carts.forEach(item => {
        console.log(item.price);
        total += item.price;
      });
      this.sum = total;
    }
  }

指向會變成全域，造成指向錯誤。如果想要使用事件物件 (Event Object)，可以在@click="add(a,b,c,$event)"裡面，增加$event參數，就可以看到裡面所有的事件。

參考資料

六角學院
重新認識 Vue.js
Vue.js