Vue学习日记之MVVM与vue实例

1、MVVM简述

   首先我们要简单了解，MVVM的概念，关于MVVM，它是一个前端的框架概念，是从后端的MVC的一个变种，要注意到MVVM是由Model+View+ViewModel组成，MVC是由Model+View+Controll组成，这两者的M不同，MVVM中的M是前端的数据，MVC中的M是数据处理层，直接与数据库交接。要想得到更多的MVVM概念可参看我的MVVM博客https://blog.csdn.net/qq_41889956/article/details/88929306

2、Vue实例

2.1 导包

  接下来，我们正式进入学习Vue实例教程，要创建一个Vue，我们需要向Jquery一样导入相关的类库。若是不想如此导入或者你没有相关的类库的话，也可以使用CDN导入。

2.1.1 本地导入包

   直接使用导入本地的包，目前版本最新的是2.6.10

2.1.2 CDN方式导包

  在你没有vue.js文件或者觉得vue.js文件过大时，可以使用CDN方式导入

  或

2.1.3  两者区别

  这两者最主要的区别是，一个是通过本地导入，没网时也能使用，比较安全，速度也比较快，但是相应的，在版本发生重大变化的时候需要你进行手动更新。一个是通过CDN导入，速度相对比较慢，但是相应的能得到每次的版本更新，但是只要CDN一挂可，那么你的网站就由部分功能无法实现。

   一般而言推荐使用本地下载引入

2.2 创建Vue实例

  当我们导入vue.js包之后，就多了一个全局构造函数vue，我们通常建立vue的实例函数，来达到我们需要的效果

2.2.1 创建实例

   

  var vm=new Vue({});

2.2.2 添加el属性

var vm=new Vue({
 el:"#app",      //这个el是element的简称，就是一个vue实例所作用的element节点
                 //app是element节点的id
})

  这个el是element节点的简称，表达的就是选择的element节点，通过"#app"id进行选取，前面我们说了vue这个框架目的之一是解放DOM操作，不让我们去故意渲染DOM元素，从而让我们去关注视图层，这个el就是选择了el元素，与原生DOM中的

var div1=document.getByElementId("app");

类似

  当然了，如果你不使用id标识一个element元素的话，也可以使用class="app"，相对应的el就变成

var vm=new Vue({
  el:".app"    //变成.app了
})

2.2.3 添加data属性

var vm=new Vue({
  el:"#app",
  data:{    //这里的data是存储前端数据的地方
  message:"看，我显示出了message中的信息"      
}
})

  data中存放的是前端数据中的信息，我们可以输出此信息到绑定的element节点中。

2.2.4 前端完整代码

    
    
    


  
    
   
{{message}}
  <！--输出信息-->
  

2.2.5  运行结果

  

  之前说了vue里面还有一个特点，就是双向数据绑定，就是当你在ViewModel中修改数据时，View中显示的数据也会改变。

  让我们打开控制台

查看页面，我们会发现，呈现给用户的页面变化了！

这就是双向数据绑定！！！

3  MVVM与Vue实例的关系

前面我们说过Vue时典型的MVVM框架，那么为什么这么说呢？就让我们来分析一下前面写的Vue实例

3.1 M

  MVVM中M是model是数据层，存放的是前端的数据，自信查看vue实例我们不难发现，Vm中的data属性就是存放了前端的数据

  data就是Vue实例中的model

  

3.2 V

  MVVM中的V是View，用户能够直接看到的部分，对应的Vue实例中的部分是、

  

3.3 VM

  MVVM中的VM是ViewModel，之前我们说过了ViewModel是介入View和Model之间，是一个数据的中转站，它能将Model中的数据进行转换，生成符合View层的数据模型，它是实现双向绑定的关键。

  这是MVVM中最重要的一部分也是Vue的核心。