[{"data":1,"prerenderedAt":187},["ShallowReactive",2],{"blog:\u002Fblog\u002Fvue\u002Fintro":3},{"id":4,"title":5,"author":6,"body":7,"category":172,"date":173,"description":174,"draft":175,"extension":176,"image":177,"meta":178,"navigation":179,"path":180,"seo":181,"series":177,"seriesOrder":177,"seriesTitle":177,"stem":182,"tags":183,"updatedAt":177,"__hash__":186},"blog\u002Fblog\u002Fvue\u002Fintro\u002Findex.md","認識 Vue.js","charles",{"type":8,"value":9,"toc":162},"minimark",[10,14,19,48,52,59,138,143,149,153],[11,12,13],"p",{},"用於建立面向於 Desktop, Mobile, WebGL, Terminal 應用程式的前端。\n由於 Vue.js 基於標準的 HTML、CSS 和 JavaScript 組成，因此最廣泛應用就是用在建立網頁。",[15,16,18],"h2",{"id":17},"使用-vuejs-的主要場景","使用 Vue.js 的主要場景",[20,21,22,30,36,42,45],"ol",{},[23,24,25,26,29],"li",{},"Single-Page Application (SPA)",[27,28],"br",{},"在使用網站時，只載入一個頁面，在網頁更新時渲染頁面，不需重新加載，提供更滑順的使用者體驗。",[23,31,32,33,35],{},"Fullstack \u002F Server-Side Rendering (SSR)",[27,34],{},"從伺服器端取得資料，再繪製出完整的 HTML 頁面，有助提高搜尋引擎優化 (SEO) 與首次載入速度。",[23,37,38,39,41],{},"Jamstack \u002F Static Site Generation (SSG)",[27,40],{},"靜態網站生成：在部署前生成靜態 HTML，不需要在瀏覽器或伺服器上進行渲染。",[23,43,44],{},"作為 Web Component 遷入到任何頁面上",[23,46,47],{},"希望無須任何建置就能單純增強 HTML 檔案的功能 (透過 CDN 引入)",[15,49,51],{"id":50},"vuejs-的特點和優勢","Vue.js 的特點和優勢",[11,53,54],{},[55,56],"img",{"alt":57,"src":58},"alt text","\u002Fimages\u002Fblog\u002Fvue\u002Fintro\u002Fimage.png",[60,61,62,68,74,80,86,92,98,110,116,132],"ul",{},[23,63,64,65,67],{},"組件化架構",[27,66],{},"Vue.js 以整合 HTML、CSS、JS 的單文件元件 (SFC) 為基礎，方便每個元件獨立測試，且程式碼較簡單易懂，有助於最佳化與除錯。",[23,69,70,71,73],{},"輕量級",[27,72],{},"Vue.js 本體相當輕量，且支援懶加載 (lazy load)，只在需要時才加載元件，有助於提高網頁載入速度。",[23,75,76,77,79],{},"學習曲線平緩",[27,78],{},"Vue.js 由簡入深，只要具有 HTML、CSS、JS 基礎知識就能快速學習並立即應用，能以少量程式碼快速得到成果。",[23,81,82,83,85],{},"豐富工具",[27,84],{},"Vue.js 的開發社群日益壯大，有豐富的工具能夠實現進階的需求。",[23,87,88,89,91],{},"增量採用",[27,90],{},"Vue.js 是漸進式框架，可以根據項目的需求逐步導入。如果需要也可以僅使用 CDN 引入在 HTML 檔案，即可使用 Vue 的強大功能。",[23,93,94,95,97],{},"與其他框架整合",[27,96],{},"作為靈活的前端框架，Vue 可以輕鬆地與其他工具和框架整合，以滿足項目的具體需求",[23,99,100,101,103,104],{},"虛擬 DOM Model 和渲染",[27,102],{},"Vue 使用虛擬 DOM，當頁面異動時，無需不斷重新渲染整個 DOM，提供相對於原生 JS 操作 DOM 更快的渲染速度。",[105,106,107],"blockquote",{},[11,108,109],{},"目前 Vue 也在開發 Vapor 模式以取代虛擬 DOM，再進一步達到更快的渲染速度。",[23,111,112,113,115],{},"DOM 操控優勢",[27,114],{},"透過雙向綁定功能，更新元件和追蹤數據更新相當簡單，綁定的數據可以像 DOM Object 一樣更新，因此在應用即時更新的情況下，Vue 表現特別靈活。",[23,117,118,119,121,122,124,125,129],{},"速度和性能",[27,120],{},"當比其他前端框架，Vue 有相對更加卓越的反映速度與性能表現",[27,123],{},"👇",[126,127,128],"strong",{},"與 React 跟 Svelte 比較，Vue 的性能表現更好",[55,130],{"alt":57,"src":131},"\u002Fimages\u002Fblog\u002Fvue\u002Fintro\u002Fimage-1.png",[23,133,134,135,137],{},"日益壯大的社區支援與相關教學",[27,136],{},"基於 Vue 的卓越特色，深受大量前端開發社群認可，目前有越來越多基於 Vue 的 Libraries、Utilities、Framework 誕生，且 Vue 仍在非常積極的更新與優化，並相當願意與開發社群討論未來發展的方向，是高速發展中且持續充滿活力的前端框架。",[139,140,142],"h3",{"id":141},"已經可見使用-vuejs-搭建部分網頁的大型企業","已經可見使用 Vue.js 搭建部分網頁的大型企業",[11,144,145],{},[55,146],{"alt":147,"src":148},"image","https:\u002F\u002Fhackmd.io\u002F_uploads\u002FBkAGf3lBa.png",[139,150,152],{"id":151},"gitlab-在-7-年前即全面採用-vuejs-的原因","GitLab 在 7 年前即全面採用 Vue.js 的原因",[11,154,155],{},[156,157,161],"a",{"href":158,"rel":159},"https:\u002F\u002Fabout.gitlab.com\u002Fblog\u002F2016\u002F10\u002F20\u002Fwhy-we-chose-vue",[160],"nofollow","🔗 Why we chose Vue.js (gitlab.com)",{"title":163,"searchDepth":164,"depth":164,"links":165},"",3,[166,168],{"id":17,"depth":167,"text":18},2,{"id":50,"depth":167,"text":51,"children":169},[170,171],{"id":141,"depth":164,"text":142},{"id":151,"depth":164,"text":152},"Vue.js","2024-09-25","Vue.js，一個平易近人、高效能且功能完整的漸進式 JavaScript 框架。",false,"md",null,{},true,"\u002Fblog\u002Fvue\u002Fintro",{"title":5,"description":174},"blog\u002Fvue\u002Fintro\u002Findex",[184,185],"Vue","Frontend","QPCzygNLmcQNwFH2Zq7qCyr2bOtUYp3R8-knOp-7TOc",1780512500898]