專案準備
為了demo方便，這邊調整先前建立的專案，將左側選單加入本次data的選項，並將demo程式碼顯示在右側router-view中。新增views
src/views資料夾，新增DataDemo.vue。
調整router
src/router/index.js，將routers調整，加入DataDemo.vue的路徑。
調整Layout
src/Layout.vue，變更router-link連結，指向DataDemo。
存檔後執行，點選左側選單的data，可以看到DataDemo的畫面，接下來將在DataDemo.vue裡面寫進data的demo程式並呈現在畫面上。
data語法
data屬性寫在vue檔案中script區塊內的export default { }中，讓設定完的資料匯出做使用。開啟src/views/DataDemo.vue，加入<script/>區塊以及export default {};，並在export default中加入data function。
data() {
return {
message: "Hello Vue",
};
},export default中的程式碼，建立了一個data物件，data物件會return一個名稱為message，值為"Hello Vue"的屬性。
接著將message綁定在template中，讓畫面呈現message的值。
<h2>message的值為 : {{ message }}</h2>中以{{ }}來綁定data中message的值。
存檔執行後，即可看到"Hello Vue"。
v-model 雙向綁定
利用v-model將data中的資料與畫面做雙向綁定。
當資料中的值變更時，呈現的值也會跟著做變動。src/views/DataDemo.vue的template中加入:<input type="text" v-model="message" />。
v-model="message" 將message屬性與input中的值做結合，所以當input把message的值做變更時，整個畫面所渲染的message值也會跟著變動。
執行後，input標籤會先綁定message的值"Hello Vue"，接著當input變動，可以看到上方的值也會跟著改變。
data: List[ ]
data中的值也可以用list陣列來顯示。src/views/DataDemo.vue的data()中，加入checked屬性，值為空陣列[ ]。
src/views/DataDemo.vue的template中，加入五個checkbox，value為"選項一"~"選項五"，並以v-model綁定checked屬性的值。
並在下方增加<h3>選擇了 : {{ checked }}</h3>用來顯示被選取的checked值。
執行後，勾選選項，可以看到checked陣列增加了被勾選的值。
引入其他檔案的資料
將其他檔案中的資料引入至data中使用。新增src/data資料夾，並在底下新增ScoreData.js檔案，並在裡面加入學生姓名與科目成績的JSON資料。
src/views/DataDemo.vue的<script/>中引入(import)ScoreData.js檔案
import ScoreData from "../data/ScoreData";並設一個名為scoredata的屬型接收ScoreData的值。
scoredata: ScoreData
src/views/DataDemo.vue的template中加入<table>，並將scoredata的資料放進<table>中，讓ScoreData檔案中的JSON資料能依序顯示在Table之中。
然後src/views/DataDemo.vue下方加入<style/>與CSS美化一下Table。
執行後，可以看到table與ScoreData的資料。
Axios get外部資料
透過Axios發出Http Request，接受外部資料並放置data中。Axios是一個套件，讓前端瀏覽器可以發起POST、GET、PUT...等 Http Request。
(詳細可參考https://axios-http.com/docs/intro。)
安裝Axios
使用npm安裝axios，開啟終端機輸入:npm install axios
axios配置
新增src/api資料夾與Api.js檔案。
Api.js這個檔案是用來統一管理API用的，把Axios的Request寫在這邊並export輸出，要使用時import這個Api.js檔案使用。
這是MLB Data API，上面的URL是查詢選手成績的API，查詢的選手為編號(player_id)660271的Shohei Ohtani。
接下來，將這個URL的Axios Request寫在src/api/Api.js裡。
首先，import axios，並定義為名稱axios。
接著宣告PitchingStatsRequest為axios.create，建立axios實體並定義baseURL為http://lookup-service-prod.mlb.com/json。
最後，export匯出名稱為getPitchingStats的方法，方法內為PitchingStatsRequest的get Http Request以及定義url("/named.sport_pitching_tm.bam")和參數(params)。
引入並使用
在src/views/DataDemo.vue的<script/>區塊中引入Api.js。
import { getPitchingStats } from "../api/Api";並在data()中加入名為pitchingdata的屬性，值得來源為getPitchingStats
所取回的資料，這邊在使用getPitchingStats時，會設定參數(params)並將回傳(resopnse)的值擷取到要的資料，並將值給至pitchingdata。
pitchingdata: getPitchingStats({
params: {
league_list_id: "'mlb'",
game_type: "'R'",
season: "'2021'",
player_id: "'660271'",
},
})
.then((response) => {
this.pitchingdata=response.data.sport_pitching_tm.queryResults.row;
})
.catch((err) => {
console.log(err);
})
接下來，在src/views/DataDemo.vue的template加入以下
<img> 抓了一個URL，顯示Ohtani的照片。
<h3> 顯示名稱 Shohei Ohtani。
<table> 顯示pitchingdata的成績資料。
執行可以看到照片、名字、成績。
程式碼
紀錄一下從頭到尾的完整程式碼。
