MVVM模式

1.MVVM出現的必然性：

       前端開發混合了html css  js，而且頁面衆多，所以代碼的組織和維護特別複雜。

 2.MVVM全稱是Model-View-ViewModel

  Model=>模型 ，純JavaScript 對象表示   view =>視圖  ，負責顯示   而viewmodel  則負責將model的數據渲染到view，並將view中的數據返回給model  ，實現了數據的雙向綁定  ，與javascript相比，不在操作dom節點而是將數據保存在模型，即就是對象中，通過viewmodel機制將數據傳到view，通過操作對象而操作實現dom結構的變化  將開發者從操作dom節點的繁瑣步驟中解脫出來

3.數據的單向綁定

   js代碼如下：

 data (){
    return{
    name：'sansui',
    age:12
}
}

html 代碼如下

<div>
    <p> hello,{{name}}</p>
    <p>you are {{age}} years old</p>
</div>

viewmodel 機制可以將data中的數據綁定到dom節點中 並渲染到頁面

v-text=‘msg’  綁定到html元素的屬性上

{{ msg}}  直接插值

4.數據的雙向綁定    通過v-model 指令實現

5.同步dom結構  v-for   =‘ c  in  categories’   c 爲循環變量 categories爲一個數組他的子元素爲對象，通過該方法可以將一個數組渲染到dom結構比如ul 上的li  通過更新model就可以更新頁面。