第1章 Vue.js概述（读书笔记）

最新推荐文章于 2023-05-23 17:27:05 发布

@蛤

最新推荐文章于 2023-05-23 17:27:05 发布

阅读量228

点赞数

分类专栏：《Vue.js从入门到实践》学习记录

本文链接：https://blog.csdn.net/weixin_43894901/article/details/109569233

版权

《Vue.js从入门到实践》学习记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.1Web前端技术的发展

早期静态页面使用HTML语言编写
1995年js的出现使得网页有了动态效果
用户需求扩大，根据用户的请求动态生成页面信息：ASP、JSP、PHP
服务器端网页动态交互功能的不断丰富，使后端代码越来越复杂，为了更好管理后端逻辑，出现大量MVC框架

MVC（Model-View-Controller），MVC架构有助于将应用程序分割成若干逻辑部件，使程序设计变得更加容易。MVC架构提供了一种按功能对各种对象进行分割的方法，目的是降低各对象间的耦合程度

Ajax:改变传统的用户请求-等待-响应，采用异步交互机制避免了用户对服务器响应的等待；改变用户请求-服务器响应-页面刷新的用户体验方式，提供页面局部刷新的实现机制

Ajax的全称：Asynchronous Javascript and XML ,就是异步JS&XML
Ajax是多种技术的组合：
１、使用ＸＨＴＭＬ和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>

@蛤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第1章 Vue.js概述（读书笔记）

1.1Web前端技术的发展早期静态页面使用HTML语言编写1995年js的出现使得网页有了动态效果用户需求扩大，根据用户的请求动态生成页面信息：ASP、JSP、PHP服务器端网页动态交互功能的不断丰富，使后端代码越来越复杂，为了更好管理后端逻辑，出现大量MVC框架MVC（Model-View-Controller），MVC架构有助于将应用程序分割成若干逻辑部件，使程序设计变得更加容易。MVC架构提供了一种按功能对各种对象进行分割的方法，目的是降低各对象间的耦合程度Ajax:改变传统的用户请求
复制链接

扫一扫