《Vue.js3Web开发案例教程（在线实训版）》 课件 07 结构渲染 -11-b AJAX与Axios（下）

vue.js

2024.7vue.js主讲：温谦第7章

结构渲染条件渲染指令v-ifDEMO列表渲染指令v-forDEMO第7章

结构渲染

第7章

结构渲染条件渲染指令v-ifv-if与v-elsev-else-ifv-if与v-show第7章

结构渲染DEMO第7章

结构渲染列表渲染指令v-for基本列表迭代对象数组对象属性列表数值范围数组更新检测v-for中的key属性有何作用v-for与v-if一同使用时的注意事项第7章

结构渲染DEMO第7章

结构渲染条件渲染指令v-ifDEMO列表渲染指令v-forDEMO请看第8章——

网页汇率计算器和番茄钟vue.js

2024.7vue.js主讲：温谦第8章

网页汇率计算器和番茄钟DEMO（网页汇率计算器）番茄钟状态图DEMO（番茄钟）第8章

网页汇率计算器和番茄钟

第8章

网页汇率计算器和番茄钟案例一：网页汇率计算器第8章

网页汇率计算器和番茄钟DEMO第8章

网页汇率计算器和番茄钟案例二：番茄钟本案例用到的几个知识点：class属性的绑定条件渲染v-if循环渲染v-for事件处理数据绑定v-model字体图标fontAwesome音频播放器第8章

网页汇率计算器和番茄钟番茄钟状态图出发状态动作到达状态停止状态开始计时状态停止状态编辑编辑状态计时状态停止停止状态计时状态暂停暂停状态暂停状态开始计时状态暂停状态停止停止状态暂停状态编辑编辑状态编辑状态保存停止状态编辑状态取消停止状态编辑状态取消暂停状态第8章

网页汇率计算器和番茄钟DEMO第8章

网页汇率计算器和番茄钟DEMO（网页汇率计算器）番茄钟状态图DEMO（番茄钟）请看第9章——

组件基础vue.js

2024.7vue.js主讲：温谦第9章

组件基础自定义组件与HTML标记DEMO全局组件与局部组件DEMO第9章

组件基础

第9章

组件基础自定义组件与HTML标记组件的名称组件的属性组件的内容在组件中处理事件第9章

组件基础DEMO第9章

组件基础全局组件与局部组件使用范围全局组件：可以在页面中任何位置使用局部组件：只能在定义Vue应用实例中使用，不能再其他位置使用，否则就无法生效定义组件的方法全局组件：可以使用app.component(tagName,options)定义全局组件局部组件：可以通过Vue应用实例中component属性定义局部组件第9章

组件基础DEMO第9章

组件基础自定义组件与HTML标记DEMO全局组件与局部组件DEMO请看第10章——

单文件组件vue.js

2024.7vue.js第10章

单文件组件基础知识DEMO安装VueCLI脚手架工具项目目录结构DEMO（投票页面）单页应用和多页应用DEMO第10章

单文件组件

第10章

单文件组件基础知识每一个文件都是以.vue结尾的，并由template、script和style这3个部分，分别用于定义这个组件的结构、逻辑和样式。遵循了“高内聚、低耦合”的思想，对开发效率的提升有很大的帮助。第10章

单文件组件DEMO第10章

单文件组件安装VueCLI脚手架工具安装淘宝镜像命令如下：npminstall-gcnpm--registry=安装vue-cli脚手架：cnpminstall@vue/cli-g注：生产环境中，一般会对代码进行处理：合并和压缩第10章

单文件组件VueCLIv5.0.8?Pleasepickapreset:(Usearrowkeys)>Default([Vue3]babel,eslint)Default([Vue2]babel,eslint)Manuallyselectfeatures创建完之后，进入项目目录，运行npmrunserve命令，待运行完成之后，会给出一个访问地址，用浏览器访问即可，默认是：http://localhost:8080/。注：组合键“Ctrl+C”可以终止服务器的运行。这是一个菜单，使用键盘上的方向键可以上下移动左侧的大于号，在三个选项中进行选择，默认选中的是第1个选项：Default([Vue3]babel,eslint)。我们直接按回车键确认，即可选中第1个选项。第10章

单文件组件

项目目录结构：第10章

单文件组件动手实践：投票页面第10章

单文件组件DEMO第10章

单文件组件单页应用和多页应用单页面多页面页面结构一个页面+许多模块的组件很多完整页面体验效果页面切换流畅，体验效果佳页面切换慢，网速不好的时候，体验效果很不好资源文件组件公共的资源只需要加载一次每个页面都要加载一次公共资源路由模式可以使用hash，也可以使用history普通链接跳转适用场景对体验效果和流畅度有较高要求的应用不利于SEO（搜索引擎收录，可借助服务器端渲染技术优化SEO）适用于对SEO要求较高的应用内容更新相关组件的切换，即局部更新整体HTML的切换相关成本前期开发成本较高，后期维护较为容易前期开发成本低，后期维护就比较麻烦，可能一个功能需要改很多地方第10章

