iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
自我挑戰組

Vue.js 從零開始系列 第 15

Vue.js 從零開始:methods

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)函式做處理,處理完之後pushthis.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


上一篇
Vue.js 從零開始:v-for
下一篇
Vue.js 從零開始:computed
系列文
Vue.js 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言