19-0 js

const App = {
  data() {
    return {
      num: 10,
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false
        }
      ],
      carts: [],
      sum: 0,
    }
  },
  methods: {
    trigger(name) {
      console.log(name, '此事件被觸發了')
    },
    callOtherMethod() {
      this.trigger('由 callOtherMethod 觸發')
    },
    methodParameter(a, b, c, d) {
      console.log(a, b, c, d)
    },
    addToCart(product) {
      console.log(product)
      // 將收到參數資料加入購物車
      this.carts.push(product)
      // 每次加入購物車商品金額都會加總起來
      this.calculate();
    },
    // 計算總金額方法
    calculate() {
      console.log('calculate');
      let total = 0;
      this.carts.forEach(item => {
        total += item.price;
      });
      this.sum = total;
    },
    convertToAmount(price) {
      return `NT$ ${price}`;
    }
  },
  created() {
    this.trigger('由生命週期觸發');
  }
};
Vue.createApp(App).mount('#app');

19-1 methods 的觸發方法

  <!-- 在js方法建立trigger -->
  <button type="button" @click="trigger('Click Methods')">點擊觸發</button>
  
  <!-- 在js方法建立trigger，建立另一個方法呼叫trigger並帶入參數 -->
  <button type="button" @click="callOtherMethod">呼叫另一個 methods</button>

  <!-- $event產生原生DOM滑鼠事件 -->
  <button type="button" @click="methodParameter(1,2,3,$event)">參數傳入</button>

19-2 使用 methods 處理複雜資料

  <ul>
    <li v-for="product in products">
      {{ product.name }} / {{ product.price }}元 
      <!-- 從v-for裡的products資料取出product，透過addToCart方法將product參數加入購物車 -->
      <button type="button" @click="addToCart(product)">加入購物車</button>
    </li>
  </ul>
    <h6>購物車項目</h6>
  <ul>
    <!-- 從v-for裡的carts陣列資料裡讀取從點選加入購物車按鈕取得product資料，進入carts陣列並顯示在畫面上 -->
    <li v-for="item in carts">{{ item.name }}</li>
  </ul>
  總金額 {{ sum }}
  <!--filter為vue2使用，目前已移除，vue3使用methods方法取代 -->
  <h3>作為 $filter 使用（取代複雜表達式）</h3>
  <!-- {{`NTS ${sum}`}} -->
  {{convertToAmount(sum)}}

.
知識點來源:六角課程

以上是今天所提供知識點如有誤，再請務必在下面留言~