上手前的一些概念
为啥要用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分层做了注释说明,便于理解。
下一篇