一VUE第一部分1vue基础概念Vue是一款用于构建用户界面的渐进式的框架一渐进式就是假如你想单独使用某个部分的功能都是可以的比如我只想使用声明式渲染或者单独使用构建工具都是可以的目的就是为以后的数据库和前端的交互而准备的二框架框架就是一套完整的项目解决方案用于快速构建项目优点能提高前端项目的开发效率缺点需要记忆使用规则2vue的基本使用一前期准备导包需要引入vue模块官方提供直接使用网址地址访问直接导入即可创建vue的程序应用重置视图的元素准备元素被vue控制在script的标签内使用src引入模块并声明引入的是模块然后就可以直接调用这个模块的方法在script的后面还需声明要控制的是哪一个标签内的元素一旦声明完只有被指定的标签才可以使用这个模块下的东西二驱动视图在script标签内创建数据然后通过键值的方式在指定标签内直接使用渲染要使用插值表达式使用两个大括号包裹键值body !-- //创建一个标签然后使用vue的方法 -- div idapp !-- //使用插值语法将数据插入到标签中 -- h1{{messages}}/h1 /div !-- 先声明这个导入的东西是一个模块然后在使用src导入地址使用官方的网址 -- script typemodule import { createApp, ref } from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ data() { return { // 使用键值对来赋值然后调用直接使用键值对的key就行 messages:hello vue } }, // 需要指定可以使用的标签类型 }).mount(#app); /script /body3vue的常用方法一常用方法介绍二v-for作用列表渲染遍历容器的元素或者对象的属性语法标签类型 v-for(item, index) in items: keyitem.id {{ item }} /标签类型参数解释items就是数据对应的数组来自于数据库然后传递给vue然后直接调用item表示索引到的元素当前的元素index唯一的索引表示就是索引012.....可以选择不写假如用不上就不写了key数据的唯一标识其实就是mysql传入的索引建议是写但可以不写注意key和index不一定是一样的所以不要将index赋值给key使用方法哪一个标签是要多次展示就写在这个标签内!-- 表格主体内容 -- tbody !-- 因为是tr这个标签需要展示多次所以需要使用v-for -- !-- 参数解释1当前索引到的数据 2索引值 3需要遍历的数组 4数组内的数据自带的唯一标识 -- tr v-for(e, index) in empList :keye.id td{{e.name}}/td td{{e.gender1?男:女}}/td !-- 细节插值表达式不可以在标签内使用 -- tdimg classavatar :srce.image alte.name/td td{{e.job}}/td td{{e.entrydate}}/td td{{e.updatetime}}/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr /tbody三v-bind作用就是为动态标签html绑定值如设置hrefsrcstyle样式等语法v-bind: 属性名 属性值 简化: 属性名 属性值 注意动态绑定标签内的属性属性值不可以使用 插值表达式得使用v-bind指令而且属性值必须是date里面的值!-- 细节插值表达式不可以在标签内使用 -- !-- 使用v-bind来绑定动态的属性值两种方法 1. v-bind:srce.image 2. :srce.image 使用v-bind绑定动态属性值v-bind:属性名属性值 -- tdimg classavatar v-bind:srce.image :alte.name/td四v-show | v-if作用都是来控制元素是否要被渲染出来v-if 语法v-if“表达式”表达式成立返回true不成立返回false原理判断元素是否移除还是保留成立就保留失败直接移除这个代码场景要么展示要么不展示就是场景很少切换的就使用可以配合 v-else 或者 v-else-if 进行条件判断v-show语法v-show“表达式”表达式成立返回true不成立返回false原理判断元素是否被显示出来成功就显示不成功就隐藏场景经常需要切换场景的就需要注意v-if 后面可以接多个 v-else-if使用 v-else前面一定要有 v-if 或者 v-else-if1v-if 的使用td !-- 使用多个v-if来判断显示哪一个职位 -- span v-ife.job1班主任/span span v-else-ife.job2讲师/span span v-else-ife.job3学工主管/span span v-else-ife.job4教研主管/span span v-else-ife.job5咨询师/span span v-else其他/span /td底层其他的元素代码都被删除只有判断结果为true的保留下来2v-show使用!-- 使用v-show来显示职位 -- span v-showe.job1班主任/span span v-showe.job2讲师/span span v-showe.job3学工主管/span span v-showe.job4教研主管/span span v-showe.job5咨询师/span底层其他元素被设置displaynone被隐藏起来但是代码还是存在五v-model | v-on1v-model目的是获取用户输入数据的值需要在date() 内部定义一个数据对象用于存储用户输入的数据v-model 中数据对象 和 用户输入的数据 是双向的用户输入的值会影响对象对象被修改值也会影响用户的输入框语法input typetext idname namename on-modelsearchFrom.namelabel forname姓名/label input typetext idname namename v-modelsearchFrom.name placeholder请输入姓名2v-on目的是对事件进行绑定比如按钮点击时发生的事件语法v-on事件名称“方法名”简化 事件名称“方法名”需要定义一个和date同级的方法method这个method就是用来专门定义方法的细节假设在method里面的方法要调用date的数据直接使用this就表示本级的对象!-- //给按钮绑定事件监听事件名就是点击然后发生事件是handleSearch -- button typebutton v-on:clickhanldeSearch查询/button !-- 给事件清空绑定事件事件名就是点击发生事件就是将数据对象清空方法名handleClear -- button typebutton v-on:clickhandleClear清空/button都需要将方法定义在method并且需要和date是同一级的位置methods: { hanldeSearch(){ //表示假如点击查询就会直接将用户输入的数据打印在控制台 console.log(this.searchFrom); }, handleClear(){ // 表示点击清空将数据对象清空 this.searchFrom{ name: , gender: , position: } } },4Ajax概念就是向服务端发送请求数据时不能干等服务器的回应而是可以先做其他事情作用数据的交换通过Ajax可以给服务端发送请求并获取服务端回应的数据异步交互可以在不刷新界面的情况下与服务器交互的数据同步更新部分页面的技术比如搜索的提醒用户名是否重复的验证....一使用方法推荐使用简化方法因为现在在开发前端都在这么使用步骤引用axios的 js 文件官网使用 axios 发送请求数据并获取响应结果1使用 get 方法请求服务端//发送GET请求 document.querySelector(#btnGet).addEventListener(click, () { // 直接使用axios发送请求然后获取服务端返回的数据 axios.get( // 请求的服务端的地址--这个地址只能是get请求才有用 urlhttps://mock.apifox.cn/m1/3083103-0-default/emps/list, // 请求的参数 不写了假如需要传参数直接拼接到url后面就可以格式为url?keyvaluekey2value2 ).then((result){ // 这里就是获取服务端的返回结果,但是reslut获取的时服务端的所有数据可以获取其中的date的数据 console.log(result.data); }).catch((err){ //这里就是请求失败返回的数据 console.log(err); }) })2使用post方法请求服务端//发送POST请求 document.querySelector(#btnPost).addEventListener(click, () { axios.post( // 请求的服务端的地址--这个地址只能是post请求才有用 urlhttps://mock.apifox.cn/m1/3083103-0-default/emps/update, // 请求的参数不写了假如需要传参必须是字符串类型的格式为keyvaluekey2value2 // dataname张三gender1job1entrydate2023-06-09 ).then((result){ // 这里就是获取服务端的返回结果,但是reslut获取的时服务端的所有数据可以获取其中的date的数据 console.log(result.data); }).catch((err){ //这里就是请求失败返回的数据 console.log(err); }) })2使用axios的简化方法script //发送GET请求 document.querySelector(#btnGet).addEventListener(click, () { // 直接使用axios发送请求然后获取服务端返回的数据 //直接将地址写在axios.get()中就行假如需要传参直接拼接到地址后面就可以格式为url?keyvaluekey2value2 axios.get(https://mock.apifox.cn/m1/3083103-0-default/emps/list).then((result){ // 这里就是获取服务端的返回结果,但是reslut获取的时服务端的所有数据可以获取其中的date的数据 console.log(result.data); }).catch((err){ //这里就是请求失败返回的数据 console.log(err); }) }) //发送POST请求 document.querySelector(#btnPost).addEventListener(click, () { //同理但假如需要传参就需要在地址后面加上参数格式地址,参数 axios.post(https://mock.apifox.cn/m1/3083103-0-default/emps/update,).then((result){ // 这里就是获取服务端的返回结果,但是reslut获取的时服务端的所有数据可以获取其中的date的数据 console.log(result.data); }).catch((err){ //这里就是请求失败返回的数据 console.log(err); }) }) /script2async | await作用就是在申请数据时不使用异互同步的方法因为假设在大型开发中可能在申请获取数据时直接先往下执行使用到需要服务端返回的数据但此时服务端数据还未发送回来会导致出错所以需要等待的操作细节使用await的前提就是需要给这个方法定义async的修饰词然后使用await就会等待到服务端发送数据回来才会继续往下执行async hanldeSearch(){ //表示假如点击查询就会直接将用户输入的数据打印在控制台 // console.log(this.searchFrom); //需要使用axios的方法向后台发送请求然后将结果赋值给empList //引入的参数就是地址?参数名参数值参数名参数值.... let res await axios.get(https://web-server.itheima.net/emps/list?name${this.searchFrom.name}gender${this.searchFrom.gender}job${this.searchFrom.job}); this.empListres.data.data; },二vue的八个生命周期1生命周期解析官方的生命周期图beforeCreate vue的创建前Created vue的创建beforeMount 载入前Mount 完成挂载重点beforeUpdate 数据更新前updated 数据更新完毕beforeUmount 组件销毁前umounted 组件销毁后2使用方法八个生命周期是自动运行的假设需要在某个生命周期做某些事情就需要调用这个生命周期例如想在页面加载完成时顺便向服务端请求一次数据就直接调用mount的方法在方法内向服务端请求数据需要定义在script的标签内并且必须和date是同级标签//定义一个钩子函数mounted表示页面加载完成之后会执行这个方法 mounted(){ //调用一次hanldeSearch的方法目的就是页面加载完成之后会自动调用这个方法 this.hanldeSearch(); },