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

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应用实例中使用，不能再其他位置使用，否则就无法生效定义组件的方法全局组件：可以使用ponent(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章单文件组件单页应用和多页应用单页面多页面页面结构一个页面+许多模块的组件很多完整页面体验效果页面切换流畅，体验效果佳页面切换慢，网速不好的时候，体验效果很不好资源文件组件公共的资源只需要加载一次