大前端Vue + Axio

1. 前端知识体系

1.1 前端三要素

  • HTML（结构）：超文本标记语言，据欸的那个网页的结构和内容。
  • CSS（表现）：层叠样式表，设定网页的表现样式。
  • JavaScript（行为）：是一种弱脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。

1.2 结构层：HTML

标签语言，简单，这里省略。

1.3 表现层 CSS

CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等。
换而言之，CSS不具备任何语法支持，主要缺陷如下：

  • 语法不够强大，无法嵌套编写，导致模块化开发中需要编写很多重复的选择器。
  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一门专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件。
即，用一种专门的编程语言，进行web页面样式设计，再通过编译器转换为正常的CSS文件，以供项目使用。
常见的CSS预处理器有：

  • SASS：基于Ruby，通过服务端的处理，功能强大，解析效率高。
  • LESS：基于NodeJs，通过客户端处理，使用简单。功能比SASS简单，但解析效率也低于SASS，但在实际的开发中足够了。

1.4 行为层（JavaScript）

  • JavaScrpt作为一种弱类型脚本语言，其源代码在发送给客户端运行之前不需要经过编译，
    而是将文本格式的字符代码发送给浏览器由浏览器进行解释运行。
  • JS的重要功能：操作浏览器的 DOM 和 BOM 对象。
  • JS原生开发现在已经几乎不使用，主要介绍JS框架。

1.5 浏览器的DOM和BOM

参考链接：https://zhuanlan.zhihu.com/p/372357616

1. DOM

（1）什么是DOM

什么是DOM？
1、DOM，文档对象模型（Document Object Model）。
2、DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。
W3C DOM由以下三部分组成：
核心DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

简单的说，DOM是一种理念，一种思想，一个与系统平台和编程语言无关的接口，一种方法使 Web开发人员可以访问HTML元素！
记住，它是一种理念，不是具体方法。

（2）DOM树结构

  • DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，
  • 在DOM中，HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档，树的每个子节点表示HTML文档中的不同内容。
  • 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document是探索DOM的入口,利用全局变量document可以访问Document对象
    DOM树结构示意图：

（3）DOM对象

  • DOM：文档对象模型（Document Object Model），是W3C定义的一套用于处理HTML和XML文档内容的标准编程接口API。
  • javascript实现DOM接口的对象对应的是document对象，JS通过该对象来对HTML/XML文档进行增删改查。
  • DOM定义了HTML和XML的逻辑结构，将整个页面划分成由层次节点构成的文档，以树的形式来展现。
  • 在BOM和DOM结构层次图中，document对象属于window对象，所以DOM也可以看作是BOM的一部分。
  • DOM对象最根本的是document（实际上是window.document）。

2. BOM

（1）什么是BOM

  • BOM 是 Browser Object Model，浏览器对象模型。
  • DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。

（2）BOM的作用

  • 浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
  • 所以 BOM 就是为了解决这些事情出现的接口。

（3）BOM对象

  • BOM：浏览器对象模型(Brower Object Model)，是用于操作浏览器而出现的API，BOM对象则是Javascript对BOM接口的实现。
  • BOM提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。通过BOM对象可以访问浏览器功能部件和属性。
  • BOM对象由多个对象构成，其中代表浏览器窗口的window对象是Javascript顶层对象，其他BOM对象均为window对象的子对象。被作为window对象的属性来引用。
  • 其他BOM对象都是在window对象中进行操作。
  • BOM对象 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
  • BOM对象最根本的是window。

3. DOM和BOM 重点概要

  1. DOM 和 BOM 都是从思想中诞生的接口:DOM是为了操作浏览器文档（树结构），BOM是为了控制浏览器行为。
  2. DOM 和 BOM 对象是JS中对DOM和BOM接口的实现，也就是通过对象定义了具体的方法和属性。
  3. DOM对象的根本是 Document，BOM对象的根本是Window。
  4. 二者相关关系图：

