繼上屆自我挑戰完JavaScript後,這次決定進一步從框架下手,剛好目前工作上使用了Vue,雖然已經使用一陣子了,但整體對前端框架以及CSS的應用還是不太熟悉,又到了強迫自己每天學習的時候了,走起!
動機 去年0前端基礎用JavaScript作為主題參加了自我挑戰,近期從原本的Java純後端實習生默默變成全端工程師了,目前使用的是Vue + Spring b...
核心概念-漸進式框架(progressive framework) 一個完整的頁面是由各個組件(component)組成,並關注於各組件的渲染,並透過綁定或全域...
前置作業安裝 nodevuevue-cli vue-cli(Vue.js Command-Line Interface) 快速搭建專案的指令 內建Hot-Re...
Vue-cli 專案基本架構 favicon.ico:僅用於 index.htmlindex.html:網頁入口文件 <!-- div = 區塊 &...
Vue生命週期(Life Cycle) 每個實例從被初始化,掛載到DOM、更新,到最後被銷毀的歷程。而vue提供了一系列生命週期的函式,則稱為生命週期鉤子(Li...
計算屬性(Computed) 無傳入值具回傳值(return)對來源屬性進行操作-> 觸發即使來源變數無實際異動(true -> true),也進行...
Watch 監聽器 具比較傳(old & new)無回傳值(return)監聽變數發生異動-> 觸發監聽變數無實際異動(true -> tr...
v-bind 屬性綁定 將屬性綁定於 HTML 中,可綁定Data、Class、Stylev-bind: -> 可簡化為 :好處: 定義初始值於data後...
v-if 條件式渲染 :true -> 渲染可使用於template標籤中 可進行斷判斷: data中的變數 方法回傳 一段判斷邏輯 v-else 需...
v-for 基於數組、物件透過迭代、遍歷對前端進行渲染。 item in itemsitems: 數據源item: 元素別名index: 當前索引key: 追蹤...