網(wǎng)站制作的頁面比例上海單個關(guān)鍵詞優(yōu)化
一、MVC模式與MVVM模式
1.1mvc模式
MVC模式是移動端應(yīng)用廣泛的軟件架構(gòu)之一，MVC模式將應(yīng)用程序劃分為3部分:Model(數(shù)據(jù)模型)、View(用戶界面視圖)和Controller(控制器)。MVC模式的執(zhí)行過程是將View層展示給用戶，也就是通過 HTML頁面接受用戶動作，將指令傳遞給Controler，如單擊一個按鈕，就會將按鈕觸發(fā)的業(yè)務(wù)傳遞給 Controller:Controller完成業(yè)務(wù)邏輯，要求Model改變狀態(tài)。
? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖1：mvc執(zhí)行過程圖
1.2MVVM格式
MVVM 模式是將MVC模式的Controller改成 ViewModel。View的變化自動更新 ViewModel,ViewModel的變化也會自動同步到 View層顯示。View層用來接受用戶請求，如 DOM 事件、AJAX等:Model層處理數(shù)據(jù)，不再與 View層交互數(shù)據(jù);ViewModel 監(jiān)聽 View 層請求狀態(tài)的變化，同時刷新 View層顯示，ViewModel和 Model層之間進行數(shù)據(jù)雙向綁定，Model層監(jiān)聽ViewModel的變化。MVVM 模式的執(zhí)行過程是 View層接受到請求告訴 VewModel，用戶需要執(zhí)行一些處理動作，當 ViewModel 發(fā)生變化，告訴 View層需要更新頁面。所謂的數(shù)據(jù)雙向綁定是 ViewModel 需要更新 Model 層的數(shù)據(jù);反之,Model層的數(shù)據(jù)改變，在ViewModel中的數(shù)據(jù)狀態(tài)也要進行相應(yīng)的改變。
 |
| ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖2：mvvm執(zhí)行過程圖 |
1.3mvc模式和mvv模式的區(qū)別
在 MVC 模式中，數(shù)據(jù)是單向通信的，按照 View→Controller→Model-View方向循環(huán)。在MVVC模式中，數(shù)據(jù)可以雙向通信，核心是ViewModel對象。
二、Vue框架的特性
Vue 是一套構(gòu)建用戶界面的漸進式框架，Vue只關(guān)注視圖層，采用自底而上增量開發(fā)的設(shè)計，Vue的目標是通過 API實現(xiàn)數(shù)據(jù)綁定和組合視圖組件。Vue是主流的MVVM 框架之一。
三、vue框架的安裝與使用
3.1方法一
1.復(fù)制vue.js的全部內(nèi)容
?進入這個網(wǎng)址，CTRL+A全選并復(fù)制所有內(nèi)容
2.新建一個名稱為vue2.js文件,將復(fù)制內(nèi)容粘貼進去
3.測試+正確結(jié)果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue的安裝、創(chuàng)建vue.js</title><script src="./vue2.js"></script></head><body><div id="app">name={{name}}</div><script>var vm=new Vue({el:"#app",data:{name:"鄭州"}})</script></body>
</html>?
?3.2方法二：利用CDN方式引入vue.js文件
直接使用網(wǎng)址，不用下載
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CDN方式引用</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><div id="app">name={{name}}</div><script>var vm=new Vue({el:"#app",data:{name:"河南"}})</script></body>
</html>運行結(jié)果
