在開始正式寫網頁之前，先來講解一下“變數”這東西。

大家應該知道程式跟數學有極大的相關，所以其實程式上的”變數“可以想像成數學上的變數一樣，也就是大概在國中數學看過的 x = 1 這種算式中的 x，只是在程式上普遍因為可讀性的關係（就是可以讓大家都看得懂），比較少會寫x,y之類的，大部分會寫像是：

animal = "dog";

housenumber = 123;

而變數在前端畫面比較常使用的有：

字串, 整數, 浮點數（也就是小數）, 矩陣 （也就是集合）

大概這四種，當然還有其他的一堆，這些就等到使用到的時候再學習吧，變數簡介大概就到這。

開始寫網頁吧！

首先用VSCode開啟之前下載的專案，

開啟終端機（Command+J 或是 Ctrl+J)

在開啟Chrome輸入localhost:8010

直接將網頁跑起來，這樣方便邊做邊看到成果，也可以馬上發現有沒有地方寫錯。

然後點選左邊的App.vue，

這時右邊區塊會顯示App.vue這隻的程式碼

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>

<script>
export default {
  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
      });
    }
  }
};
</script>

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

稍微簡單解釋一下這隻程式碼，

上面可以看到程式碼幾乎都是用跟包起來的一個一個區間，

而這個<>通常稱為標籤（tag）來表示這個區塊的功能：

<template>：通常稱為模板，先記得Vue中網頁顯示的畫面都寫在這裡就好，可以想像成一個居家空間。

<div>：稱為區塊，用於將整個畫面區分，可以想像成一個一個房間。

<img>：這個是網頁圖片，只要指定圖片的連結（src=）就可以顯示圖片在頁面上，可以想像成家裏牆壁貼的海報。

<el-button>：這是element-ui按鈕的特殊寫法，tag包起來的字會顯示在按鈕上面，用於觸發事件，可以想像成家裡各個開關。（element-ui是這專案使用的套件，在一開始npm install 的時候安裝進來的。看不懂這段？沒關係，也不重要，反正就是個按鈕）

<script>：這是用來寫Javascript的區塊，控制網頁動作的程式碼都寫在這邊，可以想像成居家的設計圖。

<style>：這是用來寫css的區塊，控制網頁元件大小、顏色、字型可以寫在這，可以想像成家中的配色。

介紹完tag後，開始來增加一點頁面元素，首先來打個招呼吧

我們先在

<img src="./assets/logo.png" />

上面增加一個<div></div>的tag，

然後再中間打上 “Hello 我的第一個網頁”

<template>
  <div id="app">
    <div>Hello 我的第一個網頁</div>
    <img src="./assets/logo.png" />
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>

按下存擋後（Command+S 或是 Ctrl+S）

等待下方終端機跑出

webpack: Compiled successfully.

打開chrome的 http://localhost:8010 頁面

應該會發現頁面改變了

如何？很簡單吧

那如果想要有三行 “Hello 我的第一個網頁”呢？

直覺的想法應該就是

<template>
  <div id="app">
    <div>Hello 我的第一個網頁</div>
    <div>Hello 我的第一個網頁</div>
    <div>Hello 我的第一個網頁</div>
    <img src="./assets/logo.png" />
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>

但是如果改天想要改變裡面的文字，這樣就必須要重複改三遍，或許覺得改三遍其實很快，但如果五十遍、一百變呢？

這時候變數的好處就出來了

在開始寫變數之前先記得幾點事項

第一點：變數需要宣告在<script>裡面

第二點：變數需要先給定一個值

第三點：變數名稱不能重複

ＯＫ讓我們來增加變數吧！

Vue的變數寫法很簡單

只要在export default 底下宣告就好

<script>
export default {
  data() {
    return {
      para: "我是變數喔", //字串格式記得要用""括起來
      para2: "我是第二個變數喔"
    };
  },
.........
</script>

宣告完後就可以使用變數在網頁顯示的地方了。

顯示的方式也很簡單

在想要顯示的地方打上 {{this.變數名稱}} 就可以了，這邊的 this 可以先想成“這一個頁面”的意思，所以比如說 this.para 翻譯一下就是 => 這一個頁面的叫para變數

接下來修改一下上面的顯示文字的地方

<template>
  <div id="app">
    <div>{{this.para}}</div>
    <div>{{this.para}}</div>
    <div>{{this.para2}}</div>
    <img src="./assets/logo.png" />
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>

存擋後，頁面就會顯示成

這樣以後要修改文字就只要修改一次變數的部分，就不必複製貼上好幾次了。

當然，變數的用途不只這些

接下來會在"函式“（Function）繼續介紹用途