MVVM思想、MVCとの区別、およびMVVMフレームワークとVUEコードとの対応関係

6652 ワード
Veeまとめ
MVVM
定義:MVVMは、Model-View-View Modelの略、すなわちモデル-ビュー-ビューモデルです.
モデル(Model):バックエンドで渡されるデータを指します.
ビュー(View):表示されるページを指します.
ビューモデル(ViewModel):viewとmodelをつなぐブリッジであるmvvmモードのコア.2つの方向があります(DOMイベントのリスニングを実現します):
   1. modelをviewに変換する(バックグラウンドで渡されたデータをユーザが見たページに変換する).viewをmodelに変換(表示するページを変換)
ポイント:この2つの方向が同時にデータと呼ばれる双方向バインドを実現する場合.
まとめ:MVVMのフレームワークの下でビューとモデルは直接通信することができなくて、それらはView Modelを通じて通常1人のobserver観察者を実現しなければならなくて、データが変化する時、View Modelはデータのこのような変化を傍受することができて、それから対応するビューに自動的に更新することを通知して、ユーザーがビューを操作する時、View Modelもビューの変化を傍受することができて、その後、データの変更を通知することで、実際には双方向バインドが実現されます.
MVC(バックグラウンド用が多い)
定義:MVCはModel-View-Controllerの略記、すなわちモデル-ビュー-コントローラであり、MとVの意味はMVVMのMとVの意味と同様であり、Cはページのビジネスロジックを指す.
  MVCを使用する目的はMとVのコードを分離することであり,MVCは一方向通信,すなわちViewとModelであり,Controllerによって上から下へ引き継ぐ必要がある.
MVVMとMVCの違い
 MVVMとMVCの違いはVMが完全にCに取って代わったわけではない.ViewModelの存在の目的は、Controllerに示されているビジネスロジックを抽出することであり、Controllerに取って代わるのではなく、他のビュー操作はControllerに置くべきであり、つまりMVVMが実現するのはビジネスロジックコンポーネントの再利用である.  MVCの出現時間が比較的に早いため、フロントエンドはそんなに成熟していないで、多くの業務ロジックもバックエンドで実現して、だからフロントエンドは本当の意味でのMVCモードがありません.
MVVMフレームワークとVUEコードの対応関係
注意:ここは皆さんに見てもらいやすいので、vueを直接引用します.js、プレゼンテーションができます.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  	<!-- 1.  Vue  -->
    <!--       Vue   window      Vue     -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.         ，           HTML     Vue   -->
    <!--    new    Vue      div  ，  MVVM  View  -->
    <div id="app">
        <p>{{msg}}</p>
    </div>

    <script>
        // 3.  Vue   
        // const vn = new Vue({    })
        //   ，new Vue（）   vm  ，  MVVM  VM，         （   ）

        const vm = new Vue({
            el:'#app',//element    ，el       vm              
            data:{//           
                //  new Vue    ，        ，data       ，  MVVM  Model
                msg:'Hello XiaoMeiZi!'

            }
        })
    
    </script>
</body>
</html>
シンプルなstring実装
Vueはページング効果を実現する