1.6 JavaScript框架（重要）

  • JQuery：大家所熟知的JS框架，优点是简化了DOM操作，缺点是DOM操作太过频繁，影响前端性能。
  • Angular：Google 收购的前端框架，由一群java程序员开发，其特点是将后台MVC模式搬到了前端，并增加了模块化开发的理念。
  • React：由Facebook出品，一款高性能的JS前端框架，特点是推出了新理念：【虚拟DOM】用于减少真实的DOM操作，在内存中模拟DOM操作。有效的提升了前端的渲染效率。缺点是使用复杂，需要额外学习一门【JSX】语言。
  • Vue：一款渐进式的JavaScript框架，渐进式就算逐步实现新特性的意思，如模块化开发，路由，状态管理等新特性。
    其特点是综合了Angular的模块化 和 React的虚拟DOM的优点。
  • Axios：前端通讯框架；因为Vue的边界很明显，就是为了处理DOM（即浏览器页面的树形结构），所以不具备通讯能力。
    因此，需要一个额外的通讯框架与服务器交互。这里 vue推荐使用 Axios。当然，也可以选择直接使用JQuery提供的AJAX通讯功能。

1.7 JavaScript构建工具

Babel：JS编译工具，主要用于浏览器不支持的的ES新特性，比如用于编译TypeScript。
WebPack：模块打包器，主要用于打包，压缩，合并，以及按序加载。

1.8 UI设计与UI框架

UI即前端页面视图，以框架为基础进行构建：

  • Ant-Design：阿里巴巴出品，基于React的UI框架。
  • Element-ui, iview, ice：饿了么出品，基于Vue的UI框架。
  • Bootstrap：Twitter出品的前端开发开源工具包。
  • AmazeUI：轻量级的HTML5跨前屏框架。

如，可以使用bootstrap可视化布局，创建自己的页面布局。
也可以导入包依赖，整合在框架中使用。
网址：https://www.bootcss.com/p/layoutit/

1.9 前端工程4要素

前端四要素：1.逻辑，2.事件，3.视图，4.通讯
（1）逻辑
通过逻辑判断，页面各个元素的状态。

（2）事件
-浏览器事件：window，document等等。
-Dom事件：crud，修改节点元素等。
-JQuery：封装库

（3）视图
-html：控制网页骨架，对应template
-css：控制网页视图样式，对应style
-js:控制网页动态视图

  • 函数：闭包()()
  • Dom:
    • id, name, tag
    • create, remove
  • Bom:
    • window
    • document

（4）通讯
为客户端与服务器的通讯
-Ajax：封装库
-Axios：封装库

2. Vue基础知识介绍

2.1 Vue简介

百度百科
Vue.js是一套构建用户界面的渐进式框架。
与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。
另一方面，在与相关工具和支持库一起使用时 Vue.js 也能驱动复杂的单页应用。

2.2 Vue核心思想

  • vue综合了模块化开发的思想，借鉴了后端的MVC框架构造。因此，vue体系中也分为View层和Model层。
  • vue的核心思想就是不同模块各司其职，再通过统一的配合调度进行工作。
  • vue中View层为页面层，专注于页面设计与布置，还有数据展示等。不涉及具体的数据处理部分。
  • vue中的Model层为数据处理层，专注于数据的获取与处理，为前端的业务层。这是通过vue对象的属性和方法实现的。
  • vue中各模块的协同开发通过view层中的页面元素与model中的vue对象绑定实现。

2.3 第一个Vue程序

  • 创建.html文件，编写包含vue的如下内容：

  • 浏览器效果如下所示：
    可以看到，通过绑定，view层确实从model层中拿到了数据。

3. Vue语法

3.1 Vue对象的7大属性

  • Vue学习主要有7大属性，8个方法，7个指令，称作787原则。这里我们主要介绍vue对象的7个属性。
  • Model层中的数据处理/操作是通过vue对象的属性和方法实现的。

Vue对象的7大属性：

  • el属性：
    • 用于与页面元素相绑定。
    • 原理来说，用来指示vue编译器从什么地方开始解析vue的语法，类似于占位符。
  • data属性：
    • 用于存放对象的各种数据。
    • 用来组织从view中抽象出来的属性，将数据抽象出来存放在data中。
  • template属性：
    • 用来设置模板，会替换页面元素，包括占位符。
  • methods属性
    • 放置页面中的业务逻辑，js方法一般都放置在methods中。
  • render属性：
    • 创建真实Virtual Dom
  • computed属性
    • 用于计算，并将计算结果视为属性。跟缓存相关
  • watch属性
    • watch：funtion(new, old){}
    • 监听data中数据的变化。
    • 两个参数，一个返回新值，一个返回旧值。

