JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl

Ajax: 与服务器进行数据交换,通过AJAX请求可以给服务器发送请求,并获取服务器响应的数据;异步交互,可以在不重复加载整个页面的情况下,与服务器交换数据并更新部分网页的技术

Axios 简化Ajax的书写

一、Ajax概述

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第1张图片

二、Ajax入门

w3school找原生代码
JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第2张图片

三、案例

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第3张图片

四、Axios异步框架

[对原生的AjAx进行封装,简化书写] 官网

1、使用步骤

很简单,就两个步骤(引入;发送请求)
JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第4张图片

2、Axios请求起别名

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第5张图片

五、JSON

HTML页面和服务端进行数据交互时的一种传输格式。

1、概述

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第6张图片

2、JSON基础语法

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第7张图片

3、JSON数据和Java对象转换

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第8张图片

其中的Java代码用Fastjson的一个API完成
JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第9张图片

4、案例

六、Vue

1、概述

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第10张图片

2、快速入门 | 步骤

步骤:

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第11张图片

3、Vue常用指令

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第12张图片

eg:

v-bing:
JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第13张图片

v-on:
JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第14张图片

v-if v-else=if v-else 、v-show
JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第15张图片

v-for
JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第16张图片

4、Vue生命周期

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第17张图片

七、Element

1、概述

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第18张图片

2、入门(使用步骤)

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第19张图片

3、Element布局

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第20张图片

4、Element组件

(1)常用组件-表格、表单、对话框和表单、分页工具条

页面结构

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第21张图片

5、综合案例

JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第22张图片
JavaWeb——【笔记】2.1JavaWeb_前端_Ajax+Vue+ElementUl_第23张图片

你可能感兴趣的:(笔记,#,JavaWeb,前端,ajax,vue.js)