文組也能看得懂的網頁前端Vue  (三)變數篇

簡單介紹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>裡面

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

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

OK讓我們來增加變數吧!

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)繼續介紹用途