1.Vue框架渐进式的JS框架,作者尤雨溪必须要引用的一段代码script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script2.Vue插值语法{{ }}是vue的插值语法可以获取data的数据同时支持简单的逻辑运算和js函数!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script titleDocument/title /head body div idapp h1{{name}}:{{age}}/h1 /div /body /html script //插值语法本质上是一种获取值的用法通过{{}}的写法获取相应的data中的内容 new Vue({ el:#app,//id为app data:{ name:张三, age:30 } }); /script3.Vue指令ES61.导入vue.js文件2.vue实例对象只有一个并且需要挂载到页面中的某个元素一般是div元素3.datavue实例中用于存储数据的属性3.1 v-text、v-htmlv-text用来获取data中数据将数据以文本的形式渲染到指定标签内部v-html用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script titleDocument/title /head body div idapp h1{{text}} /h1 h1 v-texttext /h1 h1 v-htmlhtml /h1 /div /body /html script new Vue({ el:#app, data:{ text:a href我是v-text显示的内容/a, html:a href我是v-html显示的内容/a } }); /script代码中data的text虽然用了a href的语法但是在h1 v-texttext /h1显示的依旧是文本格式3.2 v-onv-on的案例通过两个按钮控制页面数字增加和减少v-on中较为重要的是v-on:click以及click一般情况下可以直接只用click来引用方法!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script /head body div idapp button v-on:clickincrease/button span{{count}}/span button clickdecrease-/button /div /body /html script new Vue({ el:#app, data:{ count:1 }, methods:{ increase(){ this.count; }, decrease(){ this.count--; } } }); /script3.3 v-ifv-if用来控制页面元素是否展示!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script /head body div idapp span stylecolor: red v-ifnameFlagadmin/span a href# v-ifloginFlag clicklogin登录/a a href# v-iflogOutFlag clicklogOut退出/a /body /html script new Vue({ el:#app, data:{ //上方的v-ifnameFlag以及其他两个v-if都是控制页面内容是否展示 // v-ifnameFlagnameFlag:false则表示admin这个内容最开始不展示出来 nameFlag:false, loginFlag:true, logOutFlag:false }, methods:{ //clicklogin是v-on的写法将上方的登录与login方法绑定 login(){ this.reverse(); }, logOut(){ this.reverse(); }, reverse(){ //登录和退出时的ture和false情况刚好相反因此写了reverse方法login和logOut直接调用reverse方法即可 this.nameFlag!this.nameFlag; this.loginFlag!this.loginFlag; this.logOutFlag!this.logOutFlag; } } }); /script3.4 v-forv-for用来对对象进行遍历包括数组主要内容v-for(item,index) in users代码中item和index都是自己可以随意命名的内容只不过item部分刚好是users数组里面的具体内容index是索引的作用!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script /head body div idapp p v-for(item,index) in users {{item.name}}:{{item.age}}//插值引用 /p /div /body /html script new Vue({ el:#app, data:{ users:[ { name:张三, age:20 }, { name:李四, age:30 } ] } }); /script3.5 v-model绑定输入框数据能够实现页面数据和vue实例数据进行双向绑定第一种写法!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script /head /html body div idapp input typenumber v-modelresult.num/br span总价{{result.num*price}}/span /div /body /html script new Vue({ el:#app, data:{ result:{ num:0 }, price:10 } }); /scriptnum0或者num 的写法都成立第二种方法!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script /head /html body div idapp input typenumber v-modelnum/br span总价{{num*price}}/span /div /body /html script new Vue({ el:#app, data:{ num:0, price:10 } }); /script3.6购物车例题!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script titleDocument/title style table{ text-align: center; width: 500px; height: 300px; } input{ width: 30px; } /style /head body div idapp table border1px aligncenter caption h3购物车/h3 /caption tr th商品编号/th th商品名称/th th商品单价/th th购买数量/th th操作/th /tr tr v-for(good,index) in goods td{{good.id}}/td td{{good.name}}/td td{{good.price}}/td td button clickincrease(good)/button input typenumber v-modelgood.num / button clickdecrease(good)-/button /td td a href# clickdel(index)删除/a /td /tr tr td colspan5 a href# clickclear清空购物车/a span商品总价:{{total}}/span /td /tr /table /div /body /html script new Vue({ el:#app, data:{ goods:[ {id:1,name:红米note50,price:2000,num:0}, {id:2,name:辣条10袋,price:3000,num:0}, {id:4,name:迷你电动车,price:5000,num:0}, {id:5,name:小米电视机,price:2000,num:0}, ], total:0 }, methods:{ increase(good){ good.num; this.caculate(); }, decrease(good){ if(good.num 0){ good.num--; } this.caculate(); }, del(index){ this.goods.splice(index,1); }, clear(){ this.goods null; }, caculate(){ let money 0; for(let good of this.goods){ money good.price * good.num; } this.total money; } } }); /script4.AxiosAxios是一个基于promise的HTTP库可以用在浏览器和node.js 中其中必须要用到的代码是script srchttps://unpkg.com/axios/dist/axios.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptAxios请求后端数据异步请求!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://unpkg.com/axios/dist/axios.min.js/script script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script style table{ text-align: center; width: 500px; height: 300px; } /style /head body div idapp button clickqueryAll查询数据/button table v-ifshow border1px aligncenter caption h3工作历史/h3 /caption tr th用户编号/th th公司名称/th th工作年限/th th描述/th th操作/th /tr tr v-for(jobHistory,index) in jobHistories td{{jobHistory.user_id}}/td td{{jobHistory.comp_name}}/td td{{jobHistory.years}}/td td{{jobHistory.title}}/td td button删除/button /td /tr /table /div /body /html script new Vue({ el: #app, data: { show:false, jobHistories:[] }, methods: { queryAll() { this.show true; // let _this this; axios.get(http://localhost:8080/user/list) .then(response{ this.jobHistories response.data; }) .catch(function (error) { console.log(error); }); } } }); /script5.Vue生命周期利用Vue生命周期进行数据提前初始化一般使用created阶段!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://unpkg.com/axios/dist/axios.min.js/script script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script style table{ text-align: center; width: 500px; height: 300px; } /style /head body div idapp button clickqueryAll查询数据/button table v-ifshow border1px aligncenter caption h3工作历史/h3 /caption tr th用户编号/th th公司名称/th th工作年限/th th描述/th th操作/th /tr tr v-for(jobHistory,index) in jobHistories td{{jobHistory.user_id}}/td td{{jobHistory.comp_name}}/td td{{jobHistory.years}}/td td{{jobHistory.title}}/td td button clickdel(jobHistory.id,index)删除/button /td /tr /table /div /body /html script new Vue({ el: #app, data: { show:false, jobHistories:[] }, created:function(){ this.queryAll(); }, methods: { refresh(){ this.show true; // let _this this; axios.get(http://localhost:8080/user/list) .then(response{ this.jobHistories response.data; }).catch(function (error) { console.log(error); }); }, queryAll() { this.refresh(); }, del(id,index){ axios.get(http://localhost:8080/user/del?id id) .then(response{ this.jobHistories.splice(index,1); //alert(response.data.msg); }).catch(function (error) { console.log(error); }); } } }); /script6.ES6新特性对象定义!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body /body /html script let username 小红; let age20; const user {username,age}; alert(user.username); /script6.1模块化导入导出三个部分代码第一个部分!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script src./main.js typemodule /script /head body /body /html第二个部分main.js//导入作用的js文件 import{age} from ./one.js import cat from ./one.js alert(cat.kind)第三个部分one.jslet age20 //导出作用的js文件 export {age} export default{ kind:波斯猫, print:2000 }7.Vue组件开发SPA开发整个项目只有一个主页面其他的所有页面都是以组件形式进行路由的7.1全局组件和局部组件全局组件!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script /head body div idapp top/top bottom/bottom /div !-- 网页头部 ,top组件-- template idtop div h1我是网页头部/h1 /div /template !-- 网页底部 bottom组件-- template idbottom div h1我是网页底部/h1 /div /template /body /html script Vue.component(top,{template:#top});//全局注册top组件 Vue.component(bottom,{template:#bottom});//全局注册bottom组件 new Vue({ el:#app, }) /script局部组件!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script /head body div idapp top-page/top-page bottom-page/bottom-page /div !-- 网页头部 -- template idtop div h1我是网页头部/h1 /div /template !-- 网页底部 -- template idbottom div h1我是网页底部/h1 /div /template /body /html script const topPage { template:#top }; const bottomPage { template:#bottom }; new Vue({ el:#app, components:{ topPage, bottomPage } }); /script7.2路由使用路由进行页面跳转!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script script srchttps://cdn.jsdelivr.net/npm/vue-router3/dist/vue-router.js/script /head body div idapp button clicklogin登录界面/button button clickreg注册界面/button router-view/router-view /div !-- 登录组件 -- template idlogin div h3用户登录/h3 用户名input typetextbr / 密码input typetextbr / input typesubmit value登录 /div /template !-- 注册组件 -- template idreg div h3用户注册/h3 用户名input typetextbr / 密码input typetextbr / 邮箱input typetextbr / input typesubmit value注册 /div /template /body /html script const login { template:#login } const register { template:#reg } let router new VueRouter({ routes:[ {path:/,redirect:/login}, {path:/login,component:login}, {path:/reg,component:register} ] }); new Vue({ el:#app, components:{ login, register }, methods:{ login(){ this.$router.push({path:/login}); }, reg(){ this.$router.push({path:/reg}); } }, router }); /script7.3路由相关案例及其解释前端文件!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script script srchttps://unpkg.com/axios/dist/axios.min.js/script script srchttps://cdn.jsdelivr.net/npm/vue-router3/dist/vue-router.js/script /head body div idapp div button clicklogin登录界面/button button clickreg注册页面/button router-view/router-view !-- router-view通过路由来回切换登录、注册的两个页面 -- /div /div !-- 登录组件 -- template idlogin div h3用户登录/h3 用户名input typetext v-modelnamebr / 密码input typetext v-modelpwbr / input typesubmit value登录 clickselectlog /div /template !-- 注册组件 -- template idreg div h3用户注册/h3 用户名input typetext v-modelname1br / 密码input typetext v-modelpw1br / 邮箱input typetext v-modelemailbr / input typesubmit value注册 clickinsertreg /div /template /body /html script const login{ template:#login, data(){ return{ name:, pw:, } }, methods:{ selectlog(){ axios.get(http://localhost:8080/user/selectlog,{ params:{ username:this.name, password:this.pw } })//查询可以用get请求 .then(response{ console.log(response.data); alert(登陆成功); }) .catch(error { console.log(error); alert(请求失败请检查网络或者后端服务器); }); } } } const register{ template:#reg, data(){ return{ name1:, pw1:, email: } }, methods:{ insertreg(){ axios.post(http://localhost:8080/user/insertreg,{ username:this.name1, password:this.pw1, email:this.email })//注册要用post请求 .then(response{ console.log(response.data); alert(注册成功); this.name1 ; this.pw1 ; this.email ; }) .catch(error { console.log(error); alert(请求失败请检查网络或者后端服务器); }); } } } let routernew VueRouter({ routes:[ {path:/,redirect:/login}, {path:/login,component:login}, {path:/reg,component:register} ] }); new Vue({ el:#app, components:{ login, register, }, data:{ }, methods:{ login(){ this.$router.push({path:/login});//点击登录跳转到登录组件页面 }, reg(){ this.$router.push({path:/reg});//点击注册跳转到注册组件页面 } }, router }) /scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue-router3/dist/vue-router.js/script---第一段代码是vue核心框架提供数据绑定、组件化、响应式等能力---第二段代码Axios基于 Promise 的 HTTP 客户端用来发送 Ajax 请求GET/POST与后端交互---第三段代码Vue routerVue 官方路由插件实现单页面应用SPA中的页面切换无需刷新整个页面router-view/router-view路由出口/占位符Vue Router会根据当前 URL 路径在这里动态渲染对应的组件template idlogindivh3用户登录/h3用户名input typetext v-modelnamebr /密码input typetext v-modelpwbr /input typesubmit value登录 clickselectlog/div/template登录组件const login {template: #login, // 使用上面 idlogin 的模板data() {return {name: , // 用户名与输入框双向绑定pw: , // 密码与输入框双向绑定}},methods: {selectlog() {axios.get(http://localhost:8080/user/selectlog, {params: {username: this.name, // 将用户名作为参数password: this.pw // 将密码作为参数}}).then(response {console.log(response.data); // 打印后端返回的数据alert(登陆成功); // 弹出成功提示}).catch(error {console.log(error); // 打印错误信息alert(请求失败请检查网络或者后端服务器);});}}}注册组件const register {template: #reg, // 使用 idreg 的模板data() {return {name1: , // 用户名pw1: , // 密码email: // 邮箱}},methods: {insertreg() {axios.post(http://localhost:8080/user/insertreg, {username: this.name1,password: this.pw1,email: this.email}).then(response {console.log(response.data);alert(注册成功);// 清空表单this.name1 ;this.pw1 ;this.email ;}).catch(error {console.log(error);alert(请求失败请检查网络或者后端服务器);});}}}get与post使用规范区别路由配置let router new VueRouter({routes: [{ path: /, redirect: /login }, // 访问根路径时自动跳转到 /login{ path: /login, component: login }, // 访问 /login 时跳转并渲染 login 组件{ path: /reg, component: register } // 访问 /reg 时跳转并渲染 register 组件]});Vue根实例new Vue({el: #app, // 挂载到 idapp 的 DOM 元素components: {login, // 注册 login 组件缩写等同于 login: loginregister, // 注册 register 组件},data: {}, // 根数据这里为空methods: {login() {this.$router.push({ path: /login }); // 路由跳转到登录页},reg() {this.$router.push({ path: /reg }); // 路由跳转到注册页}},router // 挂载路由实例让整个应用支持路由})后端代码以及其中注解作用package com.iweb.sprintbootmybatis.controller; import com.iweb.sprintbootmybatis.bean.User; import com.iweb.sprintbootmybatis.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.RestController; RestController CrossOrigin(*)//解决跨域的注解专门处理客户端请求和给客户端响应结果 RequestMapping(user) public class UserController { Autowired private UserService userService;//这个代码相当于之前写的多态UserService userServicenew UserServiceimpl //一个方法对应一个请求 //RequestMapping处理登录请求且括号里的内容不能重复,web想要请求路径都以斜杠开头 RequestMapping(/selectlog) ResponseBody public String selectlog(User user){ useruserService.selectlog(user); if(usernull){ return 登录失败; } return 登陆成功; } RequestMapping(/insertreg) ResponseBody public String insertreg(RequestBody User user){ int iuserService.insertreg(user); if(i0){ return 注册成功; } return 注册失败; } }SpringBoot注解小总结详细相关注解解释RestControllerCrossOrigin(*)RequestMapping(user)RequestMapping(/selectlog)作用在方法上RequestMapping(/selectlog) public String selectlog(User user) { // ... }ResponsebodyRequestBodyRequestMapping(/insertreg) public String insertreg(RequestBody User user) { // ... }在前端页面输入相关的名字密码和邮箱即请求体加上RequestBody后Spring 会自动读取请求体中的 JSON 数据将 JSON 字段映射到User对象的属性上自动给User对象的属性赋值在此代码中可以将请求体的数据传入到数据库完成一次数据库内容创建AutowiredAutowiredprivate UserService userService;//这个代码加注解相当于之前写的多态UserService userServicenew UserServiceimpl