当前位置：网站首页>MVVM模型

MVVM模型

2022-04-23 18:35:00 【_洋】

文章目录

含义
特点

含义

M: 模型(Model) :对应data中的数据
V: 视图(View):模板，对应的是页面
VM: 视图模型(ViewModel) : Vue实例对象

ViewModel简称vm，又对应着vue，所以vue创建的对象经常使用使用变量名vm接收。

eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>学校名称：{
   {name}}</h1>
       <h1>学校地址：{
   {address}}</h1>
    </div>
  </body>
  <script> Vue.config.productionTip = false; new Vue({
       el:'#root', data:{
       name:'百度', address:'北京' } }) </script>
</html>

分析:
在这里插入图片描述

特点

1.data中所有的属性,最后都出现在了vm身上。——数据代理
eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>学校名称：{
   {name}}</h1>
       <h1>学校地址：{
   {address}}</h1>
    </div>
  </body>
  <script> Vue.config.productionTip = false; const vm = new Vue({
       el:'#root', data:{
       name:'百度', address:'北京' } }) console.log(vm); </script>
</html>

在这里插入图片描述

2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。
eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>学校名称：{
   {name}}</h1>
       <h1>学校地址：{
   {address}}</h1>
       <h1>监听：{
   {$listeners}}</h1>
       <h1>_hasHookEvent：{
   {_hasHookEvent}}</h1>
    </div>
  </body>
  <script> Vue.config.productionTip = false; const vm = new Vue({
       el:'#root', data:{
       name:'百度', address:'北京' } }) console.log(vm); </script>
</html>