Vue01 MVVM模式和第乙個vue程式

2022-09-27 18:24:09 字數 1764 閱讀 8793

學習vue,需要先了解mvvm框架

mvvm是model-view-viewmodel的簡寫本質上就是mvc 的改進版。mvvm 就是將其中的view 的狀態和行為抽象化,讓我們將檢視 ui 和業務邏輯分開

mvvm模式和mvc模式一樣,主要目的是分離檢視

(view)和模型(model),有幾大優點

1. 低耦合。檢視(view)可以獨立於model變化和修改,乙個viewmodel可以繫結到不同的"view"上,當view變化的時候model可以不變,當model變化的時候view也可以不變。

2. 可重用性。你可以把一些檢視邏輯放在乙個viewmodel裡面,讓很多view重用這段檢視邏輯。

3. 獨立開發。開發人員可以專注於業務邏輯和資料的開發(viewmodel),設計人員可以專注於頁面設計,使用expression blend可以很容易設計介面並生成xaml**。

4. 可測試。介面素來是比較難於測試的,測試可以針對viewmodel來寫。[1]

mvvm模式的實現者

在 mvvm 架構中,是不允許 資料 和 檢視 直接通訊的,只能通過 viewmodel 來通訊,而 viewmodel 就是定義了乙個 observer 觀察者

cdn

<

script

src=""

>

script

>

<

script

src=""

>

script

>

初寫**

doctype html

>

<

html

lang

="en"

xmlns:v-bind

="">

<

head

>

<

meta

charset

="utf-8"

>

<

title

>vue

title

>

head

>

<

body

>

<

div

id>

<

span

v-bind:title

="message"

>

滑鼠懸停幾秒檢視此處動態繫結資訊

span

>

}div

>

<

script

src=""

>

script

>

<

script

>

varvue

=new

vue(

});script

>

body

>

html

>

1.:滑鼠懸停幾秒檢視此處動態繫結message資訊2.}:使用雙花括號獲取,vue建立的名為message屬性包裹起來,既可以實現資料繫結,類似el表示式的4.data::資料物件中有乙個名為 message 的屬性,並設定了初始值hello,vue!

Vue學習筆記2 MvVM模式和第乙個Vue程式

vue官方文件 為什麼要使用mvvm mvvm模式和mvc模式一樣,主要目的是分離檢視 view 和模型 model 有幾大好處 view view是檢視層,也就是使用者介面。前端主要由html和css來構建,為了更方便地展現viewmode 或者model層的資料,已經產生了各種各樣的前後端模板語...

Vue MVVM模式和第乙個Vue程式

mvvm 源自於經典的 mvc model view controller 模式。mvvm 的核心是 viewmodel 層,負責轉換 model 中的資料物件來讓資料變得更容易管理和使用,其作用如下 mvvm 已經相當成熟了,主要運用但不僅僅在網路應用程式開發中。當下流行的 mvvm 框架有 vu...

01第乙個程式

使用編輯器輸入以下原始碼 模擬輸入 輸出,當輸入正確數字,則輸出 ok 如果錯誤,則輸出 error print hello,beyond temp input 猜猜我心裡想的數字 guess int temp if guess 2 print ok else print error print g...