本節課程將介紹 MVVM 架構的概念和優點。MVVM 是 Model-View-ViewModel 的簡稱，是一種分離資料、介面和邏輯的設計模式。透過 MVVM 架構，您可以提高程式碼的可讀性、可測試性和可維護性。

<html lang="en"><head><style>              .article-container {                width: 100%;                font-family: Microsoft JhengHei,Helvetica Neue,Helvetica,Arial,sans-serif;              }              ii a[href] {                color: #cecece;              }              a[href] {                color: #ff485a;              }              .link {                padding: 3px 20px;                border: 1px solid #ff485a;                background: #ff485a;                border-radius: 3px;                color: #ffffff !important;                text-decoration: none;              }              ul,ol {                margin: 12px auto 40px;                max-width: 740px;                padding: 0px;              }              .font-bold {                font-weight: bold;              }              .font-italic {                font-style: italic;              }              .text-decoration-underline {                text-decoration: underline;              }              .text-decoration-line-through {                text-decoration: line-through;              }              .text-decoration-underline-line-through {                text-decoration: underline line-through;              }              .graf--img {                display: table;                justify-content: center;                align-items: center;                text-align: center;                color: gray;                font-size: 14px;                letter-spacing: 0px;                margin: 10px auto 50px;                width: 100%;                position: relative;                clear: both;              }              .graf--img.center img {                width: 100%;                max-width: 740px;                margin: 10px auto 0px;                display: block;                margin: 0 auto;              }              .graf--img.full img {                width: 100%;              }              .captionTheme__wrapper {                width: 100%;                font-style: normal;                line-height: 22px;                font-size: 16px;                max-width: 600px;                margin-top: 8px;                display: inline-block;              }              .graf--img.full {                max-width: 100%;                margin: 40px 0px;                display: block;                margin: 0 auto;                align-items: center;              }              .graf--figure {                text-align: center;                color: gray;                font-style: italic;                font-size: 15px;                margin: 28px auto;                box-sizing: border-box;              }              .graf--figure iframe {                width: 100%;                max-width: 740px;                margin: 0 auto;              }              .graf--p {                font-size: 18px;                line-height: 1.8em;                font-family: "Microsoft JhengHei fixed", "Helvetica Neue" ,"Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;                letter-spacing: 0;                padding: 0;                font-weight: 400;                padding-top: 20px;                padding-bottom: 40px;                width: 100%;                max-width: 740px;                margin: 0 auto;              }              .graf--h2 {                font-size: 34px;                padding: 0;                margin: 0 auto;                width: 100%;                max-width: 740px;                text-align: left;                letter-spacing: -0.015em;                font-weight: 800;                margin-top: 29px;                text-indent: -0.1em;              }              .graf--h3 {                font-size: 26px;                padding: 0;                margin: 0 auto;                width: 100%;                max-width: 740px;                text-align: left;                letter-spacing: -0.015em;                font-weight: 800;                margin-top: 29px;                text-indent: -0.1em;              }              .graf--li{                font-size: 20px;                padding: 0px 0px 0px 4px;                font-weight: 400;                letter-spacing: 0px;                margin: 13px 0px 0px 20px;                list-style-position: outside;              }              .graf--hr {                width: 100%;                margin: 0px auto;                transform: translateY(-50%);                position: relative;                padding: 0px;                text-align: left;                max-width: 740px;                margin: 0 auto;              }              .graf--hr hr {                height: 0;              }              .graf--blockquote {                padding-left: 15px;                font-size: 20px;                letter-spacing: 0;                margin: 29px auto;                border-left: 4px solid #8e8e8e;                width: 100%;                max-width: 740px;              }              .graf--quotesSpecial {                display: table;                color: gray;                position: relative;                padding: 31.5px 40px;                text-align: center;                letter-spacing: 0px;                position: relative;                margin: 29px auto;                font-family: "Microsoft JhengHei fixed", "Helvetica Neue", "Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;                font-size: 24px;                -webkit-box-ordinal-group: 1;                -webkit-box-flex: 0;              }              .graf--quotesSpecial .quotesSpecial-text {                padding-top: 20px;              }              .graf--quotesSpecial-before {                top: -10px;                left: 0px;                position: absolute;              }              .graf--quotesSpecial-after {                bottom: 15px;                right: 0px;                position: absolute;              }              .embed-wrapper {                width: 100%;                max-width: 740px;                margin: 0 auto;                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);                background-color: #FFFFFF;                border: 1px solid undefined;                display: block;                padding: 20px;                font-style: normal;                border-radius: 12px;                text-decoration: none;                position: relative;                color: undefined;                border-bottom: 1px solid;                box-sizing: border-box;              }              .embed-thumbnail {                width: 100%;                height: 145px;                background-repeat: no-repeat;                background-position: center;                background-size: cover;              }              .embed-desc {                width: 100%;                font-size: 14px;                color: #474747;                padding-left: 1px;                line-height: 22px;                max-height: 150px;                text-align: left;                overflow: hidden;              }              .embed-desc-container {                padding: 10px;              }              .embed-desc-container .embed-title {                font-size: 20px;                font-weight: 600;                color: #FF485A;                margin-bottom: 10px;                text-align: left;                line-height: 25px;              }              .lexical__textBold {                font-weight: bold;              }              .lexical__textItalic {                font-style: italic;              }              .lexical__textUnderline {                text-decoration: underline;              }              .lexical__textStrikethrough {                text-decoration: line-through;              }              .lexical__textUnderlineStrikethrough {                text-decoration: underline line-through;              }              .lexical__textSubscript {                font-size: 0.8em;                vertical-align: sub;              }              .lexical__textSuperscript {                font-size: 0.8em;                vertical-align: super;              }              .lexical__textCode {                background-color: rgb(240, 242, 245);                padding: 1px 0.25rem;                font-family: Menlo, Consolas, Monaco, monospace;                font-size: 94%;              }            </style></head><body><div class="article-container"><blockquote class="graf--blockquote" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">【Android 入門指南】系列文章目錄：</strong></b><a href="https://bit.ly/3TFgCzu" target="_blank"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">https://bit.ly/3TFgCzu</strong></b></a></blockquote><blockquote class="graf--blockquote" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">Android 線上課程教學影片：</strong></b><a href="https://bit.ly/433Offj" target="_blank"><span style="white-space: pre-wrap;">https://bit.ly/433Offj</span></a></blockquote><h2 class="graf--h3" dir="ltr"><span style="white-space: pre-wrap;">課程摘要</span></h2><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">本節課程將介紹 MVVM 架構的概念和優點。MVVM 是 Model-View-ViewModel 的簡稱，是一種分離資料、介面和邏輯的設計模式。透過 MVVM 架構，您可以提高程式碼的可讀性、可測試性和可維護性。</span></p><h2 class="graf--h3" dir="ltr"><span style="white-space: pre-wrap;">教學影片</span></h2><div><a classname="embed-wrapper" href="undefined" target="_blank"><div classname="embed-title">前往觀看 YouTube 影片</div></a></div><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">若您無法順利觀看教學影片，請先登入您的 YouTube 帳號，然後點擊以下連結加入我們的頻道會員：</span></p><ul class="lexical__ul"><li value="1" class="graf--li"><a href="https://www.youtube.com/channel/UCUzvGSRZVFUJbtKmEHec4fA/join" target="_blank"><span style="white-space: pre-wrap;">一般會員</span></a><span style="white-space: pre-wrap;">：成為一般會員後，您將能夠觀看我們所提供的一般會員專屬線上課程。</span></li><li value="2" class="graf--li"><a href="https://www.youtube.com/channel/UCUzvGSRZVFUJbtKmEHec4fA/join" target="_blank"><span style="white-space: pre-wrap;">精實會員</span></a><span style="white-space: pre-wrap;">：成為精實會員後，您將能夠觀看我們所提供的精實會員專屬線上課程。</span></li></ul></div></body></html>

以行動支持創作者！付費即可解鎖

軟體開發

MVVM 計數器範例

Activity 和 Fragment CallBack 使用技巧

※ 視圖模板

視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。

視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源

奧莉薇走在成為後端工程師之路上

後端框架與API 開發(三) – 樣板引擎 和視圖模板

平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。

此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找

Joker Cat

2023 Vue直播班筆記 - 自訂義指令 directive

樣板模式的定義極為簡單，卻是大型系統程式、WEB/APP應用框架的設計核心，完美展現設計模式的價值: 簡單、高效、強大。

再寫5分鐘

軟體設計模式 | 模板模式 : 以Vue.js為例

有趣的是，Model 其實沒什麼嚴格的定義，所以每個人對 Model 的解讀也不盡相同，有人覺得資料怎麼儲存屬於 Model 的一部份 (受 ORM 工具的影響)，有人覺得工作流程 (workflow) 是 Model 的一部份，我個人也有自己的想法，而且隨專案的規模和特性，也不是總是一樣的。

Spirit的沙龍

閒談軟體設計：Model Model Model

這篇文章介紹了 iOS 中常用的 Design Patterns，包括 MVC、MVVM、Singleton、Delegation、Observer 等。同時比較了 Delegate 和 Notification 的使用時機。參考資料中還有更多相關資訊。

Michelle Chen的沙龍

iOS常用的Design Pattern

本文紀錄了MVC和MVVM的差異，包括各自的優缺點和最大差異，並討論了MVVM的商業邏輯應該寫在哪的問題。

MVC v.s. MVVM 學習筆記

本課程學習如何在 Kotlin 程式碼檔案中，設定 ImageView 圖片元件，顯示本地端圖片。

HKT實驗室

ImageView 圖片元件 － 顯示本地端圖片

本課程學習如何使用 Android Studio  建立的第一個應用程式專案：Hello World。

Android 教學：使用 Android Studio 建立第一個 App 專案

職場

音樂藝文

學習

VUE - 隨手筆記

是一隻喜愛前端勇往直前的霹靂酷樂貓

科技

程式設計專區

探索自我實現的小角落。沒有高高在上的教條，只有真實的分享和心得。

閒談軟體設計

這是從 Medium 開始的一個專題，主要是想用輕鬆閒談的方式，分享這幾年軟體開發的心得，原本比較侷限於軟體架構，但這幾年的文章不僅限於架構，也聊不少流程相關的心得，所以趁換平台，順勢換成閒談軟體設計。

國際

Swift開發心得

紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。

<div class="draft-block draft--p left">名稱應該是筆誤吧？！</div>
<div class="draft-block draft--p left">MVVM（Model–view–viewmodel）</div>

 Android

哈囉！歡迎光臨我的沙龍！我是 KT，一位對應用程式開發充滿熱情的開發者。在這個專屬空間，我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇，渴望不斷探索新知，歡迎成為我們的會員，一起在應用程式開發的旅途上，探索更深層次的技術世界，享受學習的樂趣。

會員

Android

課程

程式

線上

教學

上課

親子與教育

專案

應用程式

本篇文章將介紹開發 Android 手機應用程式所需的開發軟體，Google 官方的開發工具 Android Studio。這款軟體不僅免費，還提供完整的支援，適合所有 Android 開發者使用。


安裝

開發

Windows

Intel

Apple Silicon

作業系統

下載

Google

新手入門 Android Studio 下載與安裝教學指南 - 從零開始設定你的 Android 開發環境

根據初學者設計了 Kotlin 程式語言的基礎課程，從 Android Studio 到 Android App 開發，提供完整指引。由基礎開始，傳授開發技巧。課程分為三部分：環境安裝、常用元件與界面設計，以及高階技巧如 DataStore、Room 資料儲存與網路處理。

文章

基礎

語言

Android 教學【Android 入門指南】系列文章目錄

Android 指南

Kotlin 指南

實作計算機

其它

依賴注入

FlameGame

Flutter

Dart

Python

Electron

讀書心得

YouTube－HKT線上教室

【加入會員按鈕】
https://www.youtube.com/channel/UCUzvGSRZVFUJbtKmEHec4fA/join
選擇「一般會員」，可以觀看一般會員專屬線上課程。
選擇「精實會員」，可以觀看精實、一般會員專屬線上課程。

▶ 使用 Kotlin 程式語言開發 APP 教學課程播放清單
https://www.youtube.com/playlist?list=PL9muXAsyRXOGY2SWvI6VtUzQ3q4x-fAsK

【課程說明】
如果你曾經有過開發 Android 應用程式的夢想，但不知道如何開始，或者你有個超級棒的想法，但不知道如何變現，甚至你目前只有一份 22k 的死薪水，渴望換到一個更高薪的工作跑道，那麼這個課程就是為你點亮未來的明燈！

這門課程是一個基礎入門課程，適合已經學習過 Kotlin 程式語言的「初學入門者」。我們將使用 Kotlin 程式語言，從零開始建立全新的 Android 應用程式。在課程中，你將學習 Google 官方的 Android 開發環境，也就是 Android Studio。我們將從淺入深，以輕鬆有趣的方式教授開發 Android App 的精髓與技巧，讓你快速掌握這個領域。透過這門課程，你將輕鬆快樂地學會 Android App 開發的基礎，並且早日邁向成為專家級一流開發人才。

這門課程內容分為三大部分，每一部分都帶你一步步深入了解 Android App 開發的精髓。
首先，我們將介紹 Android 開發環境的安裝和使用，讓你能夠輕鬆上手。
接著，我們將重點介紹 Android 常用元件和佈局，讓你能夠打造出令人驚艷的應用界面。
最後，我們將深入探討進階開發技巧，包括資料儲存等領域，讓你能夠建立出功能豐富、優化良好的 Android 應用程式。

當你完成這門課程的學習時，你將具備使用 Kotlin 程式語言，來開發當今最火紅的 Android 作業系統平台上的應用程式。

⬇︎HKT 線上課程播放清單⬇︎

開發 Android App 手機應用程式：使用 kotlin 程式語言
https://www.youtube.com/playlist?list=PL9muXAsyRXOGY2SWvI6VtUzQ3q4x-fAsK

從零開始學 Kotlin 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOF0geRhrVrthr0beKXQBzEB

從零開始學 Jetpack Compose 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOEDEJK1bTkkoUKMlLwCMFTK

從零開始學 Compose for Desktop 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOEFbhQwwrVrnj8hoXbzLupd

從零開始學 Swift 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOFCasxeRWBeR7Q1OIQnaiGJ

Android 入門開發實戰：口罩地圖(Kotlin)  
https://www.youtube.com/playlist?list=PL9muXAsyRXOGfQIML8fml8jYEOr0pN93D

Flutter 程式設計入門實戰 30 天
https://www.youtube.com/playlist?list=PL9muXAsyRXOFN-iWA9h8SxQywjZ2123pI

從零開始學 Dart 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOF5RgnBUZX-peNVtH9ExtRt

從零開始學 Java 程式設計- 零基礎學程式開發
https://www.youtube.com/playlist?list=PL9muXAsyRXOFR4P3QdEcQogrz1goYQUpW

Android 教學【開發 Android App 手機應用程式：使用 kotlin 程式語言】MVVM 介紹 | HKT線上教室

MVVM 介紹

<blockquote class="lexical__quote" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">【Android 入門指南】系列文章目錄：</strong></b><a href="https://bit.ly/3TFgCzu" target="_blank"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">https://bit.ly/3TFgCzu</strong></b></a></blockquote><blockquote class="lexical__quote" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">Android 線上課程教學影片：</strong></b><a href="https://bit.ly/433Offj" target="_blank"><span style="white-space: pre-wrap;">https://bit.ly/433Offj</span></a></blockquote><h2 class="lexical__h2" dir="ltr"><span style="white-space: pre-wrap;">課程摘要</span></h2><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">本節課程將介紹 MVVM 架構的概念和優點。MVVM 是 Model-View-ViewModel 的簡稱，是一種分離資料、介面和邏輯的設計模式。透過 MVVM 架構，您可以提高程式碼的可讀性、可測試性和可維護性。</span></p><h2 class="lexical__h2" dir="ltr"><span style="white-space: pre-wrap;">教學影片</span></h2><div class="lexical__youtube"><iframe data-lexical-youtube="nQ_mO9C-XpA" width="600" height="340" src="https://www.youtube-nocookie.com/embed/nQ_mO9C-XpA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" title="YouTube video"></iframe></div><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><div class="ad-placeholder" style="min-height: 124px;"></div><span style="white-space: pre-wrap;">若您無法順利觀看教學影片，請先登入您的 YouTube 帳號，然後點擊以下連結加入我們的頻道會員：</span></p><ul class="lexical__ul"><li value="1" class="lexical__listItem"><a href="https://www.youtube.com/channel/UCUzvGSRZVFUJbtKmEHec4fA/join" target="_blank"><span style="white-space: pre-wrap;">一般會員</span></a><span style="white-space: pre-wrap;">：成為一般會員後，您將能夠觀看我們所提供的一般會員專屬線上課程。</span></li><li value="2" class="lexical__listItem"><a href="https://www.youtube.com/channel/UCUzvGSRZVFUJbtKmEHec4fA/join" target="_blank"><span style="white-space: pre-wrap;">精實會員</span></a><span style="white-space: pre-wrap;">：成為精實會員後，您將能夠觀看我們所提供的精實會員專屬線上課程。</span></li></ul>

神秘力量

閱讀書評

<div class="draft-block draft--p left">
              <a href="/user/@66402dedfd89780001f0d9d8" target="_blank" class="draft--mention">
                <i class="icon-mention"></i>
                <span>Ang</span>
              </a>
             對耶我寫反了，謝謝XD</div>

【開發 Android App 手機應用程式：使用 kotlin 程式語言】課程播放清單
https://www.youtube.com/playlist?list=PL9muXAsyRXOGY2SWvI6VtUzQ3q4x-fAsK

【加入會員按鈕】
https://www.youtube.com/channel/UCUzvGSRZVFUJbtKmEHec4fA/join
選擇「一般會員」，可以觀看一般會員專屬線上課程。
選擇「精實會員」，可以觀看精實、一般會員專屬線上課程。

【課程說明】
如果你曾經有過開發 Android 應用程式的夢想，但不知道如何開始，或者你有個超級棒的想法，但不知道如何變現，甚至你目前只有一份 22k 的死薪水，渴望換到一個更高薪的工作跑道，那麼這個課程就是為你點亮未來的明燈！

這門課程是一個基礎入門課程，適合已經學習過 Kotlin 程式語言的「初學入門者」。我們將使用 Kotlin 程式語言，從零開始建立全新的 Android 應用程式。在課程中，你將學習 Google 官方的 Android 開發環境，也就是 Android Studio。我們將從淺入深，以輕鬆有趣的方式教授開發 Android App 的精髓與技巧，讓你快速掌握這個領域。透過這門課程，你將輕鬆快樂地學會 Android App 開發的基礎，並且早日邁向成為專家級一流開發人才。

這門課程內容分為三大部分，每一部分都帶你一步步深入了解 Android App 開發的精髓。
首先，我們將介紹 Android 開發環境的安裝和使用，讓你能夠輕鬆上手。
接著，我們將重點介紹 Android 常用元件和佈局，讓你能夠打造出令人驚艷的應用界面。
最後，我們將深入探討進階開發技巧，包括資料儲存等領域，讓你能夠建立出功能豐富、優化良好的 Android 應用程式。

當你完成這門課程的學習時，你將具備使用 Kotlin 程式語言，來開發當今最火紅的 Android 作業系統平台上的應用程式。

⬇︎HKT 線上課程播放清單⬇︎

開發 Android App 手機應用程式：使用 kotlin 程式語言
https://www.youtube.com/playlist?list=PL9muXAsyRXOGY2SWvI6VtUzQ3q4x-fAsK

從零開始學 Kotlin 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOF0geRhrVrthr0beKXQBzEB

從零開始學 Jetpack Compose 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOEDEJK1bTkkoUKMlLwCMFTK

從零開始學 Compose for Desktop 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOEFbhQwwrVrnj8hoXbzLupd

從零開始學 Swift 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOFCasxeRWBeR7Q1OIQnaiGJ

Android 入門開發實戰：口罩地圖(Kotlin)  
https://www.youtube.com/playlist?list=PL9muXAsyRXOGfQIML8fml8jYEOr0pN93D

Flutter 程式設計入門實戰 30 天
https://www.youtube.com/playlist?list=PL9muXAsyRXOFN-iWA9h8SxQywjZ2123pI

從零開始學 Dart 程式設計
https://www.youtube.com/playlist?list=PL9muXAsyRXOF5RgnBUZX-peNVtH9ExtRt

從零開始學 Java 程式設計- 零基礎學程式開發
https://www.youtube.com/playlist?list=PL9muXAsyRXOFR4P3QdEcQogrz1goYQUpW