web前端开发基础jsvueajax day02-vue3.pptx

Web前端开发（AI）Vue3

什么是VueVue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：）userList:[??{id:1,name:谢逊,image:1.jpg,gender:1,job:1},??{id:2,name:韦一笑,image:2.jpg,gender:1,job:1}]基于数据渲染出用户看到的界面

什么是VueVue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：）构建工具状态管理客户端路由组件系统声明式渲染VueRouterPiniaViteVuexWebpackVue核心包开发局部模块改造Vue核心包Vue插件工程化开发整站开发Vue核心包Vue是一个框架，也是一个生态。

什么是VueVue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：）框架：就是一套完整的项目解决方案，用于快速构建项目。优点：大大提升前端项目的开发效率。缺点：需要理解记忆框架的使用规则。（参照官网）

Vue快速入门Vue常用指令Ajax

Vue快速入门01基于数据渲染出用户看到的页面数据驱动视图

Vue快速入门准备引入Vue模块（官方提供）创建Vue程序的应用实例，控制视图的元素准备元素(div)，被Vue控制数据驱动视图准备数据通过插值表达式渲染页面message:HelloVue

01.Vue快速入门.htmlscripttype=module?import{createApp}from;

???????/scriptdivid=app/divcreateApp({???????????????});.mount(#app);??data(){???return{????message:HelloVue???}??}?h1{{message}}/h1

Vue的使用步骤?准备工作引入Vue模块创建Vue的应用实例定义元素(div)，交给Vue控制数据驱动视图准备数据用插值表达式渲染

Vue快速入门Vue常用指令Ajax

Vue常用指令02

常用指令指令：HTML标签上带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。常用指令：指令作用v-for列表渲染，遍历容器的元素或者对象的属性v-bind为HTML标签绑定属性值，如设置href,css样式等v-if/v-else-if/v-else条件性的渲染某元素，判定为true时渲染,否则不渲染v-show根据条件展示某元素，区别在于切换的是display属性的值v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件pv-xxx=....../p

员工列表数据渲染展示

v-for作用：列表渲染，遍历容器的元素或者对象的属性语法：参数说明：items为遍历的数组item为遍历出来的元素index为索引/下标，从0开始；可以省略，省略index语法：v-for=iteminitemskey：作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令。注意：trv-for=(item,index)initems:key=item.id{{item}}/tr

员工列表数据渲染展示

v-for指令作用：列表渲染，遍历容器的元素语法：h1v-for=(item,index)initems:key=item.id注意：想让哪个标签遍历展示多次，指令就加在哪个标签上

员工列表数据渲染展示

v-bind作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。语法：v-bind:属性名=属性值简化：:属性名=属性值动态的为标签的属性绑定值，不能使用插值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义。注意：imgv-bind:src=item.imagewidth=30pximg:src=item.imagewidth=30px

v-bind指令场景：动态为标签属性绑定值(插值表达式，不能在标签内使用)语法：v-bind:属性=变量/:属性=变量

员工列表数据渲染展示job:1:班主任2:讲师3:学工主管4：教研主管5：咨询师

v-ifv-show作用：这两类指令，都是用来控制元素的显示与隐藏的v-if语法