Y.J. Work

---

上一篇介紹了變數的用法，接下來談談函式的用法，函式簡單來說可以想成功能的實現，讓原本不會動的頁面動起來，下面直接來說說函式的寫法，以及一些簡單的操作

---

Vue的函式跟變數一樣都是要寫在<Script>裡面，打開專案裡的App.vue可以看到在<script>裡面有一塊methods的區間，如下

methods: {
    startHacking() {
      this.$notify({
        title: "It works!",
        type: "success",
        message:
          "We've laid the ground work for you. It's time for you to build something epic!",
        duration: 5000
      });
    }
  }

這塊區間就是宣告函式的地方，其中 startHacking 這個是函式的名稱，( )表示前面的startHacking是一個函式，( )內可以放一些宣告一些變數讓數值傳入，{ }內為函式內要做的事情。這樣講可能很模糊，就讓我們實際操作一遍吧。

目標為：按一個按鈕讓上一篇的文字改變。

首先我們先將網頁上一些不要的東西去掉，然後新增一個按鈕

<template>
  <div id="app">
    <div>{{this.para}}</div>
    <el-button>按鈕</el-button> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      para: "原本的文字" //字串格式記得要用“”括起來
    };
  },
  methods: {}
};
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>

接下來新增一個函式，就叫做clickEvent吧

<script>
export default {
  data() {
    return {
      para: "原本的文字" //字串格式記得要用“”括起來
    };
  },
  methods: {
    clickEvent(){
      
    }
  }
};
</script>

至於函式內容，這邊要將para這個變數內的文字改變，在程式裡將變數給予值大部分是用 ＝ 的符號，所以將para給予一個值的寫法為

this.para = "這是改變後的文字"; //在javascript裡面，一段程式碼（句子）結束的時候需要加一個分號表示結束

接著我們把這段語法寫進clickEvent裡面

methods: {
    clickEvent(){
      this.para = "這是改變後的文字";
    }
  }

接下來我們需要一個開關去呼叫剛剛寫的函式起來動作，在Vue裡面監聽按下按鈕的動作寫法很簡單，只要在<el-button>裡面加上一個 @click=函式名稱 即可

<template>
  <div id="app">
    <div>{{this.para}}</div>
    <el-button @click=clickEvent()>按鈕</el-button>
  </div>
</template>

存擋後回到瀏覽器的 http://localhost:8010

可以看到畫面長這樣

按一下按鈕後，文字會改變

這樣就完成一個簡單的函式操作，接下來嘗試數字的操做。

目標：計算總共按了幾次按鈕。

稍微改一下顯示的畫面

<template>
  <div id="app">
    <div>總共按了{{this.para}}次</div>
    <el-button @click="clickEvent()">按鈕</el-button>
  </div>
</template>

修改一下變數的內容，改為數字0

data() {
    return {
      para:  0 //數字格式不用“”括起來
    };
  },

接下來再修改函式內容，讓變數經過一次函數動作就加1

methods: {
    clickEvent() {
      this.para = this.para + 1;
    }
  }

或者也可以寫成比較簡易的寫法，兩者結果是一樣的

methods: {
    clickEvent() {
      this.para += 1;
    }
  }

存擋後回到瀏覽器 http://localhost:8010 就可以操作剛剛寫的功能了

 簡單的函式應用大概就講到這，下一篇預計會分享一些element-ui的簡單套件使用和一些比這篇複雜一點點的函式操作