大公司通常都會有不同的部門，財務管財務，行銷管行銷，業務管業務，雖然彼此有關聯，有往來，但基本上都是獨立運作，有什麼問題就去相對應的部門中做調整。 程式也是一樣，規模一龐大，就需要採取「關注點分離」的原則，把東西都拆分清楚，讓整體更容易管理和維護。 關注點分離 (SOC) 是指程式開發時，必須重視的一種「設計原則」。將程式拆成不同功能層或模組，讓每個區塊有各自的關注點，才不會全部混在一起，像一團毛線球剪不斷理還亂。 以 Vue 為例 ---------------- HTML ----------------------------------------- JS (資料、渲染、生命週期)-------------

template 加入 template 屬性，用反引號框住樣板內容，元件名稱直接作為標籤名稱。 app.component("alert", { template: `<div class="alert alert-primary" role="alert">範例一</div>` }); x-template 建立 script，加入 type="text/x-template" id="樣板名稱"，script 中放入樣板內容，component 中的 template 補上 '#樣板名稱'。 <script type="text/x-template" id="alert-template">

元件 header、footer、sidebar 都會很常重複使用，content 是會變化的，用不同元件來插入。網頁最外層就是根元件，也就是createApp 建立的元件，稱為「根元件」。 註冊元件 元件註冊分為兩種：「全域註冊」和「區域註冊」。 全域註冊 const app = Vue.createApp({ data() { return {

為什麼要拆解成元件 增加程式碼的可複用性 增加單一檔案過大 易於管理及協作 元件功能獨立化 增加程式碼的可複用性 網頁上有類似、功能很接近的區塊，如果拆分成不同片段或檔案，不好管理，當需要修改時，所有部分都要去逐一修改。 將功能元件化，讓相同的程式碼可以同時放在不同地方，而且修改時，只需要修改元件就好。 避免單一檔案過大

Youtube Link To sum up： 各種「學習」方式改為英文 (看書/學管理/學泡咖啡/學瑜珈/投資...等) 各種「娛樂」方式改為英文 (看書/聽故事/podcast/聽歌/Youtube/追劇/看劇評/冥想引導...等) 看英文相關的社群媒體/影片/App 跟外國人交流 (朋友聊天、同事溝通) 外國網站購物 (逛網拍、英文聯絡客服) 各種要做/看的事情改為英文 (手機介面/搜尋靈感/物品貼英文標籤/寫日記/Google 語音助理/讀Google 評價/寫代辦事項...等)

學習 Vue 之前先來了解什麼是 關注點分離 Vue 是透過 MVVM 的機制來處理關注點分離，所以是以資料狀態操作畫面 View(視窗) <---Binding---> ViewModel(資料繫結器) <---> Model(資料狀態) 原始碼會加上 v-model 來綁定資料狀態 不需要自己寫渲染

Recently, we have lots of front end developers joining the academy. The discussions about front end career, knowledge, and skills are getting more and more. We also have a developer who works in CANADA right now! If you're a "newbie" who wants to chat with seniors or ask some questions, come join the event! If you're a "senior" developer who wants to know what's the life like in different countries, come join the event! If you're "not a front end" developer who wants to learn more about front end side, come join the event! Let's have a chat over topics like

View <-----Binding-----> ViewModel <-------> Model 資料有內容時，直接寫入到畫面中 生命週期：在特定時間點修改文字時，只要寫在生命週期內，生命週期會調整資料，資料會直接寫在畫面(同上) 事件觸發：觸發後更新資料，透過 v-model 的機制，畫面也會一起更新 參考資料＋圖片來源

在圖示左側的 View (html) 的部分，v 開頭為指令，指令可以區分成三大類：資料、渲染方法和事件綁定 三大分類 1. 資料 v-model 和 資料 進行雙向綁定，資料怎麼變，v-model 跟著變，反之亦然 2. 渲染方法 渲染方法不會操作資料內容，但會將資料反應在畫面上，只會讀不會寫入

範例程式碼放在 CodePen 中 1. {{ }} (Mustache 鬍子) / v-text / v-model 兩種方法都可以將 data 中的資料渲染到畫面上，顯示結果一模一樣 1-1. {{ }} (Mustache 鬍子) 用法 在標籤內打上 {{ 資料名稱 }} <p>{{ name }}在{{ position }}喝牛肉湯</p>

html 檔 常見基本結構 <div id="app"></div> const app = { // 資料 (函式) data() { return {

AJAX 介紹 非同步 JavaScript 及 XML (Asynchronous JavaScript and XML，AJAX) 並不是一種技術，而是整合數個技術的新方法。 以往切換網頁每次都要再重新讀取「整個」網頁，連相同的東西也要重跑？？？(例如：導覽列、頁尾等)，會花很多時間等待，AJAX 的出現就是為了解決這個問題，簡直是救世主阿 實際運用：註冊會員輸入E - mail 時，網頁馬上偵測到是否註冊過或格式是否正確，網頁馬上顯示相關訊息，而且頁面並沒有重跑，很讚！ 實作步驟 # 直接在 chrome 開發者工具操作 (F12 console) 第一步：建立 XMLHttpRequest 物件

前情提要 這篇是接續 AJAX 基礎篇、AJAX 非同步觀念，有疑問可以先看完再回來 # 等等要串接的 六角學院 API 在這 請抬頭看看標題，沒錯！要特別注意有資料要傳送時，open 內的格式不是 get，要改成「post」 // 建立 XMLHttpRequest 物件 var xhr = new XMLHttpRequest(); // 將物件初始化

AJAX 是 Asynchronous JavaScript and XML 的縮寫，Asynchronous 意思就是「非同步」。 接續 AJAX 基礎篇 的內容 var xhr = new XMLHttpRequest(); xhr.open("get","https://www.ris.gov.tw/rs-opendata/api/v1/datastore/ODRP048/106",true); xhr.send(null);

JavaScript 入門篇 - 學徒的試煉 上課筆記 加上個人詮釋與額外補充 基礎概念 我們可以將網頁的資料儲存在 Local Storage，在 Local Storage 上的資料會永久儲存，主動清除才會消失。可以應用在顯示查詢紀錄、最近瀏覽...等 範例程式碼 如何在開發者工具查看 F12 -> Application