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)函式做处理，处理完之後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参数，就可以看到里面所有的事件。