vue2_MVVM模型、資料代理
阿新 • • 發佈：2022-04-01
1、MWM模型
mvvm模型：就是把資料和dom通過一箇中間物件進行連線。
- M:模型Model, data中的資料
- V:檢視View,模板程式碼
- VM:檢視模型ViewModel, Vue例項
觀察發現
-
data中所有的屬性，最後都出現在了vm身上 -
vm身上所有的屬性及Vue原型身上所有的屬性，在Vue模板中都可以直接使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初始vue</title> <!-- 引入vue--> <script src="/vueBaseJs/vue.js"></script> </head> <body> <div id="root"> <h1>學校名：{{name}}</h1> <h1>學校地址：{{address}}</h1> <h1>{{$options}}</h1> </div> <script> Vue.config.productionTip=false;//阻止vue啟動時生成生產提示 const vm=new Vue({ el:"#root", data:function(){ return { name:"李四", address:"南充" } } }); console.log(vm); </script> </body> </html>
資料交換：