昨天有說明jQuery的簡介和範例，並嘗試用JavaScript進行改寫，今天會用有限的篇幅來說一下Vue.js是什麼。

Vue.js是什麼？

Vue.js單看名字就知道應該與JavaScript有關，確實是JavaScript的實用框架之一。該框架的主要功能是用來資料聯繫，可以將資料直接放在JavaScript的物件中，實現將資料內容直接顯示在網頁中。而資料來源可以是server中的資料、暫存網頁等不同來源。

Vue.js如何安裝？

和之前相同，最簡單的方法就是在頁面中導入Vue.js，有前輩指出相關導入建議放在網頁body的最後面，確認所有DOM已經準備完成，避免文件讀取發生錯誤狀況。相關導入語法可參考下面的HTML語法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js">
</script>

另外也可以參考這裡進行安裝。

Vue.js範例

為了演示Vue.js的功能與節省時間，這邊會直接修改某位大大寫好的網頁，改寫的原始網頁在這裡。

修改HTML結構

由於Vue.js主要功能就是要將資料帶入HTML，這邊要先準備好「位置」後續讓程式倒資料進來。可以參考以下HTML語法：

<!--未修改前-->
<div class="personal-intro">
    <p>Krista Stone</p>
    <p>Photographer Maker Doer</p>
  </div>

<!--修改為Vue.js倒入資料模式-->
<div class="personal-intro">
    <p>{{ person.name }}</p>
    <p>{{ person.title }}</p>
  </div>

修改前後的差異，在於人名和稱謂的部份，只要在資料庫中指定特定資料，後續就會透過Vue.js的程式將特定資料的名字和職稱帶入。

Vue.js語法撰寫：建置資料

這邊為了直接演示Vue.js的資料帶入功能，首先先建置資料。可以參考以下語法：

var member3 = {
  name: "John Cena", 
  title: "Professional wrestlers",
  line1: "Springfield College -Massachusetts",
  line2: "https://twitter.com/JohnCena",
  line3: "----------------------------",
  line4: "JohnCena@gmail.com",
  line5: "line id: JohnCena"
}

這邊就很簡單，先建置矩陣member3，矩陣內有姓名、職稱、第一行、第二行等內容。前面HTML出現的person.name、person.title後續若成功帶入member3的資料，網頁中就會出現John Cena、Professional wrestlers。

Vue.js語法撰寫：叫出資料

其實Vue.js的核心語法就是以下語法，相關細節會加到註解中，請參考：

const vm = Vue.createApp({      //固定寫法，使用Vue.js的程式
  data() {	//固定寫法，叫出資料的語法
    return {                  //固定寫法，資料回傳
      person: member3        
//固定寫法，回傳的資料名稱HTML中如果有{{person.矩陣內容}}這個部份，會將member3的資料倒進去。
    }
  }
vm.mount('#app');              //在id為app底下將資料到入相對應的位置

基本上一個簡單的Vue.js的程式就完成了，相關結果可以參考下圖。

重要：Vue.js的程式不能和JavaScript混用

整體來說，Vue.js的邏輯不複雜，困難點在於讀取資料的部份。如何顯示在網頁中這個部份可以透過Vue.js處理，但讀取資料的部份可能需要仰賴後端的知識或夥伴囉！

另外在Vue.js的程式中式不能帶入JavaScript的語法的，筆者在一開始改寫程式範例時有混入JavaScript，但會讓整個Vue.js呆掉或一直跳出無法辨識的錯誤。Vue.js程式的部份絕對不能和JavaScript混用。

範例參考

以下範例為今天說明內容的複雜版範例，透過選取畫面左上角的下拉式選單，使網頁中的名片自動讀出對應的資料，請參考：
https://codepen.io/hamagawa76/pen/ZEovKmg

是不是很簡單！明天就是鐵人賽的最後一天，我們明天見囉！