mvvm就是前段交互界面，不用返回后端数据处理

摘要：哈哈哈Vue.js 入门1. 细说MVC和MVVM设计模型 (1).MVC: [1]. 背景:Web项目需求日益复杂,为了使项目简化,采用了MVC架构,实现了前端UI展示, 与后端业务逻辑处理的完全分离,利于前后端开发人员分工

哈哈哈

Vue.js 入门

1. 细说MVC和MVVM设计模型

(1).MVC:

[1]. 背景:Web项目需求日益复杂,为了使项目简化,采用了MVC架构,实现了前端UI展示,

与后端业务逻辑处理的完全分离,利于前后端开发人员分工协作,提升效率

[2]. MVC:是Model-View-Controller的缩写;

[3]. M:Model,模型,主要处理与数据库相关的业务逻辑;

V:View,视图,主要负责数据在客户端/浏览器上的展示;

C:Controller:控制器,视图与模型之间传递消息,例如接受请求,选择模型,渲染视图等;

[4]. MVC基本的运行流程是:

1. 视图发起请求-->控制器接收请求-->转发给对应模型处理-->模型将结果返回到控制器-->控制器返回到视图;

2. 简单描述: View-->Controller-->Model-->Controller-->View, 即 V-C-M-C-V;

3. 整个过程是封闭的,单向的,视图与模型之间不允许直接直接通讯,必须通过控制器进行;

[5]. MVC开发的基本原则:

1. 需要服务器端配合,模型Model与控制器Controller都在服务器端完成;

2. 服务器处理过的数据,必须通过JavaScript在前端进行渲染;

2. '厚模型,薄控制器',业务逻辑尽可能写到模型中,控制器仅调用模型提供的接口即可;

(2).MVVM:

[1].随着前端页面开发越来越复杂,用户与数据的交互也越来越频繁,而很多交互都是临时性的,没有必要每一次都要

和服务器中的模型对象进行交互,但是传统的jQuery等函数库又力不从心,这时MVVM模型就应运而生啦。

[2].MVVM: 是Model-View-ViewModel的缩写;

M:Model层, V:View层, VM: ViewModel层;

[3].Model:JavaScript对象/模型, View:HTML代码/模板,各司其职,完全分离

[4].VM层:负责Model与View之间的交互,完全使用JavaScript进行编写;

[5].基本流程: VM层根据Model数据来更新View,或者根据View来更新Model,这个过程是双向的,即双向数据绑定;

[6].服务器端只负责更新Model即可,而Model就是一个JavaScript对象,所以服务器只需要返回可被Model解析的

数据即可,例如:json,html等,这样就完全实现了面向接口/API编程。

[7].Vue.js就是一个完全采用了MVVM机制的前端开发框架,采用从底层向上的渐进式开发思想,易学易用!

----------------------------------------------------------------------------------------------

2. Vue.js 是什么? 如何导入到项目中?

[1].Vue.js作者也是中国人:尤雨溪

1.中国上海复旦附中毕业后,去了美国上大学,学的是艺术,并获得艺术硕士学位,

2.之前在谷歌工作,2014年开发出了Vue.js前端库,这是一个用来快速构造Web界面的javascri库,通过简洁的API提供高效

的数据双向绑定和灵活的组件式开发系统。

3.2016年9月,以技术顾问身份加盟阿里巴巴Weex团队;

[1].打开Vue.js官网(中文版): cn.vuejs.org,点击头部导航区的"学习",选择"教程",再点击"安装";

[2].Vue不再支持IE8及以下版本,例如IE6,IE7这类老古董,大家开发时不必再考虑,除非客户指定必须兼容;

[3].官方提供了三种安装方式:

1.<script>标签导入: 有二个版本可以选择

(1). 完整开发版本:包括警告与调试模式,推荐学习与开发阶段使用;

(2). 压缩精简版本:删除警告等多余内容,非常短小,适合线上生产环境使用;

2.命令行方式:

(1). npm: 需要Node.js支持,配合前端资源打包器Webpack使用;

(2). cli: 官方提供的脚手架工具,进一步简化了vue项目创建的难度,更加智能和自动化;

我们的课程采用传统的<script>标签引入方式,将源码下载的本地,当然也可以使用cdn引入:

[4].测试是否引入成功

----------------------------------------------------------------------------------------------

3. 基本术语:

1. 实例: Vue.js本身就是一个构造函数,可以用来创建对象,使用Vue第一步,就是要创建一个Vue实例:new Vue();

2. 实例参数: Vue()接受一个js字面量对象做为参数,所有的功能,都以对象属性的方式进行设置;

3. 挂载点: Vue实例的作用域,本质上就是通过css选择器获取到的页面元素;

4. 模板: 带有html标签的字符串;

5. 值/变量: 挂载点中的文本内容;

6. 属性: 描述模板或html标签;

7. 事件: 模板或元素上发生的系统或用户事件,例如点击,移动等;

批改老师：天蓬老师批改时间：2019-01-01 09:15:04
老师总结：你把笔记几乎全部照抄过来了, 不知你是否理解了?

mvvm就是前段交互界面，不用返回后端数据处理

热门词条