MVVM思想(vue)

vue了解

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

vue.js 是目前最火的一个前端框架,react是最留下的一个前端框架(React除了可以开发网站,海可以开发手机App,vue语法也是可以用于手机App开发,需要借助Weex)

vue,.js是掐断主流框架之一,和Angular.js React.js 并称前端三大主流框架

vue.js是一套构造用户界面的框架,只关注视图层

前端:主要负责MVC中V这一层,主要是和界面打交道


原生js (考虑兼容性)

jq类库 (屏蔽兼容,但string拼接难)

前端模板引擎 (解决string,但导致重复性大,效率低)

Angular.js/Vue.js(帮助我们减少不有必要的dom操作,提高渲染效率,通过框架提供的指令,只需要关心业务逻辑)

框架和库的区别

  • 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
    • eg node 中的 express;
  • 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求
    • eg 从Jquery 切换到 Zepto;从 EJS 切换到 art-template

MVC和MVVM

图解
在这里插入图片描述

项目的入口模块,一切请求都要先进入这里进行处理(app.js没有路由分发功能,需要调用router.js模块进行路由的分发处理)

router.js

路由分发处理模块:为了保证路由模块的职能单一,router.js只负责分发路由,不负责具体业务逻辑处理,只能调用controller模块进行特务逻辑处理

controller

这是业务逻辑处理层,在这个模块,封装了一些具体业务逻辑处理的逻辑代码,但也是为了保证职能单一,此模块只负责处理业务,不负责处理数据的CRUD,如果涉及到GRUD,需要调用Model层

model层

职能单一,只负责数据库,执行对应的Sql语句,进行数据CRUD
C:create
R: read
U: updata
D: delete

view视图层
每当用户操作了界面,如果需要进行业务的处理,都会通过网络请求,去请求后端服务器,此时我们的这个请求,就会被后端的App.js监听到

MVVM代码分块

  • V new出来的vue实例,会控制body元素中的所有内容, Vue实例所控制的元素区域就是V

  • VM 导包后创建一个vue实例,在浏览器内存中就多了一个vue构造函数,我们new出来的这个vm对象,就是我们MVVM中的VM调度者

  • M data属性存放的是el要用到的数据,这里的data就是M,专门保存每个页面的数据

var vm = new Vue ({
	el: '#app' ,   //表示当前我们new的这个实例,要控制页面上的哪个区域
	data : {   
			msg: '欢迎学习vue',	//能把数据渲染到页面上,不需要手动操作dom元素
			}
    methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
})
原文地址:https://www.cnblogs.com/furfur-jiang/p/12238737.html