MVVM設(shè)計模式

• 在MVVM設(shè)計模式中由3個部分組成
  M : Model 數(shù)據(jù)模型(保存數(shù)據(jù), 處理數(shù)據(jù)業(yè)務邏輯)
  V : View 視圖(展示數(shù)據(jù), 與用戶交互)
  VM: View Model數(shù)據(jù)模型和視圖的橋梁(M是中國人, V是美國人, VM就是翻譯)

Vue中MVVM的劃分

• Vue其實是基于MVVM設(shè)計模式的
  被控制的區(qū)域: View
  Vue實例對象 : View Model
  實例對象中的data: Model

Vue調(diào)試工具安裝

• 如果你能打開谷歌插件商店, 直接在線安裝即可
  https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN

• 由于國內(nèi)無法打開谷歌國外插件商店, 所以可以離線安裝
  https://www.chromefor.com/vue-js-devtools_v5-3-0/

• 安裝步驟

1下載離線安裝包
2 打開谷歌插件界面
3 直接將插件拖入
4 報錯 程序包無效: "CRX_HEADER_INVALID"
可以將安裝包修改為rar后綴, 解壓之后再安裝
5 重啟瀏覽器

Vue中數(shù)據(jù)的單向傳遞

• 我們把"數(shù)據(jù)"交給"Vue實例對象", "Vue實例對象"將數(shù)據(jù)交給"界面"
  Model -> View Model

<!--這里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
</div>
<script>
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
            name: "李南江"
        }
    });
</script>

Vue中數(shù)據(jù)的雙向傳遞

• 默認情況下Vue只支持數(shù)據(jù)單向傳遞 M -> VM -> V
  但是由于Vue是基于MVVM設(shè)計模式的, 所以也提供了雙向傳遞的能力
  在<input>、<textarea>及 <select>元素上可以用 v-model 指令創(chuàng)建雙向數(shù)據(jù)綁定

• 注意點: v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值
  而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源

<!--這里就是MVVM中的View-->
<div id="app">
    <p>{{ name }}</p>
    <input type="text" v-model="msg">
</div>
<script>
    // 這里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 這里就是MVVM中的Model
        data: {
            name: "李南江",
            msg: "全棧小秘圈"
        }
    });
</script>

配套教程