<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[jlspcsdn的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/jlspcsdn</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; jlspcsdn]]></copyright><item><title><![CDATA[Vue学习：31-Axios的使用]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/155051943</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/155051943</guid><author>jlspcsdn</author><pubDate>Sun, 23 Nov 2025 09:59:13 +0800</pubDate><description><![CDATA[axios.create([config])：调用create函数传入自定义配置，来创建自定义axios实例，即二次封装})request({method: 'POST', // 请求方式url: '/example-url/……', // 请求地址// …… 其他配置 ……})request('/example-url/……', // 请求地址method: 'POST', // 请求方式// …… 其他配置 ……'/example-url/……', // 请求地址。]]></description><category></category></item><item><title><![CDATA[Vue学习：30-安装与使用Pinia]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/155051015</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/155051015</guid><author>jlspcsdn</author><pubDate>Thu, 20 Nov 2025 08:47:09 +0800</pubDate><description><![CDATA[1、store采用的是选项式模式时，state选项为函数返回的对象，在其定义共享的数据2、store采用的是组合式模式时，在其函数内定义的ref变量，最终return出去来提供共享的数据const nickname = ref('一个好人')//将数据暴露出去，共享给需要的组件return {})1、store采用的是选项式模式时，getters选项中声明的函数即为计算属性a. 在其函数内可通过this关键字来获取store实例，也可通过方法的第一个参数得到store实例。]]></description><category></category></item><item><title><![CDATA[Vue学习：29-导航守卫之全局前置守卫]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/155012177</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/155012177</guid><author>jlspcsdn</author><pubDate>Thu, 20 Nov 2025 08:19:50 +0800</pubDate><description><![CDATA[每次发生路由的导航跳转时，都会触发全局前置守卫，因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制。c. 调用next({ routerPath })表示导航到此地址，一般情况用户未登录时，会导航到登陆界面。1、点击主页链接时，默认情况下可直接进入指定界面，但是问题是该跳转的界面是需要用户登录后方可访问的。2、可设置导航守卫来检测用户是否登录，如果已登录，则进入后台页，如果未登录，则强制进入登录页，如图。提示：该函数在前置守卫中可出现多次，但是只能被调用一次!1、to：将要访问的路由信息对象。]]></description><category></category></item><item><title><![CDATA[Vue学习：28-声明式与编程式导航]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/155011810</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/155011810</guid><author>jlspcsdn</author><pubDate>Wed, 19 Nov 2025 08:37:44 +0800</pubDate><description><![CDATA[提示：编程式的router.push(...)的语法1、其的参数可以是一个字符串路径，或者一个描述地址的对象2、如果参数是描述地址的对象的话，其对象中path和params不能同时使用实例：App.vue。]]></description><category></category></item><item><title><![CDATA[Vue学习：27-路径参数]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154979363</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154979363</guid><author>jlspcsdn</author><pubDate>Wed, 19 Nov 2025 08:15:15 +0800</pubDate><description><![CDATA[1、很多时候，我们需要将给定匹配模式的路由映射到同一个组件，例如：想渲染不同博客的内容，其实只是渲染到同一个组件上，只是博客的编号不同而已2、在Vue Router中，可以在路径中使用一个动态字段来实现，我们称之为“路径参数” ，语法如：path: '/url/:param'3、在展示的组件中访问路径参数a. 在选项式 API中，采用this.$route.params来访问，视图模板上采用$route.params来访问。]]></description><category></category></item><item><title><![CDATA[Vue学习：26-重定向路由和嵌套路由]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154979146</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154979146</guid><author>jlspcsdn</author><pubDate>Tue, 18 Nov 2025 09:05:27 +0800</pubDate><description><![CDATA[在路由规则中，可采用redirect来重定向另一个地址修改src/router/index.js。]]></description><category></category></item><item><title><![CDATA[Vue学习：25-Vue Router快速入门]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154937511</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154937511</guid><author>jlspcsdn</author><pubDate>Tue, 18 Nov 2025 08:56:08 +0800</pubDate><description><![CDATA[vue-router是vue.js官方给出的路由解决方案，vue 的一个插件库，专门用来实现 SPA 应用，能够轻松的管理SPA项目中组件的切换，安装：npm install对 SPA 应用的理解：1、单页 Web 应用（single page web application，SPA）。2、整个应用只有一个完整的页面。3、点击页面中的导航链接不会刷新页面，只会做页面的局部更新。4、数据需要通过 ajax 请求获取。]]></description><category></category></item><item><title><![CDATA[Vue学习：24-模板引用]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154936065</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154936065</guid><author>jlspcsdn</author><pubDate>Mon, 17 Nov 2025 08:17:37 +0800</pubDate><description><![CDATA[如果我们需要直接访问组件中的底层DOM元素，可使用vue提供特殊的ref属性来访问。1、在视图元素中采用ref属性来设置需要访问的DOM元素a. 该ref属性可采用字符值的执行设置b. 该ref属性可采用v-bind:或:ref的形式来绑定函数，其函数的第一个参数则为该元素2、如果元素的ref属性值采用的是字符串形式a. 在选项式 API JS中，可通过this.$refs来访问模板引用b. 在组合式 API JS中，我们需要声明一个同名的ref变量，来获得该模板的引用案例：App.vue。]]></description><category></category></item><item><title><![CDATA[Vue学习：23-生命周期]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154916277</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154916277</guid><author>jlspcsdn</author><pubDate>Mon, 17 Nov 2025 08:08:03 +0800</pubDate><description><![CDATA[每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。]]></description><category></category></item><item><title><![CDATA[Vue学习：22-组件之购物车案例]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154916220</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154916220</guid><author>jlspcsdn</author><pubDate>Sun, 16 Nov 2025 19:36:37 +0800</pubDate><description><![CDATA[【代码】Vue学习：22-组件之购物车案例。]]></description><category></category></item><item><title><![CDATA[Vue学习：21-依赖注入]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154868114</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154868114</guid><author>jlspcsdn</author><pubDate>Sun, 16 Nov 2025 19:31:06 +0800</pubDate><description><![CDATA[如果有一个深层的子组件需要一个较远的祖先组件中的部分数据，如果实现呢？1、可使用props沿着组件链逐级传递下去，如图2、我们可在祖先组件使用provide提供数据，后代组件使用inject注入数据，如图。]]></description><category></category></item><item><title><![CDATA[Vue学习：20-单文件组件CSS功能]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/153972445</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/153972445</guid><author>jlspcsdn</author><pubDate>Sat, 15 Nov 2025 09:36:11 +0800</pubDate><description><![CDATA[默认情况下，写在.vue组件中的样式会全局生效，很容易造成多个组件之间的样式冲突问题导致组件之间样式冲突的根本原因是：1、单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的2、每个组件中的样式，都会影响整个index.html页面中的DOM元素。]]></description><category></category></item><item><title><![CDATA[Vue学习：19-插槽]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154800098</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154800098</guid><author>jlspcsdn</author><pubDate>Sat, 15 Nov 2025 09:25:53 +0800</pubDate><description><![CDATA[在封装组件时，可以使用<slot>元素把不确定的、希望由用户指定的部分定义为插槽；插槽可以理解为给预留的内容提供占位符。插槽也可以提供默认内容，如果组件的使用者没有为插槽提供任何内容，则插槽内的默认内容会生效。注意：如果在封装组件时没有预留任何<slot>插槽，用户提供传递一些模板片段将会被遗弃。]]></description><category></category></item><item><title><![CDATA[Vue学习：18-透传属性和事件]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154799791</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154799791</guid><author>jlspcsdn</author><pubDate>Thu, 13 Nov 2025 20:42:39 +0800</pubDate><description><![CDATA[透传是一个通讯层面的概念，指的是在通讯中不管传输的业务内容如何，只负责将传输的内容由源地址传输到目的地址，而不对业务数据内容做任何改变。在vue上来讲，我们的组件存在深层嵌套的场景，例如：A -> B -> C父组件在使用子组件的时候，如何“透传属性和事件”给子组件呢？1、透传属性和事件并没有在子组件中用props和emits声明2、透传属性和事件最常见的如@click和class、id、style3、当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上；]]></description><category></category></item><item><title><![CDATA[Vue学习：17-子传父实例]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154685926</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154685926</guid><author>jlspcsdn</author><pubDate>Thu, 13 Nov 2025 20:26:38 +0800</pubDate><description><![CDATA[更改年龄]]></description><category></category></item><item><title><![CDATA[Vue学习：16-组件之数据传递（子传父）]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154681115</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154681115</guid><author>jlspcsdn</author><pubDate>Tue, 11 Nov 2025 10:54:38 +0800</pubDate><description><![CDATA[采用字符串数组可以声明简单的自定义事件</script>采用对象式声明自定义事件，还可以进行校验传递的参数是否符合预期要求对象式声明自定义事件中，属性名为自定义事件名，属性值则是是否验证传递的参数：1、属性值为null，则不需要验证2、属性值为函数时，参数为传递的数据，函数返回true则验证通过，返回false则验证失败，验证失败可以用警告语句提示开发者【注意：无论是true还是false都会继续执行下去的，父组件都会获取到传递的值】autoEvent1: null, // 无需校验。]]></description><category></category></item><item><title><![CDATA[Vue学习：15-组件之数据传递（父传子）]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154475594</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154475594</guid><author>jlspcsdn</author><pubDate>Tue, 11 Nov 2025 09:55:07 +0800</pubDate><description><![CDATA[如果父组件向子组件进行传递数据，那么我们需要在子组件中声明props来接收传递数据的属性，可采用字符串数组式或对象式来声明props。父组件向子组件传递数据，在使用组件的标签上采用属性方式传递的props值，可使用v-bind:或:来绑定属性。组件中props中的数据是只读的，不可直接更改，只能通过父组件进行更改。声明与使用：1、在选项式 API 中a. 我们可以提供props选项来声明接收传递的数据b. 在JS中可使用this.$props来访问声明的自定义的属性。]]></description><category></category></item><item><title><![CDATA[Vue学习：14-组件之注册]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154474689</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154474689</guid><author>jlspcsdn</author><pubDate>Thu, 06 Nov 2025 09:17:21 +0800</pubDate><description><![CDATA[一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现；组件注册有两种方式：全局注册、局部注册。]]></description><category></category></item><item><title><![CDATA[Vue学习：13-计算属性]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/154474561</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/154474561</guid><author>jlspcsdn</author><pubDate>Thu, 06 Nov 2025 08:40:05 +0800</pubDate><description><![CDATA[● 一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要所依赖的数据源不改变，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护；因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。● 两种方式在结果上确实是完全相同的，不同之处在于计算属性值会基于其响应式依赖被缓存。组合式 API 中，可以通过computed回调函数返回的值来声明计算属性。选项式 API 中，可以提供computed选项来声明计算属性。]]></description><category></category></item><item><title><![CDATA[Vue学习：12-watchEffect函数]]></title><link>https://blog.youkuaiyun.com/jlspcsdn/article/details/153971999</link><guid>https://blog.youkuaiyun.com/jlspcsdn/article/details/153971999</guid><author>jlspcsdn</author><pubDate>Mon, 27 Oct 2025 15:42:00 +0800</pubDate><description><![CDATA[watchEffect()会立即执行一遍回调函数，如果这时函数产生了副作用，Vue 会自动追踪副作用的依赖关系，自动分析出响应源。App.vue。]]></description><category></category></item></channel></rss>