第1章 Vue.js概述(读书笔记)
1.1Web前端技术的发展
早期静态页面使用HTML语言编写
1995年js的出现使得网页有了动态效果
用户需求扩大,根据用户的请求动态生成页面信息:ASP、JSP、PHP
服务器端网页动态交互功能的不断丰富,使后端代码越来越复杂,为了更好管理后端逻辑,出现大量MVC框架
MVC(Model-View-Controller),MVC架构有助于将应用程序分割成若干逻辑部件,使程序设计变得更加容易。MVC架构提供了一种按功能对各种对象进行分割的方法,目的是降低各对象间的耦合程度
Ajax:改变传统的用户请求-等待-响应,采用异步交互机制避免了用户对服务器响应的等待;改变用户请求-服务器响应-页面刷新的用户体验方式,提供页面局部刷新的实现机制
Ajax的全称:Asynchronous Javascript and XML ,就是异步JS&XML
Ajax是多种技术的组合:
1、使用XHTML和CSS呈现数据
2、使用DOM实现动态显示和交互
3、使用XML和XSLT实现数据交换与操作
4、使用XMLHttpRequest实现异步数据的发送与接收
5、使用JS将XHTML\DOM\XML\XMLHttpRequest绑定
然后,出现了很多框架和库:
jQuery、dojo、Ext JS 、Echart
HTML 5
React、Vue、Angular
使得网站从web site 进化成 Web app ,开启网站应用SPA时代
SPA单页应用程序,是指只有一个Web页面的应用,浏览器在一开始会加载必需的HTML、CSS、JS,所有操作都在这个页面完成,由js来控制交互和页面布局 的刷新
优点:
1、前后端分离
2、良好的用户体验:用户无需重新刷新页面,数据通过AJAX 异步获取
3、减轻服务器压力:服务器只需要提供数据即可
4、共用一套后端程序代码:不用修改后端代码,可以同时用于web、手机、平板
缺点:
1、初次加载耗时长:为了展现页面效果需要在加载页面时将JS\css统一加载
2、不能使用浏览器前进后退
3、SEO难度高
目前前端的技术体系
代码管理仓库 | Github |
包管理工具 | NPM 、Yarn |
脚本体系 | ECMScript 6、TypeScript、Babel |
相应的处理技术 | HTML5、 CSS3 |
前端框架 | React、Vue、Angular |
打包工具 | Webpack |
后端框架 | 以node.js为基础的Express和Koa |
1.2MV*模式
MVC->MVP->MVVM
1.2.1、MVC
1.2.2MVP
MVP:(Model-View-Presenter)
MVP中View和Model是通过Presenter来通信的,所有的交互都发生在Presenter
1.2.3MVVM
MVVM的核心是数据驱动,View Model是View和Model的关系映射,View Model是一个值转化器,负责转化Model中的数据对象,使得数据变得更加易于管理和使用。
最核心的特性就是数据双向绑定,view model感知变化,通知view或者model,
1.3初识Vue.js
双向绑定
view model中由两个工具:DOM Listeners和DataBindings
从View看:Dom Listeners监测页面上Dom元素的变化,并修改model的数据
从Model看:Data Listeners检测Model,Model中的数据更改时,Dom数据也会更新
<!DOCTYPE html>
<html>
<head>
<script src="vue.js"></script>
</head>
<body>
<!--View-->
<div id="app">
<p>{{message}}</p>
</div>
<script>
//Model
var modelData={
message:'hello'
}
//创建一个View Model实例
new Vue({
el:'#app',//el属性指向View
data:modelData//data属性指向Model
})
</script>
</body>
</html>
上一篇: 画水波纹。 博客分类: iOS Objective-C
下一篇: reverse-box 攻防世界