Vue.js使用详解

Posted 2021-05-01 王家涛

Vue.js

---不要太关注技术，技术只是工具！

1.单页面应用程序

Single Page Application

简称SPA

1.1 网站交互方式

• 经典的多页面

例如：京东商城、唯品会

①前后端糅合在一起，开发和维护效率低下

②用户体验一般，点击刷新跳转，等待时间过长。

③每个页面都需要重新加载渲染，速度慢。

④有利于SEO搜索引擎搜索（蜘蛛会爬链接）。

• 现代式的单页面

单页面应用程序的最主要的目的是为了让你的前后端开发能够分离，用户体验反而是其次的。

例如：网易云音乐、Coding

①开发方式好，前后端分离，开发效率高，可维护性好。

• 服务端不关心页面，只关心数据

• 客户端不关心数据库及数据操作，只关心通过接口拿数据和服务端交互，处理页面。

②用户体验好，就像一个原生的客户端软件一样使用。

③只需要加载渲染局部视图即可，不需要刷新整个页面。

④单页面应用开发技术复杂，所以诞生了一堆的开发框架

• AngularJS

• ReactJS

• VueJS

⑤单页面技术已经很好成熟了，但是都无法兼顾低版本浏览器。

⑥但是现在除了一些电商网站，其实已经很少有系统需要去兼容低版本浏览器。

⑦大部分都是IE9以上。

⑧单页面由于数据都是异步加载过来的，所以不会被搜索引擎搜索到，不利于SEO

⑨适合单页面：

手机Web网页

服务端管理系统

1.2 多页面：以服务端为主导，前后端混合

• php案例，.php文件

• 单页面：前后端分离，各司其职

• 服务端只处理数据

• 前端只处理页面（两者通过接口来交互）

1.4 模拟前后端分离开发模式

• 项目立项

• 需求分析

• 服务端的工作

需求分析

设计数据库

接口设计（有时候也需要前端参与其中）

接口（处理数据）开发

• 前端工作

需求分析

写页面

页面写好，写功能

通过接口与服务端进行交互

①前后端分离：多页

 

②前后端分离：单页

2.前端三大框架

单页开发其实是比较复杂的，需要有一定的技术支撑。

• Angular

①09年诞生

②Goole

③它的目的就是让我们开发单页应用程序更方便了

④但是它最主要就是为前端带来了MVVM开发模式

⑤MVVM一句话：数据驱动视图，不操作DOM

• React

①Facebook公司自己开发了一个Web框架

②组件化

• Vue

②早期由个人开发

③Vue借鉴了Angular和React之所长，自己做了一个，后起之秀

3. Vue.js介绍

• Vue.js（读音/vju/，类似于view）是一套构建用户界面的javascript。

• 2015年10月27日，正式发布1.0

• 2016年8月1日，正式发布2.0

• 截止到2017年12月13日最新版本为2.5.10

• 第一个实例解释

3.2 课堂练习

①1.姓名展示:两个文本框,让用户分别输入姓和名,然后将数据实时展示到界面上

传统DOM实现：

使用Vue的双向数据绑定实现：

②

③

④