簡單介紹Vue的變數使用方式
在開始正式寫網頁之前，先來講解一下“變數”這東西。
大家應該知道程式跟數學有極大的相關，所以其實程式上的”變數“可以想像成數學上的變數一樣，也就是大概在國中數學看過的 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>
稍微簡單解釋一下這隻程式碼，
上面可以看到程式碼幾乎都是用<xxxx>跟</xxxx>包起來的一個一個區間，
而這個<>通常稱為標籤（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）繼續介紹用途
