- 博客(35)
- 收藏
- 关注
RSS订阅原创 vuex（State、getter、mutation、action）
mutations用法 ==>08节getters用法 ===> 11节actions中传入的两个参数 分别是上下文context(mini版store，基本含以下内容，如下图)、传入的值mutations中传入的两个参数分别为state、传入的值一般的写法中，actions里的函数名称是小写，mutations里的函数名称是大写。actions中可以直接修改state值，但这么操作，因为根据图一，devtools是直接跟mutations对话的，更加符合标准。
2024-12-19 09:25:00
302
原创 vue配置代理服务器
有些时候可能会通过浏览器 F12 查看 request Header 的 Host，发现它无论怎么修改 changeOrigin，host它均为前端服务器地址（http://localhost:81）,于是就认为 changeOrigin: true 无效。用axios请求资源时，直接请求前端资源，如果public目录下有该资源，直接拿，当请求了前端不存在的资源时，请求会转发给服务器。在项目目录中，public文件夹下的文件，都可以直接获取到，例如test.txt文件。
2024-12-19 09:21:10
673
原创 css动画
css(样式处用.v-enter-active和.v-leave-active)**提示：**css中就不用再定义所需要的使用的动画那些。或者动画里的百分比可以换为from 和 to。html(用transition标签包裹)具体链接在标题36下方。
2024-12-19 09:17:32
308
原创 浏览器的事件循环
1. 模型原理图2. 概念Callback queue（回调队列）是JavaScript中的一个概念，用于处理异步操作的回调函数。在Web浏览器中，当发生异步事件（如用户点击、Ajax请求返回、定时器到期等）时，这些事件的回调函数将被添加到回调队列中。回调队列遵循事件循环(Event Loop)机制，它的作用是等待执行。当主线程空闲时，它会检查回调队列，并按照先进先出的顺序执行队列中的回调函数。这样可以确保异步操作的回调函数按照预期的顺序执行。需要注意的是，回调队列中的回调函数并不会立即执行，而
2024-12-19 09:13:51
327
原创 $nextTick
refs.input取不到input框，因为当前函数还没执行完，dom节点不会更新，只有当edit()函数执行完后，dom节点才会更新。什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在$nextTick所指定的回调函数中执行。虽然也可以执行，但是就算是不给时间，也会推向队列去执行（第35章），不够官方。将this.$nextTick()的内容换成定时器，不给时间。就是在执行完当前函数后再执行nextTick中的内容。**注：**如果不加this.其他解决方案（不推荐）
2024-12-19 09:12:35
241
原创 Vue3基础知识
引用数据类型的数据：用的是Proxy，内部*‘求助’*vue3中的一个新函数–reactive函数，，所以一般来说用reactive函数来定义对象类型响应式。但是reactive不能用于基本数据类型的响应式，如果硬要用，可以将所有的基本数据作为key、value当作属性放在对象中。内部基于ES6的Proxy实现，用过代理对象操作源对象内部数据进行操作，可被vue内部捕获到（数据劫持）。引申：Object与Reflect。而在模板解析中，如果发现该数据是引用实现对象，会默认取到value值，而不用手动添加。
2024-12-18 09:48:17
1008
原创 vue打包事项的注意
用来指定使用哪种模式，有三种production，development，none，如果使用production会专门对正式环境做一些优化如移除map文件，添加代码压缩等，如果是development则会有开启一些开发环境的功能。指定使用哪种环境，如开发环境、测试环境、正式环境，这三个环境都会有对应的API请求地址，就可以用这种方式来判断不同的环境用哪个API。就是执行env.production的模式。在package.json文件中。
2024-12-18 09:29:11
401
原创 js类详解
在实例化类的时候，只会执行constructor里的代码。在构造函数的方法return 并不会停止执行下面的代码。constructor构造函数中必须带有super()constructor构造函数中方法。
2024-12-18 09:28:38
403
原创 关于监听窗口事件
顺序 为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。优先级为 n 的所有侦听器会在优先级为 n -1 的侦听器之前得到处理。侦听事件并处理相应的函数。
2024-12-18 09:26:46
736
原创 git相关操作
项目代码版本管理工具: git自己新建, 新项目, 确保有什么文件夹?项目文件夹下, 有隐藏.git文件夹 (它里面记录了你所有的版本提交, 远程仓库相关配置)如果没有则运行如下命令, 初始化一个git init别人的/克隆的项目, 我们需要git init吗?
2024-12-18 09:24:31
925
原创 打包相关问题
publicPath:默认值’/'确保开发环境下，是这个值，因为开发服务器会把所有打包在内存里而且作为服务器的根目录文件夹，绝对地址。敲击yarn build, process.env.NODE_ENV的值就是’production’字符串。地址是以 / 开头（要找到当前index.html打开时所在服务器的根地址（文件夹）），process.env.NODE_ENV会根据敲击的命令，来使用不同的值。**问题：**打包减小体积，排除第三方包，出现有的包404。./可以让开发环境和生产环境都可以正常使用。
2024-12-18 09:22:42
496
原创 Vue图片选择与预览
现在：写的模板代码，是要被webpack翻译处理转换的，vscode里的代码，转换后打包到内存中/dist下，相对路径就会变化，运行时，你写的固定路径字符串就找不到那个文件真身。我们写的路径是在vscode看着文件夹写的（以前好使的原因：用live Server/磁盘双击打开，它都能通过你的相对路径，在指定路径文件夹下，找到图片文件真身）**注意:**只有相对路径本地图片需要注意，如果是一个http://外链的图片地址，就可以直接用。Vue变量中路径，赋予给标签，都会当作普通的字符串使用。
2024-12-18 09:21:04
582
原创 scoped原理
scoped原理：webpack打包的时候会给组件标签上添加相同的data-v-hash值，然后也会给所有选择器的后面添加一个[data-v-hash]值的属性选择器。scoped只会给当前组件所有原生标签添加data-v-hash值属性，还会给组件标签内根标签添加data-v-hash值属性，组件内的标签不会添加。原来.ql-editor[data-v-hash值] 标签上既有class也要有属性才能选中设置样式。<标签 data-v-390246 class="my_a"></标签>
2024-12-18 09:14:53
197
原创 async和await
原因：async修饰的函数就是异步函数，如果此函数被调用，总是返回一个全新Promise对象，而且本次函数调用因为是异步函数，所以外面的同步代码继续执行，而await暂停代码只能暂停async函数内的，等待await后面异步结果。async修饰：就是在当前函数名左边加async关键字，如果没有函数名，在形参的左边加async，一个函数被async修饰的时候，返回值就不再是一个单纯的对象，而是一个被Promise包裹的对象。3. await后面的Promise的对象的拒绝状态（错误）如何捕获呢？
2024-12-18 09:14:13
177
原创 css权重
选择器 选择器权重(十进制) 继承或者通配符* 0,0,0,0 元素选择器（标签选择器和伪元素选择器，如div p） 0,0,0,1 类选择器，伪类和属性选择器（如.content） 0,0,1,0 ID选择器 0,1,0,0 内联样式（如style=""） 1,0,0,0 !important 无穷大
2024-12-18 09:13:27
141
原创 关于img标签的一些问题
或者是图片的base64字符串（而且字符串还必须是data:image/png;base,图片转base64字符串）只能是图片的“链接地址”（外链：http://开头，图片文件相对路径）img标签的src值。
2024-12-18 09:12:56
420
原创 route和router的区别
route是路由信息对象，每一个路由都会有route对象，是一个局部的对象，里面主要包含路由的一些基本信息，包括name、meta、path、hash、query、params、fullPath、matched、redirectedForm等等。router是VueRouter的实例，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象是一个全局的对象，它包含了所有的路由 包含了许多关键的对象和属性。一个key/value对象，表示URL查询参数。
2024-12-17 09:14:42
446
原创 Vue mixins
Vuex: 做管理状态，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件此变量的值也会随之改变。组件：在父组件中引入组件，相当于在父组件中给出独立的空间供子组件使用，然后根据props传值，但本质上两者时相互独立的。Mixins: 可以定义公用的变量，在每个组件中使用，引用组件中之后，各个变量相互独立，值的修改在组件中不会相互影响。Mixins：是在引入组件之后与组件中的对象和方法合并，相当于扩展了父组件的对象和方法，可以理解为形成了一个新的组件。
2024-12-17 09:12:40
267
原创 js中的逻辑与(&&)和逻辑或(||)
在运算过程中，js先将&&和||两边的值转成Boolean，&&运算如果结果为true,则返回最后一个为true的值，||运算如果结果为true，则返回第一个为true的值。如果结果为false，则返回最后一个为false的值。如果结果为false,则返回第一个为false的值。
2024-12-17 09:09:18
148
原创 vue组件标签绑定事件native情况
在组件标签上绑定的所有事件(包括原生事件的名字click, input等)都是自定义事件,需要组件内$emit来触发。@事件名.native="methods里面的方法名".native给这个组件的标签,绑定这个原生的事件。万一组件内不支持这个原生事件名字。
2024-12-17 09:07:25
120
原创 localStorage和sessionStorage
setItem (key, value) —— 保存数据，以键值对的方式储存信息。getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值；removeItem (key) —— 删除单个数据，根据键值移除对应的信息。但同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的.在关闭浏览器之后,sessionStorage就会被销毁.localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。
2024-12-17 09:06:39
241
原创 vuex使用mutations的两种方法
3. 组件的methods中引入mutations。2. 组件中引入mapMutations。vuex文件中定义state和mutations。vuex文件中定义state和mutations。2. 在组件中直接使用方法。
2024-12-17 09:04:19
459
原创 背景图片没有高度问题
当height为100%时，意思是继承父级高度，可修改父级高度来改变当前的高度。因为Body有高度但是那个div没有高度,所以背景图所在的div没有高度.app.vue文件中去除包裹路由的div标签。
2024-12-17 09:00:31
428
原创 css3 box-sizing属性
创建一个和上面一样的<div>时,那么它的最终宽度为100px,内容部分(content)的有效宽度为。容易margin的尺寸不会被计算入最终容器的宽度,因为对它定义为对这个容器的留白,但不属于容器本身.,所以会得到一个预期大小的盒子容器,但是只是被压缩了内容部分尺寸而已,但是对于整体布局而言益处颇多.紧跟在-webkit-,-ms-或-moz-前的数字为支持该前缀属性的第一个浏览器版本号。如果定义一个容器的box-sizing属性为border-box,表格中的数字表示支持该属性的第一个浏览器版本号。
2024-12-17 09:00:06
434
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人