- 博客(31)
- 收藏
- 关注
RSS订阅原创 Vue学习：31-Axios的使用
axios.create([config])：调用create函数传入自定义配置，来创建自定义axios实例，即二次封装})request({method: 'POST', // 请求方式url: '/example-url/……', // 请求地址// …… 其他配置 ……})request('/example-url/……', // 请求地址method: 'POST', // 请求方式// …… 其他配置 ……'/example-url/……', // 请求地址。
2025-11-23 09:59:13
1009
原创 Vue学习：30-安装与使用Pinia
1、store采用的是选项式模式时，state选项为函数返回的对象，在其定义共享的数据2、store采用的是组合式模式时，在其函数内定义的ref变量，最终return出去来提供共享的数据const nickname = ref('一个好人')//将数据暴露出去，共享给需要的组件return {})1、store采用的是选项式模式时，getters选项中声明的函数即为计算属性a. 在其函数内可通过this关键字来获取store实例，也可通过方法的第一个参数得到store实例。
2025-11-20 08:47:09
775
原创 Vue学习：29-导航守卫之全局前置守卫
每次发生路由的导航跳转时，都会触发全局前置守卫，因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制。c. 调用next({ routerPath })表示导航到此地址，一般情况用户未登录时，会导航到登陆界面。1、点击主页链接时，默认情况下可直接进入指定界面，但是问题是该跳转的界面是需要用户登录后方可访问的。2、可设置导航守卫来检测用户是否登录，如果已登录，则进入后台页，如果未登录，则强制进入登录页，如图。提示：该函数在前置守卫中可出现多次，但是只能被调用一次!1、to：将要访问的路由信息对象。
2025-11-20 08:19:50
291
原创 Vue学习：28-声明式与编程式导航
提示：编程式的router.push(...)的语法1、其的参数可以是一个字符串路径，或者一个描述地址的对象2、如果参数是描述地址的对象的话，其对象中path和params不能同时使用实例：App.vue。
2025-11-19 08:37:44
304
原创 Vue学习：27-路径参数
1、很多时候，我们需要将给定匹配模式的路由映射到同一个组件，例如：想渲染不同博客的内容，其实只是渲染到同一个组件上，只是博客的编号不同而已2、在Vue Router中，可以在路径中使用一个动态字段来实现，我们称之为“路径参数” ，语法如：path: '/url/:param'3、在展示的组件中访问路径参数a. 在选项式 API中，采用this.$route.params来访问，视图模板上采用$route.params来访问。
2025-11-19 08:15:15
266
原创 Vue学习：25-Vue Router快速入门
vue-router是vue.js官方给出的路由解决方案，vue 的一个插件库，专门用来实现 SPA 应用，能够轻松的管理SPA项目中组件的切换，安装：npm install对 SPA 应用的理解：1、单页 Web 应用（single page web application，SPA）。2、整个应用只有一个完整的页面。3、点击页面中的导航链接不会刷新页面，只会做页面的局部更新。4、数据需要通过 ajax 请求获取。
2025-11-18 08:56:08
446
原创 Vue学习：24-模板引用
如果我们需要直接访问组件中的底层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。
2025-11-17 08:17:37
330
原创 Vue学习：23-生命周期
每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。
2025-11-17 08:08:03
615
原创 Vue学习：21-依赖注入
如果有一个深层的子组件需要一个较远的祖先组件中的部分数据，如果实现呢？1、可使用props沿着组件链逐级传递下去，如图2、我们可在祖先组件使用provide提供数据，后代组件使用inject注入数据，如图。
2025-11-16 19:31:06
178
原创 Vue学习：20-单文件组件CSS功能
默认情况下，写在.vue组件中的样式会全局生效，很容易造成多个组件之间的样式冲突问题导致组件之间样式冲突的根本原因是：1、单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的2、每个组件中的样式，都会影响整个index.html页面中的DOM元素。
2025-11-15 09:36:11
247
原创 Vue学习：19-插槽
在封装组件时，可以使用<slot>元素把不确定的、希望由用户指定的部分定义为插槽；插槽可以理解为给预留的内容提供占位符。插槽也可以提供默认内容，如果组件的使用者没有为插槽提供任何内容，则插槽内的默认内容会生效。注意：如果在封装组件时没有预留任何<slot>插槽，用户提供传递一些模板片段将会被遗弃。
2025-11-15 09:25:53
261
原创 Vue学习：18-透传属性和事件
透传是一个通讯层面的概念，指的是在通讯中不管传输的业务内容如何，只负责将传输的内容由源地址传输到目的地址，而不对业务数据内容做任何改变。在vue上来讲，我们的组件存在深层嵌套的场景，例如：A -> B -> C父组件在使用子组件的时候，如何“透传属性和事件”给子组件呢？1、透传属性和事件并没有在子组件中用props和emits声明2、透传属性和事件最常见的如@click和class、id、style3、当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上；
2025-11-13 20:42:39
301
原创 Vue学习：16-组件之数据传递（子传父）
采用字符串数组可以声明简单的自定义事件</script>采用对象式声明自定义事件，还可以进行校验传递的参数是否符合预期要求对象式声明自定义事件中，属性名为自定义事件名，属性值则是是否验证传递的参数：1、属性值为null，则不需要验证2、属性值为函数时，参数为传递的数据，函数返回true则验证通过，返回false则验证失败，验证失败可以用警告语句提示开发者【注意：无论是true还是false都会继续执行下去的，父组件都会获取到传递的值】autoEvent1: null, // 无需校验。
2025-11-11 10:54:38
230
原创 Vue学习：15-组件之数据传递（父传子）
如果父组件向子组件进行传递数据，那么我们需要在子组件中声明props来接收传递数据的属性，可采用字符串数组式或对象式来声明props。父组件向子组件传递数据，在使用组件的标签上采用属性方式传递的props值，可使用v-bind:或:来绑定属性。组件中props中的数据是只读的，不可直接更改，只能通过父组件进行更改。声明与使用：1、在选项式 API 中a. 我们可以提供props选项来声明接收传递的数据b. 在JS中可使用this.$props来访问声明的自定义的属性。
2025-11-11 09:55:07
245
原创 Vue学习：14-组件之注册
一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现；组件注册有两种方式：全局注册、局部注册。
2025-11-06 09:17:21
233
原创 Vue学习：13-计算属性
● 一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要所依赖的数据源不改变，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护；因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。● 两种方式在结果上确实是完全相同的，不同之处在于计算属性值会基于其响应式依赖被缓存。组合式 API 中，可以通过computed回调函数返回的值来声明计算属性。选项式 API 中，可以提供computed选项来声明计算属性。
2025-11-06 08:40:05
153
原创 Vue学习：12-watchEffect函数
watchEffect()会立即执行一遍回调函数，如果这时函数产生了副作用，Vue 会自动追踪副作用的依赖关系，自动分析出响应源。App.vue。
2025-10-27 15:42:00
207
原创 Vue学习：11-侦听器
在组合式API中，我们可以使用watch函数或者watchEffect函数在每次响应式状态发生变化时触发对应的回调函数。我们首先来看，怎么使用watch函数？
2025-10-27 11:50:24
335
原创 Vue学习：09-事件绑定
我们可以使用v-on:指令 (简写为@) 来监听 DOM 事件，并在事件触发时执行对应的JavaScript用法：v-on:click=""或 @click=""App.vue。
2025-10-27 10:07:20
299
原创 Vue学习：08-条件渲染
v-if 指令用于条件性地渲染元素；该内容只会在指令的表达式返回真值时才被渲染v-else-if提供的是相应于v-if的else if区块，它可以连续多次重复使用你也可以使用v-else为v-if添加一个else区块v-else和v-else-if指令必须配合v-if指令一起使用 ，否则它将不会被识别，而且语句块中间不能出现无关其他元素v-if支持在"<template>"元素上使用，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 "<template>"App.vue。
2025-10-27 09:11:36
279
原创 Vue学习：07-属性绑定
● 响应式地绑定一个元素属性，应该使用v-bind:指令● 如果绑定的值是null或者undefined，那么该属性将会从渲染的元素上移除● 因为v-bind非常常用，我们提供了特定的简写语法 “ : ”App.vue。
2025-10-26 21:49:10
313
原创 Vue学习：06-双向绑定
v-model双向数据绑定指令，视图数据和数据源同步。一般情况下v-model指令用在表单元素中：文本类型的<input>和<textarea>元素会绑定value属性并侦听input事件<input type="checkbox">和<input type="radio">会绑定checked属性并侦听change事件<select>会绑定value属性并侦听change事件App.vue。
2025-10-26 21:26:10
256
原创 Vue学习：05-内容渲染
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。
2025-10-26 21:22:59
240
原创 Vue学习：04-响应式数据
● 可用data选项来声明组件的响应式状态；该data选项的值应是返回一个对象的函数；● data函数返回对象的所有顶层属性都会被代理到组件实例（即方法和生命周期钩子中的 this）上 App.vue。
2025-10-26 21:19:36
186
原创 Vue学习：03-创建Vue工程
Vue3中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架创建应用：在这里，我们什么都不选择，建立一个最基本的vue项目就可以，项目名称为demo666，后期我们会在这个项目的基础上进行各项功能的增加。
2025-10-26 21:12:43
837
原创 Vue学习：01-相关软件的安装
1、nodejs安装2、修改npm镜像上述命令中即为华为云 NPM 镜像地址，使用这个地址可以极大地加快 Node.js 模块的下载速度。3、安装pnpm。
2025-09-01 21:51:54
147
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人