随笔分类 -  千峰商城项目

摘要:1.方法一:可以通过 /url/:attr 方式实现通过路由传值给组件。($route和组件耦合度过高) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascrip 阅读全文
posted @ 2022-07-12 17:45 临易 阅读(34) 评论(0) 推荐(0) 编辑
摘要:重定向:访问/b,重定向到/a。 1.方法一:redirect 根据路由路径重定向 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/ 阅读全文
posted @ 2022-07-12 17:32 临易 阅读(32) 评论(0) 推荐(0) 编辑
摘要:命名视图:如果在界面中有一个以上的路由视图,那么需要给router-view指定name,在路由中不能使用component,而需要使用components映射多个组件。根据name来设置组件与router-view的绑定关系。 <!DOCTYPE html> <html> <head> <meta 阅读全文
posted @ 2022-07-12 17:19 临易 阅读(29) 评论(0) 推荐(0) 编辑
摘要:命名路由:在定义路由的时候可以给路由指定name,我们在进行路由导航时可以通过路由的名字导航。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" sr 阅读全文
posted @ 2022-07-12 16:57 临易 阅读(33) 评论(0) 推荐(0) 编辑
摘要:js代码实现路由跳转:编程式导航。1.push() (字符串做参数) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" 阅读全文
posted @ 2022-07-12 15:42 临易 阅读(33) 评论(0) 推荐(0) 编辑
摘要:嵌套路由:当我们点击一个链接,就会显示一个组件。在一级路由的组件中显示二级路由就是嵌套路由。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src 阅读全文
posted @ 2022-07-12 12:06 临易 阅读(39) 评论(0) 推荐(0) 编辑
摘要:1.通配符(*):*可以匹配任意路径 例如: {path:"/*",component:t5}, //表示匹配所有路径 {path:"/user-*",component:t5}, //表示匹配所有以user开头的路径 const myrouter = new VueRouter({ routes: 阅读全文
posted @ 2022-07-12 11:46 临易 阅读(187) 评论(0) 推荐(0) 编辑
摘要:路由router:是由vue官方提供的用于实现组件跳转的插件。基于vue。 1.路由插件的引用。 离线引用: 下载js文件:v4.x: https://unpkg.com/vue-router@4.1.2/dist/vue-router.global.js v3.x: https://unpkg.c 阅读全文
posted @ 2022-07-12 11:22 临易 阅读(77) 评论(0) 推荐(0) 编辑
摘要:axios回调函数的参数res:回调函数的res并不是接口返回的数据,而是表示一个响应对象。res.data才表示接口响应的数据。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="t 阅读全文
posted @ 2022-07-12 10:30 临易 阅读(53) 评论(0) 推荐(0) 编辑
摘要:执行多个并发请求: axios.get(url1).then(function(res1){ //处理结果1 }); axios.get(url2).then(function(res2){ //处理结果2,不可写这里,可能因为网络影响,1还未执行完 }); //处理结果(需要等待两个请求都返回数据 阅读全文
posted @ 2022-07-12 09:59 临易 阅读(35) 评论(0) 推荐(0) 编辑
摘要:axios提供了多种异步请求方法,实现对RESTful风格的支持。 1.get请求 axios.get(url).then(function); axios.get(url,{}).thrn(function); //使用axios的get请求传递参数,需要将参数设置在params下axios.ge 阅读全文
posted @ 2022-07-11 18:43 临易 阅读(59) 评论(0) 推荐(0) 编辑
摘要:1.axios:vue可以实现数据的渲染,但是如何获取数据? vue本身不具备通信能力,通常结合axios——一个专注于异步通信的js框架来使用。 axios负责数据通信,vue负责数据渲染。 2.axios入门使用: 原生ajax:实现步骤复杂。 jQuery:笨重。 axios:专注于异步通信。 阅读全文
posted @ 2022-07-11 18:22 临易 阅读(76) 评论(0) 推荐(0) 编辑
摘要:1.组件定义: 定义组件时,将组件中的数据绑定到slot标签。 Vue.component("page-frame",{ template:`<div> <div id="header" style="width:100%; height:100px; background:pink"> <slot 阅读全文
posted @ 2022-07-11 17:39 临易 阅读(25) 评论(0) 推荐(0) 编辑
摘要:具名插槽:当组件中的插槽数量大于1时,我们需要给组件中的slot标签添加name属性指定插槽的名字。 1.定义组件 Vue.component("page-frame",{ template:`<div> <div id="header" style="width:100%; height:100p 阅读全文
posted @ 2022-07-11 16:51 临易 阅读(24) 评论(0) 推荐(0) 编辑
摘要:当我们自定义vue组件时,允许组件中的部分内容在调用组件时进行自定义。————插槽。 1.js中定义插槽: 在自定义组件中通过<slot>标签在模板中定义插槽。 //定义一个header-bar组件 Vue.component("header-bar",{ data:function(){ //组件 阅读全文
posted @ 2022-07-11 15:55 临易 阅读(44) 评论(0) 推荐(0) 编辑
摘要:子传父:通过子组件的按钮调用父组件的函数,通过函数传值。 //定义一个header-bar组件 Vue.component("header-bar",{ data:function(){ //组件中的data是通过函数返回的对象 return{ //title:"java2022电商平台" str2 阅读全文
posted @ 2022-07-11 15:31 临易 阅读(28) 评论(0) 推荐(0) 编辑
摘要:父传子:父组件在调用子组件的时候向子组件传递数据。 vue实例本身就是一个组件。(模板就是el指定的容器div,data就是组件数据,methods就是组件的事件函数)在vue实例指定的el容器中引用的组件<header-bar>称为子组件,当前Vue实例就是父组件。 <!DOCTYPE html> 阅读全文
posted @ 2022-07-11 15:20 临易 阅读(34) 评论(0) 推荐(0) 编辑
摘要:1.自定义组件的结构: data:定义组件的模板渲染的数据。 template:组件的HTML模块(HTML标签\css) methods:定义组件中的标签事件绑定的js函数 //定义一个header-bar组件 Vue.component("header-bar",{ data:function( 阅读全文
posted @ 2022-07-11 12:36 临易 阅读(31) 评论(0) 推荐(0) 编辑
摘要:组件,就是将通用的HTML模块进行封装————可复用。 1.组件注册:将通用的HTML模块注册到vue中。 2.组件引用:定义组件需要依赖vue.js,在引用自定义组件的js文件之前需要先引用vue.js。 组件的引用必须在vue实例el指定的容器中。 在js包中新建一个js文件。 将header- 阅读全文
posted @ 2022-07-11 11:23 临易 阅读(31) 评论(0) 推荐(0) 编辑
摘要:很多同学没有这个播放器文件,可以加我QQ1226371240,记得备注播放器~ 找到music-1.0.0.jar所在的文件夹,在地址栏直接输入cmd,回车。 在cmd中输入: "java -jar music-1.0.0.jar",回车,启动项目。 在浏览器地址栏输入:"http://localh 阅读全文
posted @ 2022-07-10 11:59 临易 阅读(116) 评论(1) 推荐(1) 编辑

点击右上角即可分享
微信分享提示