本節課程將介紹 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 使用技巧

今年，vocus 的 iOS 工程師 YC 帶著技術交流（以及讓更多人認識 vocus）的使命，參與了今年的 try! Swift Tokyo 研討會，這系列的文章，我們將會分享研討會當中的精彩學習，還有那些網路上看不到的研討會體驗細節（讚嘆主辦方的用心）！

方格子 vocus 官方沙龍

vocus tech｜iOS 工程師前進東京！參加 try! Swift Tokyo 研討會的學習與啟發（上）

３分鐘快速了解「 品牌視覺設計 」VI  基本架構！

淇嗨-一定還有什麼沒想到的！

３分鐘「 品牌視覺設計 」VI 小教室

※ 視圖模板

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

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

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

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

MVVMC(Model View ViewModel Coordinator)，特點是Coordinator。



Model

負責儲存應用程式的資料。



View

負責顯示資料。



ViewModel

負責處理View和Model之間的狀態關係。



Coordinator

負

小黑與程式的邂逅

[設計模式]MVVMC

MVI(Model View Intent)，特點是Intent。



Model

負責介面狀態



View

負責顯示資料。



Intent

負責將封裝後的操作告知Model。



[設計模式]MVI

MVVM(Model View ViewModel)，特點是View跟ViewModel之間做資料綁定。



Model

負責儲存應用程式的資料。



View

負責顯示資料。



ViewModel

負責處理View和Model之間的狀態關係。



[設計模式]MVVM

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

Michelle Chen的沙龍

MVC v.s. MVVM 學習筆記

您將學到如何利用 MVVM 架構來開發一個計數器應用程式。您將了解 ViewModel 的作用和用法，以及如何使用 LiveData 來實現資料的動態更新。

HKT實驗室

MVVM 介紹

職場

學習

音樂藝文

設計

分享設計、創業與提昇效率的生活發現
在做設計思考時，習慣在每個節點都會問自己看看
「一定還有什麼沒想到的」
幫助自己突破知識的盲區



寫個好程式

嗨，我是一名程式設計師，會在這分享開發與學習紀錄。

國際

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

Swift開發心得

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

投資理財

 Android

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

會員

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線上教室

<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"><div class="ad-placeholder" style="min-height: 124px;"></div><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>

Web3

<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>