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.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 前端完整代码
vue.js测试
{{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的核心。
