- 博客(27)
- 收藏
- 关注
RSS订阅原创 vue3学习小知识
2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交30+个RFC600+次PR99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0-什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
2023-07-02 23:08:02
100
原创 基础面试题
原因就是子元素和父元素上边框重合在一起- 解决办法：- 为父元素设置内边距padding。来代替给子元素设置margin-top- 为父元素设置边框border。- 为父元素设置 overflow: hidden。
2023-07-02 22:57:42
549
原创 vue-router
路由理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。1.基本使用安装vue-router，命令：npm i vue-router应用插件：Vue.use(VueRouter)编写router配置项://引入VueRouterimport VueRouter from 'vue-router'//引入Luyou 组件import About from '../co
2022-01-18 11:00:24
143
原创 Vuex（状态管理模式）
Vuex1.概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。2.何时使用？ 多个组件需要共享数据时3.搭建vuex环境创建文件：src/store/index.js//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备act
2022-01-18 10:56:29
131
原创 Vue中的插槽
插槽作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。分类：默认插槽、具名插槽、作用域插槽使用方式：默认插槽：父组件中： <Category> <div>html结构1</div> </Category>子组件中： <template> <div>
2022-01-18 10:50:04
100
原创 Vue脚手架配置代理
vue脚手架配置代理方法一 在vue.config.js中添加如下配置：devServer:{ proxy:"http://localhost:5000"}说明：优点：配置简单，请求资源时直接发给前端（8080）即可。缺点：不能配置多个代理，不能灵活的控制请求是否走代理。工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）方法二 编写vue.config.js配置具体代理规则：module.exports = { de
2022-01-18 10:45:37
120
原创 组件，webStorage，全局事件总线（GlobalEventBus），消息订阅与发布（pubsub）。
组件化组件化编码流程： (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 1).一个组件在用：放在组件自身即可。 2). 一些组件在用：放在他们共同的父组件上（状态提升）。 (3).实现交互：从绑定事件开始。props适用于： (1).父组件 ==> 子组件 通信 (2).子组件 ==> 父组件 通信（要求父先给子一个函数）使用v-model时要
2022-01-18 10:31:37
164
原创 Vue中的ref，props，mixin，scoped。
ref属性被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）使用方式：打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>获取：this.$refs.xxxprops配置项功能：让组件接收外部传过来的数据传递数据：<Demo name="xxx"/>接收数据：第一
2022-01-18 10:20:22
135
原创 过滤器-内置指令-生命周期-内置关系
一。过滤器过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”备注：1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据, 是产生新的对应的数据.二。内置指令v-bind: 单向绑定解析表达式, 可简写为 :xxxv-m
2022-01-17 18:11:41
66
原创 Vue中的一些小知识
一。vue中的数据代理1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。二。事件处理1.事件的基本使用：1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事
2022-01-17 17:47:59
101
原创 Vuex中的模块化-Module
Vuex中的模块化-Module为什么会有模块化？由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护由此，又有了Vuex的模块化模块化的简单应用应用定义两个模块 user 和 settinguser中管理用户的状态 tokensetting中管理 应用的名称 nameconst store = ne
2021-07-24 16:23:22
163
原创 数据流程渲染
1、项目文件夹1.1 utils存放工具一般有 处理日期格式化、请求的基地址、本地存储1.2api主要存放请求 根据需求文档1.3components 存放组件 在多个地方使用1.4router 存放路由1.5store存放获取设置TOKEN1.6styles 存放初始化项目的css1.7views中存放一级路由页面 在一级路由页面的文件夹下的components存放一级路由页面要使用到的组件2、数据渲染流程2.1发起请求 拿到数据2.2页面布局和样式2.3渲染数据2.4调整.
2021-07-16 19:03:06
184
原创 vuex状态管理(数据管理)
1.概念1.1组件之间数据共享1.2状态管理也可以理解为数据管理1.3提供了一个公共内存，可以给这个内存提交数据，也可以冲内存中获取数据2.使用脚手架创建项目，勾选VueX2.1初始化Store对象2.2把Store对象挂载到vue实例上3.组件传值3.1 父传子：自定义属性3.2子传父：自定义事件3.3兄弟传值：事件中心（EventBus）4.VueX中的属性4.1state4.1.1定义一个数据：用法和作用类似vue实例中的data4.1.2使用方式：基本方式：$store
2021-07-07 19:11:44
715
原创 防抖与节流
1.防抖1.1场景有些事件是会频繁触发：keyup,scroll,resize,mousemove.我们不想让它频繁触发：只需要在最后一次事件做操作即可。比如：搜索框实现步骤：在事件产生时,取消上一次的定时器，开启新的定时器。2.节流2.1场景1.有些事件是会频繁触发：keyup,scroll,resize,mousemove.2.我们依然不想让它怕频发触发，只不过不要那么频繁的触发而已3.实现步骤：在事件产生时，判断节流阀，如果节流阀成立，立刻及将节流阀设置为不成立，做正常的代码执行
2021-07-07 18:28:22
74
原创 CSS 中的rese.css和normalize.css的区别
Reset重置浏览器的 css 默认属性 ，浏览器的品种不同，样式不同，然后重置，让他们统 一。（暴力的，强制的）。NormalizeNormalize.css 是 css reset 的替代方案，保护有用的浏览器默认样式而不是完全去 掉它们（温和的，根据浏览器特性的）一般化的样式：为大部分 HTML 元素提供修复浏览器自身的 bug 并保证各浏览器的一致性优化 CSS 可用性：用一些小技巧解释代码：用注释和详细的文档来。...
2021-07-06 19:44:57
132
原创 动态组件-插槽
1.动态组件目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件场景：: 同一个挂载点要切换 不同组件 显示创建要被切换的组件 - 标签+样式引入到要展示的vue文件内, 注册变量-承载要显示的组件名设置挂载点点击按钮-切换comName的值为要显示的组件名小结：vue内置component组件, 配合is属性, 设置要显示的组件名字1.1组件缓存目标：组件切换会导致组件被频繁销毁和重新创建, 性能不高补充生命周期:activated - 激活deactivated
2021-07-05 20:49:40
241
原创 vue 生命周期-
1.vue生命周期。1.0 组件从创建到销毁的整个过程就是生命周期1.1钩子函数目的：vue框架内置的函数，随着组件的生命周期阶段，自动执行场景组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data数据分类：四大阶段八大方法1.2初始化阶段目标;掌握初始化阶段的2个钩子函数作用和执行时机含义：1.new Vue() – Vue实例化(组件也是一个小的Vue实例)2.Init Events & Lifecycle – 初始化事件和生命周期函数3.
2021-07-05 20:09:04
111
原创 vant组件库
1.vant 组件库介绍：vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用。特点：提供 60 多个高质量组件，覆盖移动端各类场景性能极佳，组件平均体积不到 1kb完善的中英文文档和示例支持 Vue 2 & Vue 3支持按需引入和主题定制1.1全部导入目的：看官方文档，下载，引入vant组件库全部引入, 快速开始:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart1.全部引入, 快速开始: https://v
2021-07-05 15:24:59
2824
原创 vue 路由的基本使用
1.vue中路由的使用步骤1.1下载依赖包yarn add vue-router1.2导入路由import VueRouter from 'vue-router'1.3使用路由插件在vue中，使用使用vue的插件，都需要调用Vue.use()Vue.use(VueRouter)1.4 规则数组const routes = [ { path: "/find", component: Find },]1.5 创建路由对象-传入规则const router
2021-07-05 14:35:48
609
原创 vue组件-组件通信
1.vue组件1.0为什么使用组件？传统开发方式，代码非常的冗余和重复，为了解决这个问题，采用组件化开发会更加节省时间和精力。1.1vue组件_概念组件是可复用的 Vue 实例, 封装标签, 样式和JS代码组件化：封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)1.2vue组件_基础使用目的：每个组件都是一个独立的个体, 代码里体
2021-07-03 20:47:23
78
原创 v-for更新机制-计算属性-过滤器-侦听器
1.vue基础1.0 v-for更新监测数组变更方法，就会导致v-for更新，页面更新数组非变更方法，返回新数组，就不会导致v-for更新，可采用覆盖数组或者this.$set()来设置数组方法改变，v-for会监测并更新页面push()pop()shift()unshift()splice()sort()reverse()这几个不会触发v-for更新slice()* filter()* concat()1.1v-for的原地更新v-for 的默认行为会尝试原地修改元素而
2021-07-03 19:14:57
544
原创 Vue中的基本指令
vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头1.v-bing语法：v-bind:属性名="vue变量"简写：:属性名="vue变量"vue变量的值, 赋予给dom属性上, 影响标签显示效果2.v-onv-on:事件名="要执行的少量代码v-on:事件名=“methods中的函数”v-on:事件名=“methods中的函数(实参)”简写: @事件名=“methods中的函数”常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数2.1v-on的事件对
2021-07-02 20:57:35
344
原创 vue的相关介绍及其配置
1.什么是vue渐进式的JavaScript框架2.什么是库和框架库: 封装的属性或方法 (例jquery.js)框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)3.@vue/cli脚手架3.1下载依赖包yarn global add @vue/cli 或者 npm install -g @vue/cli3.2@vue/cli 创建项目启动服务1.创建项目#vue和create是命令, vuecli-demo是文件夹名vue create vuecli-demo2.
2021-07-02 19:27:45
110
原创 数组的方法
基础push 往数组的最后一个位置追加元素unshift 往数组的第一个位置追加元素pop 移除数组中的最后一个元素，并返回这个被删除的元素shift 移除数组中的第一个元素，并返回这个被删除的元素splice 移除数组中的某个位置的元素，也可以移除多个slice 切割数组，返回新数组，不会对原始数组造成影响concat 实现数组的拼接，返回新数组，不会影响原始数组reverse 实现数组的反转，返回新数组，影响原始数组sort 数组排序，返回新数组，会影响原始数组join 把数组用字
2021-07-02 19:17:51
64
原创 webpack中的插件
1.自动生成html文件。1.1下载插件yarn add html-webpack-plugin -D1.2-webpack.config.js中的配置// 引入自动生成 html 的插件const HtmlWebpackPlugin = require(‘html-webpack-plugin’)module.exports = {plugins: [new HtmlWebpackPlugin({template: ‘./public/index.html’ })]}2.加载器-处理
2021-07-02 18:56:54
57
原创 webpack的基本概念
1.webpack能做什么？能够将很多文件打包整合到一起，缩小项目体积，提高加载速度。2.webpack的使用步骤。2.0-webpack的基础使用1.初始化包环境 yarn init。2.安装依赖包 yarn add webpack webpack-cli -D。3.配置script（自定义命令）scripts: {“build”: “webpack”}4.新建src目录文件5.新建src/add/add.js- 定义求和函数导出export const addFn = (a, b
2021-07-02 18:40:41
90
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人