3.2 Vue指令

形如：vue-xxx的一般为vue指令。如vue-on，vue-click等。

3.3 元素绑定/双向绑定

（一）简单的元素绑定：

  • 元素绑定是vue模式下的核心步骤，通过设置共同的id，将view层与model层进行联系。
  • model负责对象的数据读取和处理，view则负责页面设计并拿到数据和展示。
  • 视位置的不同，绑定有不同的方式：

（1）id="xxx"

  • 通过在view层和model层设置共同的id，将view层的页面元素与model层的vue对象进行绑定。
  • 这可以让view层页面元素从vue对象中拿到数据。
  • view层中页面元素：<div id="xxx">，model层vue对象属性：el: "#xxx"

（2）{{}}
{{}}这是vue模式中最常见的绑定，一般用于页面取到后端vue对象中的属性/方法。

（二）双向绑定

  • view层的页面元素与model层对象进行双向绑定，实现数据的双向修改。
  • 即，数据既可以从vue对象中进行修改，也可以从前端页面元素进行修改。

3.4 if与for

（1）if，if-else

（2）for循环拿到数据

  • 代码：
  • 前端效果：

3.5 方法/事件绑定

  • 在vue对象的methods中定义（若干）方法，这些方法可以在页面元素中被使用。
  • 页面元素中通过vue指令调用methods中所定义的方法。
    可以看到，方法调用成功。

4. Vue组件

4.1 组件思想介绍

  • 这是Vue最核心的思想，即定义大量的组件并将其封装，用于可重复构建的高效开发。
  • 在组件构建的过程中，即结合了HTML的template标签对和Vue/JS的对象（包括属性和方法）。
  • 每一个组件都已经定义好了功能，包括页面元素构造等。是高度复杂的。
  • 组件既可以是下载开源的包（node_module这是主流），也可以是自定义的。
  • 组件的调用是通过import相关包实现的，不论这个包是你自己编写并打包的还是直接下载的。
  • 将前端代码变成你看不懂的样子，Vue就成功了。背后的原因就是组件的自定义以及封装。

4.2 组件的构建

  • vue支持自己定义组件，即将一些自定义内容封装为标签对。
  • 后续可以使用标签对，复用这些自定义内容。
  • 组件的定义依赖view层和model层的配合，虽然他本身被定义在model层中。

5. Axios异步通讯

vue专注于页面的构建，因此将通讯完全由Axios模块实现。

6. Vue-cli脚手架与Vue工程结构

Vue-cli脚手架是一个标准的Vue项目框架，其包含Vue工程基本的项目结构，我们可以以此开始快速构建系统。

7. Router路由

Vue框架内使用 Router路由 机制，控制页面的跳转，包括页面之间的参数传递。

Router的机制分为如下几个步骤：

  • 在项目内src文件夹下创建router文件夹，router文件夹内再新建index.js。

    • 按照前端默认习惯：各文件夹下的index文件为其核心配置。以此命名可以被vue程序轻松找到。

  • 在router-index中导入路由的两个基础依赖 Vue 和 Router ：

    • 该依赖需要提前通过 npm下载在node_modules里面。

  • 导入我们编写的页面文件，确定其导入路径并进行命名。（重难点）

    • import XXX from '../views/YYY'后者为页面文件路径，前者为其名字。
    • 这里类似于java对象的导入，将页面导入为对象。

  • 通过Vue对象方法使用Router对象：Vue.use(Router);

  • 新建路由对象，并将其export（即暴露，让其他程序可以调用其内部信息），再在内部配置页面具体所对应的路径。

    • path: '/xxxx'为页面对应的访问路径，components: xxx为该页面在被导入时的名字。
    • 不同页面的路径均定义在（同一个）routes:[{}]中，页面路径定义在{}中，其中用","分割。

  • 在vue项目主程序main.js中使用我们定义的router。（别忘了，vue是一个JS框架，所以主程序自然是main.js）

    • 导入定义好的路由文件 import router from "./router";,由于命名规范，故可以简写路径。
    • 使用我们定义好的路由对象：Vue.use(router)
    • 在全局唯一Vue对象中定义属性 router：

8. Vue + ElementUI

9. Vue工程传参

posted @ 2022-09-16 12:42  青梧成林2022  阅读(191)  评论(0)    收藏  举报