初探 VueJS - v-slot 插槽

什麼是插槽 插槽可以把外層內容塞去子元件當中的指定位置，不過在子元件當中一定要開一個插槽才能將內容塞到裡面去。插槽可以讓我們更容易地建立自己的客製化元件，對一些不必頻繁更新的資料可以使用插...

初探 VueJS - axios 對 API 送出 Http 請求

送出 Http 請求這一件事情也是網頁開發的老生常談了，在一個系統開發的過程中，若是採取前後端完全分離的工作模式，就會與後端工程師搭配，依照當初的規格來開 API 讓前端串接，讓資料可以在前端呈現，又或是可以...

初探VueJS - VueRouter 前端路由介紹

Router 路由 如果看過 laravel 以及 react 的朋友們一定對"路由"這個詞不陌生，路由可以看做網址的路徑，依照不同的路由回傳不同的資料與頁面，大致上可以細分成為前端及後端路由兩種。 後端...

初探 VueJS - v-if、v-show 與 v-for

條件判斷 在 Vue 當中，還提供了  v-if 以及 v-show 兩個條件的指令，可以用於控制不同的元素、元件是否顯示或是依條件更改不同樣式。 v-show 直接看一下程式碼

初探 VueJS - 事件綁定 v-on

事件綁定 在處理網頁元件的時候，有一些元件與使用者互動時需要呼叫特定的 function 來處理某些事情，例如一個登入表單，要在使用者完成輸入資訊之後，並點"登入"按鈕來執行登入動作，此時"登入"的按鈕...

初探 VueJS - 模板綁定指令

指令與模板綁定 上一篇介紹了資料綁定的兩種指令 v-bind 以及 v-model 兩種綁定指令，而這一篇會介紹幾個在模板顯示上的常用指令。 v-text 其實這種綁定方式與前面使用的大括號{{ }}...

初探 VueJS - 資料綁定與表單:v-bind、v-model

指令 在 Vue 當中，使用 "v-" 開頭的都稱為指令，之後還會介紹幾個綁定模板資料的指令。 資料綁定 在前面的文章當中，我們在 template 使用 {{  }} 雙大括號來輸出資料，那如果...

初探 VueJS - 響應變數 - ref、reactive 與 computed

響應變數 在 Vue 的 compositionAPI 當中，如果只是透過 let 、 var 宣告一般的 JS 變數，是無法被自動響應的。而在 optionAPI 當中透過 data() 宣告變數則是會被 Vue 自動響應的。 可以先試一...

初探 VueJS - Props 與子元件溝通

Props 在 Vue 與許多前端框架之中，元件與元件之間各自的狀態都是獨立的，例如各自有屬於自己的變數、狀態、模板等而不會互相影響，也就是說我們無法透過某個元件直接去修改另外一個元件的狀態或變數，...

初探 VueJS - CompositionAPI 生命週期函數

前言 我們在上一篇介紹了 OptionAPI 的生命週期函數以及元件的概念，本篇將會介紹在 CompositionAPI 中使用生命週期函數。 生命週期階段 上一篇有介紹過在 Vue 當中有四個不同的元件...