Vuejs
关注
分享
扫一扫
文章平均质量分 66
本专栏存放Vuejs学习中的各种解决方案神操作
博客zhu虎康
把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
展开
-
CSS ——相关链接制作
扩展：a标签后面加 target=“_self” 是此窗口默认打开 (这个属性是默认的)a标签打开新窗口 只需要在a标签后面加 target=“_blank”原创 2024-11-01 14:51:23 · 217 阅读 · 0 评论 -
封装一个时间展示包括：年-月-日-时-分-秒-星期
实现如图所示的时间展示。原创 2024-11-01 14:49:49 · 219 阅读 · 0 评论 -
报错：Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are
在Vue 3.4版本中引入了特性标志__VUE_PROD_HYDRATION_MISMATCH_DETAILS__，是一个编译时的特征标志（feature flag），它用于控制在生产环境下服务器端渲染（SSR）过程中hydration（激活）阶段的错误处理行为。标志后，即使在生产环境下，当发生hydration不匹配错误时，Vue也会输出详细的错误信息，这对于调试和排查此类问题非常有用。默认情况下，在生产环境中，Vue通常会简化这类错误报告以提高性能和减少包体积。vue报错之“Feature flag。原创 2024-08-22 08:30:35 · 2144 阅读 · 0 评论 -
Vue3+Vite项目启动报错：Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined
这个警告是由 Vue 在开发环境中的特定配置引起的，它提示你在 esm-bundler 版本的 Vue 中需要定义特定的编译时特性标志（compile-time feature flags）以获得更好的树状结构提示（better tree-shaking）。通过以上配置，你可以在项目构建过程中明确地定义 VUE_PROD_HYDRATION_MISMATCH_DETAILS 这个特性标志，从而消除警告并获得更好的tree-shaking效果。vue3 项目启动时报错如下，这个警告不会影响到项目的运行。原创 2024-02-22 15:05:35 · 5288 阅读 · 2 评论 -
vue3中的watch 和 watchEffect
执行结果首先打印一次state.count和count值（默认依赖）；然后每隔一秒，打印state.count和count值。从上面的代码可以看出， 并没有像watch一样需要先传入依赖，watchEffect会自动收集依赖, 只要指定一个回调函数。在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。watchEffect 只需要一个函数，无深度、立即监听。原创 2024-01-12 14:47:02 · 484 阅读 · 0 评论 -
【报错】VM296:1 Another version of Vue Devtools seems to be installed. Please enable...
因为之前在学习时引入了 Vue2和Vue3 的可视化插件，因此现在控制台报错的意思是 ： 装了多个vue的开发插件（Vue.js devtools）。只保留一个版本就行了，其他的删除或者禁用就可以了。只保留一个版本就行了，其他的删除或者禁用就可以了。在运行项目后，控制台报错如下。原创 2023-08-22 11:25:30 · 273 阅读 · 0 评论 -
统计数组中的重复数据的数量
开发项目时，进行 行列合并时需要计算当前某值的出现次数，从而决定合并的行数，在搜集资料以及思考下做出如下总结。原创 2022-10-18 19:44:09 · 1579 阅读 · 0 评论 -
JS中的typeof
在开发中，经常会判断当前变量的数据类型，因此会用到 typeof 进行对数据类型的判断，那么今天就谈一下typeof。原创 2022-10-12 11:49:40 · 90 阅读 · 0 评论 -
一文搞懂Vue3中如何使用ref获取元素节点？
虽然 Vue2 和 Vue3 中的 ref 使用方式有着较大的区别，但是它们的目的都是一样的，所以我们只要朝着目的前进，都会与美好相遇的！原创 2022-09-17 20:47:19 · 6274 阅读 · 2 评论 -
vscode添加自定义注释
使用ctrl + shift + p 调出如下窗口，并且输入snippets第三步：最后想分享一下红色警戒的源码 注释的格式 ，在红色警戒的源码公开之后，他的注释简直堪称经典我整理了一下这段注释，致敬经典！...原创 2022-07-21 09:26:46 · 1188 阅读 · 0 评论 -
限制input框中的输入类型及长度
今天主要聊聊对输入框加限制的问题。在做项目时，想要给输入框输入做限制要求，但经过反复尝试得不到想要的效果，因此在百解之下，终于找到了心仪的办法。原创 2022-07-19 20:53:43 · 2247 阅读 · 0 评论 -
js之数组，对象，类数组对象
数组定义：一组有序的数据集合，其索引从0开始且自然增长的整数，其元素值可以是任何js数据！并且包含一个名为length的属性，该属性表示数组元素的个数！从上面的例子我们可以看到，在声明数组时，我们只是显式的声明了数组元素的值，并没有显式的给这些值定义索引和length属性，但是在数组定义好后我们发现就可以直接使用数组的索引值来操作数组的元素了，从这不难看出，数组元素的索引和length属性是在数组定义时根据数组元素语言自动就帮你定义好了！而且很容易就能看出来，索引值是从0开始并且自然递增的！对象定义：一组原创 2022-07-18 20:24:29 · 297 阅读 · 0 评论 -
Vue中v-mdoel
当输入类型为text时这通常很有用。如果输入类型是number，Vue能够自动将原始字符串转换为数字，无需为v-model添加.number修饰符。如果这个值无法被parseFloat()解析，则返回原始的值。在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步(除了上述输入法组织文字时)。即当输入框失去焦点，再去同步输入框中的数据。即自动过滤用户输入的首尾空白字符。即将输入框的内容自动转为数字类型。...原创 2022-07-18 08:30:37 · 209 阅读 · 0 评论 -
数组操作吧
总结参数个数为2个，是删除，参数个数是3个并且第二个参数是0表示新增，不为0表示替换。第二个参数，表示传入要删除几个元素（如果没有传，就删除后面所有的元素）第二个参数，表示我们替换几个元素，后面的参数表示用于替换前面的元素。第一个参数，表示开始插入或者开始删除的元素的位置下标。//删除元素、插入元素、替换元素。第二个参数，传入0，并且后面接上要插入的元素。...原创 2022-07-16 08:58:43 · 340 阅读 · 0 评论 -
v-for为什么要加key
本节内容在日常开发中，经常会使用v-for进行遍历，但是每次使用其时，都要被强制的加上key，那么key究竟起着什么样的作用？话不多说，我们先看一个案例。原创 2022-07-15 00:01:40 · 364 阅读 · 0 评论 -
Yarn的安装与使用
文章目录Yarn1、Yarn的简介2、Yarn的安装3、Yarn和npm的对比Yarn1、Yarn的简介Yarn是一个新的JS包管理工具，是为了弥补npm的一些缺陷而出现的npm缺陷npm install安装速度慢同一个项目，多人开发时安装的时候无法保持版本的一致性安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生原创 2022-04-14 08:00:00 · 479 阅读 · 0 评论 -
Vuejs项目练习
练习一：作业需求：点击列表中的哪一项，那么该项文字变为红色（结合v-for和v-bind来实现实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>作业</title> <style> .active{ color: red; } </style>&原创 2021-10-07 17:02:51 · 908 阅读 · 0 评论 -
【Vue】v - if与v - show的区别【超详细版】
相同点v-if 与 v-show 都可以动态控制DOM元素显示隐藏区别v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；在编译过程中，v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载)原创 2021-12-19 22:01:25 · 370 阅读 · 0 评论 -
Vue中的滚动事件
文章目录一、安装相应模块组件二、原生实现：设置滚动区域二、实现一、安装相应模块组件npm install better-scroll@1.13.2 --save二、原生实现：设置滚动区域注：overflow-y:scroll属性用于表示超出该块后自动隐藏弊端：在移动端会非常卡顿，划一下卡一下二、实现...原创 2021-11-23 21:41:49 · 3703 阅读 · 0 评论 -
vue3成功创建项目后 run serve启动项目报错
文章目录遇到的问题第一次错误第二次错误后来，我是这样解决的遇到的问题使用vue3成功创建项目后无法正常npm run serve。第一次错误Error: Cannot find module 'vue-loader-v16/package.json'在报错后我采用 了如下方法：npm i -D vue-loader@14我以为是vue-loader的版本过高，不兼容导致的问题。但是再次执行npm run serve时又出现了新的错误。第二次错误Error: vue-loader req原创 2022-03-03 10:34:49 · 1938 阅读 · 0 评论 -
Vuejs组合ElementUI组件库报错
当我们使用Vuejs和ElementUI组件库结合使用时，按照文档进行按需导入时报了如下错误：出现原因预设Preset配置中出现错误解决办法修改预设Preset配置原创 2022-03-02 22:47:28 · 769 阅读 · 0 评论 -
Vue项目上线部署
文章目录项目上线部署步骤第一步第二步第三步第四步项目上线部署步骤在router\index.js文件中配置mode第一步第一步：将vue项目打包生成dist文件夹：npm run build第二步第二步：打包出来的项目必须放在服务器上部署一遍才可打开第三步第三步：使用nodejs搭建本地微型服务器，将项目部署新建一个空文件夹demo，变成一个合法的包：npm init安装express：npm install express资源部署：新建一个文件夹demo\sta原创 2022-03-02 20:04:13 · 4763 阅读 · 2 评论 -
篇章十 VueCLI 脚手架
Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置原创 2022-02-20 10:36:49 · 1348 阅读 · 0 评论 -
Vue组件中按下回车键获取value值
Vue组件中按下回车键获取value值的两种方法安装npm install nanoid，并在代码中导入并调用nanoid()函数可以生成随机的id值第一种：使用event获取数据<template> <div> <input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/> <div/></template><s原创 2022-02-15 23:25:25 · 2132 阅读 · 0 评论 -
Vue组件创建原理_VueComonent构造函数
其实，我们在使用Vue.extend({})创建组件时，本质是在调用VueComponent构造函数，即如下原理：因此，关于VueComponent，有如下总结原创 2022-02-12 11:39:37 · 474 阅读 · 0 评论 -
Vue中的组件嵌套
今天完成的是一个组件嵌套功能，实现的是如下效果，其中school1 与school2是同级关系我是这么想的：先用app去接管vm中的所有组件，app中有school1组件和school2组件，然后在school1中嵌套student，student组件中嵌套hello在解决组件school1与schoo2同级关系时，控制台报了如下错误，奇奇怪怪的错误让我school1与school2不能同时出现在经过理解转化之后，修改代码前后对比如下【后者为正确代码】话不多说，直接上代码理.原创 2022-02-12 01:15:25 · 979 阅读 · 0 评论 -
Vue中收集表单数据
收集表单数据源码解析：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &原创 2022-02-09 01:51:58 · 302 阅读 · 1 评论 -
篇章九（3）Vuejs补充版
Vuejs补充版一、区分 js 表达式和 js 代码（语句）一、区分 js 表达式和 js 代码（语句）原创 2022-01-28 22:37:33 · 2334 阅读 · 0 评论 -
Vue中的px2vw，做移动端的适配
文章目录一、安装二、 新建 postcss.config.js 文件，做相关配置将 px 转化成 vw一、安装npm install postcss-px-to-viewport@1.1.0 --save-dev二、 新建 postcss.config.js 文件，做相关配置原创 2021-12-23 14:49:04 · 814 阅读 · 0 评论 -
Vue中的图片懒加载
文章目录图片懒加载一、安装插件二、在入口文件 main.js 中并引入使用懒加载插件三、在所需要的文件中修改img对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。实现方法(使用vue的vue-lazyload插件)图片懒加载一、安装插件npm install vue-lazyload@1.2.6 --save二、在入口文件 main.js 中并原创 2021-12-22 18:36:10 · 371 阅读 · 0 评论 -
Vue项目开发小Tips
一、划分目录结构src目录下：assets文件夹：存放资源components文件夹：公共组件common文件夹：存放全局公共的组件content文件夹：存放和业务相关的公共组件views文件夹：存放一些大的视图，比如home、categoryrouter文件夹：存放路由相关的store文件夹：存放公共状态管理network文件夹：存放于网络相关的所有东西common文件夹const.js：存放公共的js文件，存放一些常量utils.js：存放一些工具类的方法函数二、CSS原创 2021-12-22 15:28:11 · 2479 阅读 · 1 评论 -
Vue中的Slot插槽
插槽可以说是 Vue 中非常重要的一部分吧今天介绍Vue中三种插槽吧：默认插槽、具名插槽、作用域插槽。文章目录环境准备Category组件App组件一、默认插槽二、具名插槽三、作用域插槽环境准备先搭个初始环境给大家看看哈。一步一步讲完这个插槽。就是写了一个类别组件，分别渲染这三种数据。Category组件<template> <div class="category"> <h1>{{title}}</h1> &l原创 2021-12-03 21:10:51 · 245 阅读 · 2 评论 -
篇章六 网络请求模块选择——axios
文章目录一、为什么选择 axios？一、为什么选择 axios？axios = ajax i/o system在浏览器中发送 XMLHttpRequests 请求在 node.js 环境中发送 http 请求支持 Promise API拦截请求和相应转换请求和相应数据等等...原创 2021-11-19 10:33:10 · 807 阅读 · 0 评论 -
篇章九（2）Vuejs进阶版
说明：Vuejs进阶版继承Vuejs基础版上一篇：Vuejs基础版目录大纲二十一、组件化开发1、组件化的实现和使用步骤1.1、什么是组件化？1.2、Vue组件化思想1.3、注册组件的基本步骤2、全局组件和局部组件3、父组件和子组件4、注册组件语法糖4.1、全局组件注册的语法糖4.2、局部组件注册的语法糖5、组件模板抽离写法6、父子组件的通信7、父传子——props数据验证8、子传父——自定义事件9、父子组件的访问9.1、父组件访问子组件：使用 $children 或 $refs9.2、子组件访问父组件：原创 2021-11-19 10:30:41 · 2624 阅读 · 0 评论 -
篇章九（1） Vuejs基础版
目录大纲VueVue.js安装方式一：直接CDN引入方式二：下载和引入方式三：NPM安装VueVue.js安装方式一：直接CDN引入<!-- 开发环境版本，包含了有帮助的命令行警告--><script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度，上架产品的时候需要--><script src ="https://cdn.j原创 2021-11-19 10:29:49 · 1624 阅读 · 0 评论 -
git项目创建和GitHub托管
文章目录一、项目创建二、仓库创建第一步：建仓库第二步：建项目第三步：创建成功第四步：`git clone https://github.com/xxx/supermall.git` ：完成项目的克隆第五步：拷贝如下内容到新克隆的项目中第六步第七步：到github下刷新页面，显示提交成功三、仓库创建的更简便的方法：通过两个指令完成项目的创建一、项目创建vue create supermall ：创建项目 supermallnpm run serve：运行项目，在package.json文件下查看当前运行原创 2021-11-17 12:53:06 · 399 阅读 · 0 评论