![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 52
vue相关
夏目友人帐...
这个作者很懒,什么都没留下…
展开
-
vite C:\Users\dell\AppData\Roaming\npm-cache\_npx\12088\node_modules\create-vite\index.js:3
再去 npm init vite@latest 安装新建项目。node版本为12.8.0。原创 2022-11-30 13:08:25 · 1472 阅读 · 1 评论 -
vue-router连续跳转同一路由页面,页面不刷新的解决办法
跳转当前路由不会刷新页面,但route路由数据已经发生了变化,那么我们使用vue的watch去检测这样的变化,然后再重新请求数据请求接口即得到想要的数据。当前在 /order/detail 页面,继续跳转当前页面,传参不同。原创 2022-10-11 09:35:57 · 3630 阅读 · 0 评论 -
vue 报错Invalid prop: type check failed for prop “span“. Expected Number, with value 2, got String wit
vue 报错Invalid prop: type check failed for prop "span". Expected Number, with value 2, got String wit原创 2022-08-16 15:10:54 · 3533 阅读 · 0 评论 -
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent
Vue报错原创 2022-07-05 12:54:54 · 1974 阅读 · 0 评论 -
elementUI中的el-image 加载失败原因和解决方案
最近使用elementUI的el-image发现经常会出现加载src失败的情况,问题估计就是el-image的src路径一旦初始化加载失败的话就没有异步刷新:解决办法:1.给:src设置默认值,避免图片加载失败的情况2.加v-if判断:src中的value值是否为空或者:src的key值是否存在,是则加载图片,否则不加载3.vue项目error方法绑定once,为避免同一个失败链接无限触发error(加载失败后再次请求图片的方法)...转载 2022-03-07 13:20:45 · 21212 阅读 · 1 评论 -
若依 vue 菜单点击报错 Error: Cannot find module ‘@/views/system/user/index‘
菜单路由点击报错,错误信息如下: Error: Cannot find module ‘@/views/system/user/index’在项目里,打开 src/store/modules/permission.js 文件,找到如下代码:报错原因:webpack4 不支持变量方式的动态 import 引用,新版本的使用 require() 。修改为:export const loadView = (view) => { // 路由懒加载 return (resolve) =>.原创 2022-01-21 16:15:17 · 8635 阅读 · 1 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
父组件:<popup :show="showPopup" @closePopup="closePopup"></popup>子组件:<template> <div v-if="show" @click="close"> 子组件内容 </div></template> <script> export default { name: "popup", props原创 2021-08-12 11:11:30 · 243 阅读 · 0 评论 -
webpack开发配置API代理proxy,解决跨域问题
1. 一个完整的webpack配置代理代码设置代理需要:1、需要使用本地开发插件:webpack-dev-server。2、webpack-dev-server 使用的是 http-proxy-middleware 来实现跨域代理的。webpack配置信息:module.exports = { //... devServer: { proxy: { '/api': { target: 'http://blog.csdn.net/', pa原创 2021-04-19 19:45:57 · 4539 阅读 · 1 评论 -
vue踩坑之:v-for和v-if造成重复循环展示
遇到的问题:接口只返回了一组数据,但是在页面展示时却出现了重复渲染,展示了两组商品。代码如下:<div v-if="type == 1" v-for="(item, index) in productList" :key="index">预售:{{item.name}}</div><div v-else v-for="(item, index) in productList" :key="index">普通商品:{{item.name}}</div>.原创 2020-12-31 16:29:42 · 4349 阅读 · 1 评论 -
vue学习之:mixins的理解及应用
vue中提供了一种混合机制–mixins,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。我们先写一个实例。1.创建一个js文件// 创建一个需要混入的对象export const mixinTest = { data () { return { say: 'hello', msg: 'mixinTest' } .原创 2020-12-16 23:12:04 · 552 阅读 · 1 评论 -
vue学习之:slot(插槽)必读
什么是插槽?插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。怎么用插槽?1.默认插槽父组件(在父组件引用的子组件中写入想要显示的内容(可以使用标签,也可以不用)<template> <div> 我是父组件 <slotOne1> <p style原创 2020-12-14 21:44:37 · 748 阅读 · 1 评论 -
错误:‘x‘ is assigned a value but never used no-unused-vars
报错:97:21 error 'count' is assigned a value but never used no-unused-vars✖ 1 problem (1 error, 0 warnings)发生原因:发生这种情况是因为eslint的验证语法,您正在定义x但未使用它。解决方法如下:只需将其删除在错误代码后加入该行注释就行:// eslint-disable-line no-unused-vars修改后为:let count = 10000 // es原创 2020-12-01 13:52:19 · 4985 阅读 · 0 评论 -
vuecli打包 文件路径不对
如果用的是cli2版本,将config路径下的index.js文件里的 assetsPublicPath的值改为 ‘./’ 。如果用的是cli3版本,因为官方vue-cli 3,精简了很多文件,其中包括没有了cli2中的config目录,所以需要在cli3项目根目录下新建文件vue.config.js来写,注意不是src目录,是根目录。module.exports = { publicPath: '', }...原创 2020-05-18 16:47:58 · 1091 阅读 · 0 评论 -
vue props 传boolean或者数值
在自定义一个组件时,发现props中定义了一个type为Boolean的值,如何在父组件传递到子组件?props: { propA: { type: Boolean, default: false, }}初学者通常是是直接传递数值:<comp propA="true"></comp>实际上这样会导致它是以字符串 “true” 传下去。如果想传递一个实际的 Boolean值,需要使用 v-bind ,从而让它的值被当作 .原创 2020-05-18 11:36:09 · 13422 阅读 · 1 评论 -
会话气泡 带箭头的提示框
提示工具效果如下(鼠标移动到指定元素上显示提示框)代码(可复制粘直接展示效果)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>带箭头的提示框</title&原创 2020-05-11 17:18:44 · 532 阅读 · 0 评论 -
vue >>> /deep/ (sass/less) ::v-deep 和 vue3的:deep()深度作用选择器
首先让我们了解下什么叫CSS的作用域?有作用域的 CSS当 style 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换:<style scoped>.example { color: red;}</style><template> <div class="example">.原创 2020-10-28 13:45:14 · 2098 阅读 · 1 评论 -
vue学习之:自定义指令
自定义指令理论内容介绍注册一个全局指令注册一个局部指令钩子函数钩子函数参数动态指令参数对象字面量实际运用组织全局自定义指令自定义局部指令理论内容介绍除了默认设置的核心指令,Vue 也允许注册自定义指令。自定义指令好就好在可以很方便的将大量重复的事情通过一个简短的指令来实现。使用场景:对 DOM 元素进行底层操作,比如:文本框获得焦点当页面加载时,想要输入框直接获得焦点,下面指令指令可...原创 2020-04-15 17:25:46 · 801 阅读 · 1 评论 -
vue学习之:一篇搞懂vue的指令v-model,v-if 和 v-show
指令什么是指令参数修饰符常用指令v-modelv-bindv-forv-onv-if 和 v-showv-text可以用于提升性能的指令v-oncev-pre什么是指令指令 (Directives) 是带有 v- 前缀的特殊属性,指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。通过特定的指令,完成特定的事。参数一些指令能够接收一个“参数”,在指令名称之后以冒号...原创 2020-04-14 15:55:53 · 5071 阅读 · 1 评论