单文件组件DEMO第10章

单文件组件基础知识DEMO安装VueCLI脚手架工具项目目录结构DEMO（投票页面）单页应用和多页应用DEMO请看第11章——

AJAX与axios（上）vue.js

2024.7vue.js第11章AJAX与Axios（上）AJAX基础概念AJAX技术的好处AJAX传输数据的方式AJAX的组成部分用原生方法获取异步数据DEMO第11章

AJAX与Axios（上）

第11章

AJAX与Axios（上）AJAX的基本概念第11章

AJAX与Axios（上）AJAX技术的好处：减轻服务器的负担，加快浏览速度带来更好的用户体验基于标准化并被广泛支持的技术，不需要下载插件或小程序促进页面呈现与数据分离第11章

AJAX与Axios（上）AJAX传输数据的方式：一种是在服务器上直接生成HTML文档的片段，然后传递到浏览器上，进行局部更新。另一种是服务器上生成的是数据，而不是文档，但是绝对大多数都是用JSON数据格式，而不是XML数据格式。第11章

AJAX与Axios（上）AJAX的组成部分技术在AJAX中扮演的角色JavaScriptJavaScript是通用的脚本语言，用来嵌入在某种应用之中。Ajax应用程序是使用JavaScript编写的。CSSCSS为Web页面元素提供了可视化样式的定义方法。Ajax应用中，用户界面的样式可以通过CSS独立修改。DOM通过JavaScript修改DOM，Ajax应用程序可以在运行时改变用户界面，或者局部更新页面中的某个节点。XMLHttpRequest对象XMLHttpRequest对象允许开发人员从Web服务器上获取数据。数据的格式通常是JSON、XML或者文本。第11章

AJAX与Axios（上）Ajax的组成部分第11章

AJAX与Axios（上）用原生方法获取异步数据letxmlHttp=newXMLHttpRequest();xmlHttp.open("GET","http://demo-api.geekfun.website/vue/ajax-test.aspx",true);xmlHttp.onreadystatechange=()=>{if(xmlHttp.readyState==4&&xmlHttp.status==200)this.msg=xmlHttp.responseText;};xmlHttp.send(null);第11章AJAX与Axios（上）DEMO第11章

AJAX与Axios（上）AJAX基础概念AJAX技术的好处AJAX传输数据的方式AJAX的组成部分用原生方法获取异步数据DEMO请继续学习第11章——

AJAX与Axios（下）vue.js

2024.7vue.js主讲：温谦第11章AJAX与Axios（下）认识AxiosAxios的基础用法DEMOGET与POSTDEMO嵌套请求与并发请求DEMOAxios的进阶用法实例的相关配置错误处理和拦截器DEMO实现自动提示的文本框模拟百度的“数据加载中”效果第11章

AJAX与Axios（下）

第11章AJAX与Axios（下）认识Axios如果使用VueCLI脚手架工具创建的项目，可以使用npm安装Axios：npminstallaxios--save如果为了调试一些简单页面，也可以直接在页面中引入axios.js文件，或者直接使用CDN：<scriptsrc="/axios/dist/axios.min.js"></script>第11章AJAX与Axios（下）Axios的基础用法importAxiosfrom'axios'Axios.get(url[,config]).then()Axios.post(url[,data[,config]]).then()第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）GET与POSTGET和POST区别POST请求参数的传递方式HTTP方法与RESTGETPOSTPUTDELETEOPTIONSHEADTRACECONNENT第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）嵌套请求与并发请求并发请求：

Axios.all([Axios.get(get1),Axios.get(get2)]).then(Axios.spread((Res1,Res2)=>{console.log(Res1,Res2)}))嵌套请求：

//外层Axios.get(URL).then(//内层(response)=>Axios.get(URL,参数).then((response)=>{

//请求成功后要执行的内容}))第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）Axios的进阶用法创建实例其语法如下：constaxios=axios.create({baseURL:'http://localhost:8080',timeout:1000,//设置超时时长。默认请求未返回超过一秒，接口就超时了,//其他配置项……});第11章AJAX与Axios（下）实例的相关配置配置项举例说明url'/user'用于请求服务器的URLmethod'get'创建请求时使用的方法，还可以是'post','put','patch','delete',默认是getbaseURL'http://localhost:8080'将自动加在url前面，除非url是一个绝对URLheaders{'content-type':'application/x-www-form-urlencoded'}是即