第25個冬天

Vue前端要去進行http請求，使用的是 Axios 元件實作 HTTP 請求 WebAPI 伺服器，在此使用 ASP.NET Core WebAPI 專案為前端提供 WebAPI 服務，透過 HTTP 協定提供。 預設在 Vue 專案中，是沒有安裝 Axios 元件的，需要我們另行安裝。 可以於 Vue專案你開好的vscode視窗切至terminal下指令 npm install axios 安裝完後，可在 Vue 專案的 node_modules\axios 路徑下查看。 將 Axios 元件執行 HTTP 請求的基礎配置放在一個Axios.js 檔案中並導出，當作一個共用的元件。 另外，Axios 安裝配置之後，還需要在 src/main.js 檔案中設定一下方可使用。 import axios from 'axios' const API = axios.create({ baseURL: 'https://localhost:{port}' , timeout: 2000 }) export default API; src\axios\axios.js import axios from 'axios' const API = axios.create({ baseURL: 'https://localhost:{port}' , timeout: 2000 }) export default API; 這邊定義的baseURL就是你的web api要call的網址，{port}這部分要記得自己更新。 src\main.js import { createApp } from 'vue' import App from './App.vue' import 'bootstrap/dist/css/bootstrap.min.css' import axios from './axios/axios' const app = createApp(App); app.mount( '#app' ); app.conf...

  雖然前面篇章已經用了很多event的實作了，但還是稍微特別在寫一篇來筆記一下。 基本上用上述架構來去認識所謂事件 在探討vue中事件處理方式之前又要稍微回顧一下原生html跟js事件處裡的方式，因為vue只是後續框架的封裝優化。 在 HTML 中，事件屬性是由 HTML 元素提供的，凡是以 on 開頭的都是html原生提供的event屬性，可以在當中去撰寫要觸發的js行為。 對於這些事件屬性，都具有一定的行為，比如像是常見的 onclick 事件，它的意義是單擊事件。 當某個 HTML 元素上有 onclick 事件，則在頁面上渲染 HTML 元素之後，只要點擊這個元素，就會觸發 onclick 事件，從而執行在此事件上掛接的 JavaScript 程式碼。 < input type ="button" onclick="alert('hello')" value ="送出" /> 像上述的範例就是單擊按鈕後會去 alert一個hello 警示內容的跳窗按鈕功能 在Vue當中，對於HTML元素事件的監聽，主要是透過 v-on 指令來實踐。 在監聽到事件後，就會執行掛接的 JavaScript 程式碼。 小叮嚀:v-on 指令在 Vue 中，可簡寫為@符號。 比方說: < input type ="button" v- on :click="getData" value ="查詢" /> < input type ="button" @click="getData" value ="查詢" /> v-on:click 與 @click 是異曲同工之妙，若比較懶的就可以直接用簡寫形式。 就事件執行的 JavaScript 程式碼，可以是簡單的純程式碼，也可以掛接著一個 JavaScript 的 function。 大部分情況，對於事件處理的業務邏輯較為複雜，需要封裝到函數中，函數也可以傳入參數，從而實踐具體功能。 Vue 中的 v-on 指令，也可以執行 Vue 中定義的響應式變數，來實現資料的雙向綁定。 如此一來當我們在 v-on...