上手前的一些概念
为啥要用Vue.js
Vue.js 是目前最流行的前端框架之一，专注于视图层，容易上手。
使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定)，提高渲染效率，更专注于业务逻辑，提高开发效率。
这里提一下mvc和mvvm
mvc是后端分层开发的概念，是针对整个项目的设计思想，，将整体分为Model，View和Control三层。
M层（模型）只负责建立数据类，以及相应的CRUD操作。
C层（控制器）负责业务逻辑处理，CRUD操作需要调用M层。
V层（视图）用户能看见就是V层，用户的操作如果需要业务逻辑处理，则请求C层。
mvvm则是前端的分层开发思想，主要专注于视图层的分离，把每个页面，分成了M，V，VM三层。
M层（数据）存放V需要展示的数据。
V层（视图）展示给用户看的Html内容。
VM层，调度者，通过双向绑定分割并关联了M和V。
例如，V要展示一个数组的信息，这个数组在M中，V通过VM获取M中的数组，然后展示。V展示数据后，进行了修改，通过VM，把修改后的数据保存在M中。
MVVM提供了数据的双向绑定，将M和V分离开，减少的DOM操作，提高了效率。
这句话是不是之前见过？没错，Vue.js框架，就是干这个的。
Vue.js与MVVM
写一个简单的vue.js代码
新建一个web应用程序，选择MVC，新建控制器 HomeController，代码
[HttpGet] public ActionResult Vue1() { return View(); }
生成视图，视图中引用vue.min.js包
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Vue.Js学习一</title> <!--1.导入vue包--> <script src="~/Scripts/vue/vue.min.js"></script> </head> <body> <!-- 将来vue的实例会控制这个元素中的所有内容--> <!--Vue实例控制的元素区域，就是mvvm中的V--> <div id="divApp"> <p>{{msg}}</p> </div> <script> //2.创建vue的实例 //当我们导入vue包后，在浏览器内存中，就多了一个Vue的构造函数，我们可以new 出来 //我们new出来的这个v对象，就是Mvvm中的VM var v = new Vue({ el: ‘#divApp‘,//表示当前new的Vue的实例，要控制页面上的哪个区域,这里控制id为divApp的元素 //这个data就是MVVM中的M，保存页面需要的数据 data: //存放el中要用到的数据 { msg: ‘Vue学习第一课!‘//通过vue的指令，就能把数据渲染到页面上，不用再操作DOM元素 } }) </script> </body> </html>
运行结果
f12查看html代码
跟我们以前手动操作dom元素赋值完全一样。
代码很简单，对vue中的mvvm分层做了注释说明，便于理解。
原文：https://www.cnblogs.com/luyShare/p/11527789.html