- 博客(85)
- 收藏
- 关注
RSS订阅原创 Vue 27 | ref、reactive、toRef、toRefs、watch、watchEffect
与之前Vue2的选项式API格式不同，这里学习Vue3的组合式API这样的组合式的好处是，对于一些比较复杂的逻辑，把负责同一部分逻辑的功能写在一起，便于后续维护管理；前面的写法对于一些中小型项目，会更加简洁，也便于编写</</</</// 引入vueimportfrom'vue'exportdefault// 第一步setup// 上面需要显示的数据或事件都定义在此处let1;constadd=>++return// 上面使用到的需要在return中暴露</
2025-06-14 23:46:35
518
原创 Vue 26 | Less
如果html中，某个div的class属性名定为common，那么如果此时less文件中有一个公共样式包装也叫common，那么会直接作用在同名的div标签上，这样就是有污染，所以可以采取命名空间的写法来解决。传统的css就是在style标签中单个添加，像上面这样有嵌套的还要不断的通过.来逐级添加样式，这样不太方便。在项目开发过程中，可能会有这样的场景:ul列表下有几个li标签，li标签有默认的样式。想要公共的less文件作用在所有的less文件中，要在当前使用的less文件中导入。
2025-06-14 15:03:11
705
原创 Vue 25 | vue-router使用
官方文档 https://router.vuejs.org/zh/guide/migration/index.html。4、使用router-view用于承载页面。2、编写路由配置，全局注入router。1、下载vue-router依赖。3、在vue实例上进行挂载。创建router实例。
2025-06-14 15:02:24
128
原创 Vue 23 | 路由的跳转方式
第二种带查询参数的方式，对象中是path属性与query属性，其中path属性与name属性只能二选一，path直接对应的是跳转的路径。以上这种就是命名的路由，它属于隐式的传参，因为路径上不会把id漏出来，相比显式的更安全。由于声明式路由的方式不够灵活，它必须要在页面中使用才能触发，但是实际开发中不是所有的功能都要在页面触发的，比如实现一个延迟跳转的功能，就需要放在定时器中，所以就需要有编程式路由。在下面的script中编写的相关路由的代码，可以通过传入对应的实例名来完成跳转的功能(如上述的user)
2025-06-14 14:59:02
232
原创 Vue 22 | Vue-router
Router官方文档查看相关API在之前的学习中，我们可以使用vue来创建单页应用，那么如何根据不同的 url 地址展示不同的内容或页面？Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。嵌套路由映射模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细致的导航控制带有自动激活的 CSS class 的链接。
2025-06-14 14:58:24
245
原创 Vue 21 | 虚拟节点与渲染函数render
可以使用render对页面进行编程式的修改。字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode(虚拟节点)。如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数。虚拟节点（dom）本质上就是一个普通的JS对象，用于描述视图的界面结构，使用渲染函数如何实现？
2025-06-14 14:57:31
264
原创 Vue 20 | mixin混入
在项目开发中，mixin可能会有多个，比如定义form时，会有相关的方法，可以提取出来，同样的对于用户也有相关的数据，所以在这个文件夹中定义两个文件form.js编写form相关的方法与数据，user.js编写用户相关的方法与数据。的操作，所混入的对象包含任意组件的选项（data，生命周期，methods，watch，computed）data | computed：数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。在文件中新建一个mixin文件夹，在其中新建一个index.js文件。
2025-06-14 14:56:48
358
原创 Vue 19 | 动态、异步组件
只渲染基本的页面，对于一些需要通过触发某个事件而出现的页面或内容，在触发时才会发出请求，然后再进行渲染，这些都是针对首次加载来说。在使用动态组件时写上component标签，添加is属性，传入的内容就是想要渲染的内容"currentTabComponent"注意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute。使用异步组件的方式把各种包分拆成多个小包，当使用时才请求获取资源，相比一次性获取完整的包，效率上要更高效。
2025-06-14 14:54:56
251
原创 Vue 18 | vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以完成跨级组件和兄弟组件的通信状态，驱动应用的数据源；视图，以声明方式将状态映射到视图；操作，响应在视图上的用户输入导致的状态变化。用户的操作使状态发生变化，状态变化导致视图发生不同的改变，又使用户可以执行不同的操作如果多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。
2025-06-13 21:04:23
901
原创 Vue 17 | 计算属性
有时，会修改计算属性，进行赋值，需要给计算属性设置setter方法，表示给当前计算属性设置值的时候会被调用。计算属性的setter。
2025-06-13 21:02:09
160
原创 Vue 16 | watch监听器
比如监听时，数据发生改变时可以做异步请求，假设现在在做一个仓库系统，当仓库数据发生变化时可能要重新请求仓库下的商品，这种场景下，可以在当前仓库发生变化时重新调用这个仓库下的商品接口，然后重新请求商品数据。watch是一个对象，把data中需要监听的属性放到watch对象中设置为函数，表示当监听的属性发生变化会执行什么操作。在数据发生改变时，想要做一些处理，就可以用watch。示例3：需要修改的属性的数据类型是引用数据类型。示例4：监听到数据后要完成多件事情，可以使用。示例5：指定监听的属性。
2025-06-13 21:01:39
306
原创 Vue 15 | 插槽的使用
关于插槽的api，封装高阶组件时，想要获取插槽中的内容，比如在父组件中获取子组件插槽的内容(插槽中的虚拟dom)，通过$slots获取的都是插槽中的虚拟dom，然后从虚拟dom中提取出内容，然后进行包装、逻辑的增加或者渲染函数进行渲染。如果在父组件中使用子组件时不传任何内容，在子组件的slot标签中可以写入一些标签内容作为“后备内容”，也就是父组件不传内容时显示的默认内容，当父组件有内容时，就显示父组件传入的内容。可以在slot中提前设置一段内容作为默认值，当父组件提供插槽内容时将会被。
2025-06-13 21:01:04
554
原创 Vue 14 | 父子组件通信$refs
在mounted生命周期中获取ref属性，能够把它所在的标签在解析后输出，也就是能拿到这个dom。emit传递)，但是使用$refs，操作子组件响应的逻辑，也在父组件中操作，那么后续如果要维护子组件的内容，就要在父组件中寻找，这样就比较麻烦，尽量避免用ref来实现。来实现，存在弊端：当前的业务与通信方式比较混乱，正常来说，父组件的数据应该在父组件中操作。// 调用子组件的方法,把当前的message进行传递。// 1、把获取到的数据赋值给msg。// 获取到子组件的实例。，子组件的在子组件中操作。
2025-06-13 21:00:33
756
原创 Vue 13 | 父子组件通信props/$emit
v-slot：可以实现父子组件单向通信（父向子传值），在实现可复用组件，向组件中传入DOM节点、html等内容以及某些组件库的表格值二次处理等情况时，可以优先考虑v-slot。props/$emit 可以实现父子组件的双向通信，父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。父子组件间的通信，父子组件中都定义了一个输入框与显示内容，需要子组件输入的内容能够在父组件中显示，父组件中输入的内容能够在子组件中显示。下一步完成在子组件中输入，在父组件中显示。
2025-06-13 20:59:42
685
原创 Vue 12 |组件的基本用法
对于一个项目，可以将整体进行拆分为几个部分，每个人负责不同的部分(协同开发)组件的拆分思想：将复杂的页面进行功能拆分，形成功能单一的模块，有利于后期的维护；对于复用性而言，把重复的功能封装成一个组件，在需要使用时进行引用即可联系上一篇生成的vue项目。
2025-06-13 20:48:19
734
原创 Vue 11 | Vue-cli脚手架
完成后可以在左边的目录中看到有一个文件夹，node_modules文件装置相关的依赖，public表示当前的入口，项目通过打包后，会把页面内容挂载到public的index.html文件中，src文件是具体的项目文件：静态资源、组件和入口文件main.js、页面的入口文件App.vue。，这个可以理解为本地的服务器，App.vue以及后面引入的一些样式文件，会在运行前，通过打包形成静态资源，静态资源的访问就要通过服务器，所以就是通过这个service创建了一个本地的服务器，然后把静态资源放到了服务器上，
2025-06-13 20:47:40
269
原创 Node.js的安装
npm是node环境下的包管理器，有一个npm服务器，npm可以给开发人员提供别人放在npm服务器中的代码包，通过使用npm命令将这些包或库从服务器中拉取到本地进行使用，也可以把自己写的代码包推到服务器中给别人用。2、在系统变量中新建一个，变量名“NODE_HOME”用来指定node的安装目录，找到刚才下载的node根目录的地址复制一份，作为变量值，然后确定。全部安装包，找到适合的版本(最好不要最新版本)，然后点击下载，找到合适的安装路径。3、在系统变量中的path中，新建3个环境变量。
2025-06-13 20:46:18
257
原创 Vue10 | 生命周期钩子
在挂载前，在当前的生命周期中，完成了data与虚拟dom数据初始化，已经可以拿到虚拟节点了，这里还没有把虚拟节点转换为真实的节点挂载到页面，所以说，在当前的生命周期中，还可以渲染数据，这是渲染前最后可以修改数据的地方，也就是说在这个生命周期中，我们还可以对数据进行处理。在生命周期中，没有数据，页面就是空白的，没有methods也没有挂载，整个Vue页面处于一个初始化阶段、这时要给用户一个友好的提示，所以可以添加loading效果。vue生命周期表示在组件创建后的一系列变化，其中钩子函数会在。
2025-06-13 20:34:00
748
原创 Vue 09 | 事件处理
在html上绑定的事件在vue内部已经做了处理，在ViewModel被销毁的时候，所有监听的事件会被解绑。当点击时，需要获取到当前的事件对象，比如在进行拖拽、进行点击位置的动画效果处理时，就需要使用这点。针对于一些特殊场景，我们还需要获取事件对象，在原生js中，点击时，第一个参数就是默认事件对象。点击商品时，输出的信息中除了商品的信息，还有一个叫PointEvent的对象，这就是事件对象。对于获取点击项的数据，可以用上面这种写法。// click事件的行为。需要在事件中传入参数。
2025-06-13 20:31:47
267
原创 Vue 08 | 列表渲染
基本语法遍历items，item表示列表的每一项元素需要显示的是对象的message属性{{ item.message }}:key是v-bind:key的缩写key的作用是vue内部虚拟 DOM 在更新过程中辨别新旧节点，在数据顺序发生变化的时候，能够快速找到可以复用的dom节点思考下，这里添加点击对应项高亮的功能，如何实现？在li标签中给元素添加click事件，当点击时给元素添加标识，通过标识进行比对，就可以找到我们选中的那一项，然后就给它加上一个class样式或style样式dat
2025-06-13 20:31:15
717
原创 Vue 06 | 动态class
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。效果是：当点击按钮时，修改classObj这个对象中的一个属性，点击按钮，class由item改为isaAtive item，实际就是修改对象中isaActive的值，使其显示与否，每一次点击都能够使其值发生变化，从而有显示与关闭的效果。前面的代码，我们在v-bind中传入对象，但是在实际项目中，一般是把这个对象定义在data数据中，没有设置class时，在控制台代码中的div里面没有内容。
2025-06-13 20:29:45
903
原创 Vue 05 | 常见修饰符
打开控制台可以观察到，点击时，是先触发了点击事件，再发生页面跳转。有的时候，我们并不想让这个默认跳转的事件发生，就可以在click事件后面使用prevent修饰符，阻止这个默认事件发生。由原生js可知，事件触发是先有捕获阶段的，如当我们点击这个box，会先触发container再触发box。用lazy修饰后，在input(在输入框输入)，msg不显示，只有不选中输入框，点击空白处，msg才会刷新。一个事件嵌套在另一个事件中，当触发内层事件时，内外两层事件都被触发，这叫做事件冒泡。
2025-06-13 20:29:11
654
原创 Vue 04 | 动态参数
引用的网址：https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js。3、动态参数里面尽量不用大写字符，因为浏览器会把 attributeName全部强制转为小写。2、动态参数的表达式由于语法约束，不能有空格和引号，可以使用计算属性来解决。1、动态参数的值要求是一个。script引用vue。
2025-05-23 02:05:20
314
原创 Vue 03 | 响应式原理
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。Vue是声明式框架，
2025-05-23 02:04:48
233
原创 Vue | 命令式与声明式
在理论中声明式框架的性能应该是不会超过命令式代码，但是在实际中，我们很难开发出绝对优化的命令式代码。所以声明式的找出差异的性能消耗可以忽略不记，但是从写法上可以大大简化，让开发者更多的专注于数据层的修改。两种方式都是有原生js来实现的，所以声明式不会优于命令式，而且声明时书写的方式在编译时要解析为html时，这个解析的流程会消耗性能。当找出差异的性能消耗为0时，声明式代码与命令式代码的性能相同，但是无法做到超越。我们知道声明式框架的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗。
2025-05-23 02:03:25
308
原创 ES6 | class
子类中的constructor，调用时通过super方法可以把参数传到父类中的constructor。class可以理解为是一个语法糖，将js只能通过构造函数创建实例的方法进行了补充。3、通过 new 关键字创建出的实例的constructor指向该class。4、class内部的方法实际上都是定义在类的prototype上。子类中的constructor必须调用super，否则就会报错。2、class的原型的constructor指向class。静态方法里面的this指向的是类。类的属性名可以动态设置。
2025-05-23 02:01:42
865
原创 ES6 | proxy
Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。pro对象中没有foo属性，所以会沿着原型链向上找，找到proxy对象，有get对其进行拦截，所以就会输出Yuuka。通过Proxy的revocable方法，会返回一个对象，对象中包含两个属性：data：当前的。1、访问属性：proxy[foo] 和 proxy.bar(通过点的方式访问，前面有演示过)（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。2、通过属性查找数组中的特定对象。
2025-05-23 02:01:11
872
原创 ES6 | async与await
3、await后面promise的状态是reject，则await后的代码不会执行，async函数将返回状态为reject的promise。4、async函数内部如果存在await，await表达式会暂停整个async函数的执行，等当前位置promise状态改变后才能恢复。1、async函数内部会返回一个promise对象，如果看起来不是promise，那么它将会隐式的包装在promise中。，如果后面不是一个promise，await 会把该值转换为已正常处理的Promise(fulfilled)
2025-05-23 02:00:39
364
原创 ES6 | 手写promise
/成功的参数//失败的参数// 定义promise的状态// 状态修改为成功// 状态修改为失败// 实现 then 方法// 接收成功传来的数据// 接收失败传来的数据执行案列})})很显然 上面的案例是一个同步操作，我们来看下第二个案例// 添加定时器}, 1000)})// 无法触发})
2025-05-23 01:59:46
338
原创 ES6 | Promise
（如果在内部，没有使用resolve、reject来改变promise状态，promise本身就是pending状态）Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）,返回一个promise实例。Promise.resolve()方法会返回一个状态为fulfilled的promise对象。Promise.reject()方法返回一个带有拒绝原因的Promise对象。Promise的三种状态。
2025-05-23 01:59:10
714
原创 ES6 | 箭头函数于方法扩展
4、不能使用yield命令，因此箭头函数不能用作 Generator 函数。三个点加一个参数名，注意先后顺序不能换，rest参数不能作为第一个参数。arguments参数对象，是函数里自带的变量，不需要声明。2、不能作为构造函数 没有prototype属性。
2025-04-17 02:44:18
664
原创 ES6 | Map数据类型
Map是什么？ES6 提供的另一种新的引用类型的数据结构 它类似于，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键）以前引用类型中的对象也是键值对的集合 但是键限于字符串总结起来就是Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 “键值对” 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适怎么声明Map数据结构证明是引用类型数据还可以用字面量的方式来创建map对象。
2025-04-17 02:43:48
1425
原创 ES6 | Set数据类型
对于引用数据类型，has比较的是地址，比如前面的例子中有给set添加空对象，后面输出发现传入的两个空对象都能在set里面，说明分别传入的空对象并不全等，也就是地址不等。特殊情况就是NaN的情况 虽然NaN === NaN 返回false(其实NaN == NaN也会返回false)（因为{} === {} 返回false 其实 {}=={}也是返回false）Set是新的引用型的数据结构 它类似于数组，但是成员的值都是唯一的，Set支持链式调用，如s.add(1).add(2).add(2);
2025-04-17 02:43:17
474
原创 ES6 | Symbol数据类型
Symbol.iterator属性，指向数据默认遍历器的方式，对于没有iteratior接口的数据，比如上面这个例子的obj对象，如果想要这个对象通过for of来遍历，就要手动的给它添加一个iterator接口，也就是用Symbol.iterator来添加方法。： Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值。Symbol可以接收参数，但也是字符串类型，所以根据上面的例子，可以推测，也是隐式调用了toString()方法。
2025-04-17 02:42:25
611
原创 ES6 | 解构赋值
是什么？对象解构赋值允许你使用对象字面量的语法将对象的属性赋给各种变量。作用：解构赋值可以方便地将一组参数与变量名对应起来。（可以很方便的提取我们对象中的值）入门例子 解构不仅可以用于数组，还可以用于对象。name:'张三',age:12对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值// 注意：如果解构失败，变量的值等于undefined。
2025-04-17 02:41:49
389
原创 ES6 | const、var、let的使用
let、const声明的变量var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
2025-04-17 02:41:09
331
原创 Python | 生成器与列表推导式
转化为迭代器用iter方法，因为先要在内存中有这么一个列表，才能转化，所以在还没转化前就已经占用很大的内存了。使用生成器来取这个列表元素，因为一个yield对应一个next，所以每次取时，在内存中只会占用当前yield出来的数据的内存量。i是从iterable中取一个就放一个到列表中，iterable中有多少个元素，循环后列表中就有多少个元素。输出结果是打印200次，每次在内存中占用的内存只有当前的i那么大。这里的1不是取出来的，是调用时打印出来的，2才是取出来的。迭代器是有提供的，或者是转化而来的。
2025-04-17 02:40:12
681
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人