Vue
东方文艺复兴
嗨,你好!我是东方文艺复兴,一个满怀热情的程序员,疯狂热爱计算机科学,我对各种编程语言都有着浓厚的兴趣,从老牌的C、C++、Java,到新兴的Python、JavaScript,甚至包括那些呆萌的小众语言,我都非常感兴趣,所谓兴趣就是最好的老师!
我深信,编程不只是一门科学,它也是一种艺术,是一种可以让我们创造、进行思考、解决问题并帮助他人的魔法。我渴望用我的编程技术去帮助更多的人,用代码来解决实际问题,用软件来改变世界。
我的目标是,用我手中的键盘把这个世界敲得更加美好!!!
展开
-
Element-ui date-picker组件报错 date.getHours is not a function
在这个例子中,date是一个Date对象。当从服务器获取数据或者从其他地方获取日期,并且这个日期不是Date对象的时候,需要先将其转换为Date对象。这个错误通常意味着date这个变量并不是一个真正的日期对象,而是其他类型,例如字符串或数字。因此,无法调用日期对象的getHours方法。在Element-ui中使用date-picker组件时,应该保证绑定的数据是Date对象,而不是其他类型。原创 2024-02-09 08:20:53 · 2120 阅读 · 1 评论 -
vue element-ui中的this.$notifiy()中的message,怎么让里面的变量用换行符分开
属性为 true 来告诉 ElementUI 的消息内容是 HTML 字符串,这样 HTML 标签才会被正确解析。方法时,若在消息内容中插入变量并使用换行符来分隔它们,可以利用 HTML 的换行标签。默认将 message 属性作为纯文本处理,我们需要通过设置。下面是一个示例代码,展示了如何使用换行符来分隔。在 Vue 使用 ElementUI 的。原创 2024-02-07 23:40:26 · 1127 阅读 · 0 评论 -
Vue动态组件<component>传递变量
Vue的动态组件是一个强大的模块,通过动态组件可以让页面组件随意切换,不需要通过路由定位,它在使用过程和普通自定义的组件基本一致,如下像下方给动态组件传递props值在以上的currentComponent组件中,也有一个parentProp的props变量,这样就可以逐层传递变量啦,用于比如权限等级不同,显示的表格的列数不同等(不同权限等级对应不同的parentProp值)原创 2024-02-06 15:39:49 · 2953 阅读 · 0 评论 -
element-ui中el-switch相关样式操作,等比例缩小、靠右对齐
el-switch增加:style=“外层div增加style=“原创 2023-05-05 09:51:37 · 1184 阅读 · 0 评论 -
修改element-ui的row行样式最快的办法
deep/ 是伪类,来解决 CSS 样式作用域的问题,用来解决不同组件之间的样式冲突很有效。记得在style标签中加scope。原创 2023-04-26 09:16:28 · 385 阅读 · 0 评论 -
Chrome浏览器排查css样式的好办法-开启无障碍功能
chrome的控制台右边有个无障碍功能,点击它之后,在点击元素页面,查看对应样式就变得非常便捷。Chrome浏览器排查css样式的好办法。原创 2023-04-26 09:00:42 · 554 阅读 · 0 评论 -
Vue文件中传递this给其他js文件的函数
请注意,bind方法返回的是一个新函数,因此我们需要使用括号调用它以执行该函数。bind方法是JavaScript中的一个原生方法,它可以用于绑定函数的this值和一些预设参数,并返回一个新的函数。其中,thisArg是要绑定到函数上的this值,可以是任何JavaScript对象;而arg1、arg2等则是预设的参数。bind方法将返回一个新函数,该函数具有绑定的this值和预设的参数,当调用该新函数时,实际执行的是原始函数,并且绑定的this值和预设的参数将被传递给原始函数。原创 2023-04-23 11:33:25 · 1952 阅读 · 0 评论 -
vue中的this.$parent
需要注意的是,使用this.$parent来访问父组件的数据和方法并不是一个好的做法,因为它会使子组件和父组件耦合在一起,使得代码难以维护和复用。使用provide和inject可以让父组件向子组件传递数据和方法,而不需要使用this.$parent来访问父组件。如果子组件需要调用父组件的方法,可以使用this.$parent.someMethod()来调用方法。可以用来获取组件的父实例,可以在子组件中使用它来访问父组件的数据和方法。例如,如果子组件需要访问父组件的数据,可以使用。原创 2023-04-20 10:30:24 · 2407 阅读 · 0 评论 -
Vue js时间比较-亲测有效
参考来源:https://zhidao.baidu.com/question/1760455029553513028.htmlvar timeStr1 = '2018/08/08';var timeStr2 = '2018/12/12';var time1 = new Date(timeStr1).getTime();var time2 = new Date(timeStr2).getTime(); return time1 < time2;亲测:let oldTime = loc原创 2021-09-12 10:59:53 · 585 阅读 · 0 评论 -
Vue disabled更改无效 disabled bug 网络请求 computed
在绑定disabled之后直接设置为true是无效的原因不知道,历经原创 2021-09-01 09:25:11 · 3491 阅读 · 0 评论 -
Vue v-for :src 循环显示图片
<div v-for="(item, index) in codeList"> <img :src="'http://站点01/' + item.subCode + '.gif'" alt=''> <img :src="'http://站点02/' + item.subCode + '.gif'" alt=''><div>item.subCode不应该写成{{item.subCode}}或者{item.subCode}...原创 2021-08-30 13:08:43 · 741 阅读 · 0 评论 -
Vue:Uncaught SyntaxError: Unexpected identifier踩坑回忆
Vue项目运行之后,在谷歌浏览器打开,控制台报错:Uncaught SyntaxError: Unexpected identifier错误的中文意思是:未捕获语法错误: 意外的标识符有很多同学说,是符号问题,比如下方这个链接:https://blog.csdn.net/u012149181/article/details/78811402里面是这样解释的:chrome下运行编写的javascript代码时,在工具javascript控制台下有时会出现“Uncaught SyntaxError:原创 2021-05-27 23:33:52 · 11431 阅读 · 6 评论 -
Vue实现pc端和移动端
使用webpack构建项目后:vue init webpack my-project在App.vue文件中,添加如下代码进行移动端或pc的逻辑检测: mounted() { if (this._isMobile()) { this.$router.replace('/m_index'); } else { this.$router.replace('/pc_index'); } }, methods: { //App.vue原创 2021-03-14 11:42:53 · 606 阅读 · 0 评论 -
vue网页 PC端和移动端兼容方案
一,通过媒体查询实现响应式(@media)优点:适用于小型网页,用户交互较少的项目,代码用量较少;缺点:在页面内容过多,用户交互过多的时候,如果通过 @media 来一个个改的话,那代码量可就很多了,而且也不方便维护。因此需要另一种方式来解决这个问题。二,通过判断打开设备的类型,区分需要显示的方式和界面//App.vue mounted() { if (this._isMobile()) { alert("手机端"); // this.$router.转载 2021-03-13 23:10:54 · 2622 阅读 · 2 评论 -
Vue项目请求SpringBoot后台,浏览器警告provisional headers are shown,IDEA控制警告HttpMessageNotReadableException
问题描述:Vue项目中登录login接口请求Springboot后台,显示失败,打开浏览器控制台,出现警告:⚠️provisional headers are shownIDEA控制台也出现警告:org.springframework.http.converter.HttpMessageNotReadableException…解法方法:第1个反应是使用AdBlock等广告拦截器拦截...原创 2020-04-01 17:58:46 · 1471 阅读 · 0 评论 -
VueCLI3 run build后有些文件不显示
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',直接将根路径(pulicPath)指向./ 或者服务器的文件夹路径production是生产环境,即发布到服务器时的环境...原创 2020-03-27 14:04:10 · 1082 阅读 · 0 评论 -
Vue Element-UI:将对话框作为子组件
点击‘更新’按钮,弹出子组件uploadDialog,它是一个上传图片的组件父子组件:<template> <div> <el-card shadow="hover"> <h2 class="wx">微信支付</h2> <hr /> <el-form ref="my...原创 2020-03-04 18:08:52 · 1687 阅读 · 0 评论 -
[Vue warn]: Do not use built-in or reserved HTML elements as component id:G
我把一个vue组件命名为G.vue,运行时报错,说明g(G)是Vue中的一个关键字,不能如此命名。像这样的,在MySQL等数据中,不能将id,index之类的作为字段名是类似的。...原创 2020-03-03 22:21:24 · 399 阅读 · 0 评论 -
记一次难受的Bug
从Github拉取开源项目,跑起来,没问题,从Chrome控制台研究请求接口及response数据。复制该项目,更改API成自己的并确保每一个Response的数据跟原项目返回的一样。结果过不了登录。解决的笨办法是对这两个项目同时进行debug,找出对应差异。在debug的时候,确保每一步都是对应的,并且查看变量等信息是否一致。这些东西是非常消耗耐心的,因为系统不报错,什么都不提示,只能通过...原创 2020-02-27 12:53:39 · 185 阅读 · 0 评论 -
跨域问题解决方案
CharlesCors原创 2020-02-20 15:23:32 · 180 阅读 · 0 评论 -
Vue路由分析
具体代码实现起来挺复杂的原创 2020-02-18 20:04:44 · 158 阅读 · 0 评论 -
Vue路由和权限校验
router.beforeEach是全局的路由守卫,所有路由访问必经此方法,原创 2020-02-18 21:45:58 · 484 阅读 · 0 评论 -
浏览器中删除或修改Cookie(Token)
原创 2020-02-18 10:33:48 · 6887 阅读 · 0 评论 -
Vue文件中出现下划线红色警告
Webstrom中,格式化代码(Reformat Code)后, 会出现红色下划线解决:换行,再来一次Reformat Code原创 2020-02-17 20:30:34 · 3453 阅读 · 0 评论 -
Script格式化的问题
来源:imooc的Sam老师原创 2020-02-17 20:22:56 · 305 阅读 · 0 评论 -
Vue项目3种构建方式
在Vue项目中的vue.config.js中能够配置3种构建方式 config // https://webpack.js.org/configuration/devtool/#development .when(process.env.NODE_ENV === 'development', // config => config.devtoo...原创 2020-02-17 00:18:35 · 500 阅读 · 0 评论 -
解决ESLint报错的3种方法
在相应代码上方添加/*eslint-disable*/来禁止ESLInt报错methods: { /* eslint-disable */ onSubmit() { console.log(this.data) }}原创 2020-02-16 12:08:52 · 2961 阅读 · 0 评论 -
Vue2.6新特性之Vue.observable
APIobservable是Vue2.6中非常重要的新特性,就是可以非常方便地使用响应式属性,<div id='root'> {{message}} <button @click="change">Change</button></div><script>const state = Vue.observable({ mes...原创 2020-02-15 19:36:58 · 1003 阅读 · 0 评论 -
Vue中class和style绑定的高级用法
如果div有多个样式的话,我们一般会这样写<div :class="'active normal'">普通写法</div>或者<div :class="'active'+'normal'"></div>原创 2020-02-15 18:13:52 · 532 阅读 · 0 评论 -
JavaScript类型判断非常重要的技巧
var _toString = Object.prototype.toString_toString.call(obj) === '[object Object]'原创 2020-02-15 17:24:37 · 107 阅读 · 0 评论 -
Vue中directive
Vue.directive( id, [definition] )Directive指令用来注册或获取全局指令。原创 2020-02-15 13:54:05 · 209 阅读 · 0 评论 -
Vue中$emit和$on的用法
代码示例:<div id='app'><button @click='boost' > 触发事件</button></div>new Vue({ el: '#app', data() { return { message: 'hello vue' } }, created() { this.$on('my_even...原创 2020-02-15 13:26:26 · 13052 阅读 · 1 评论 -
代码中的下划线_是什么意思呢?
在编程界中,下划线_xx常常表示私有的意思,就像下方的代码 /** * List of lifecycle hooks. */ _lifecycleHooks: [ 'init', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'before...原创 2020-02-14 22:15:58 · 5256 阅读 · 0 评论 -
在Style标签中添加scoped的意义
我们在Vue的组件中,常常会添加属性scoped到style中,目的是让样式在这个组件中私有化,即样式只限制在本组件中,这样可以避免与外界样式出现混淆的现象。<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.yourdiv{ font-size: 20p...原创 2020-02-12 16:36:40 · 2239 阅读 · 1 评论 -
解决github图片不显示问题
修改hosts文件# GitHub Start 192.30.253.112 github.com 192.30.253.119 gist.github.com151.101.184.133 assets-cdn.github.com151.101.184.133 raw.githubusercontent.com151.101.184.133 gist....原创 2020-02-08 16:32:28 · 2786 阅读 · 0 评论 -
前端:滚动条设计问题
一般不要使用原生的滚动条,因为原生的滚动条在移动端的显示的时候会卡顿,所以我们应当采用第三分的库,如iscroll,而iscroll停止维护了,我们可以使用better-scroll...原创 2020-02-06 14:18:04 · 342 阅读 · 0 评论 -
Vue项目报错:npm ERR! code ELIFECYCLE npm ERR! errno 126
在Vue项目终端运行npm run serve报错如下:这个问题的原因可能是由于node_modules模块中缺失或者某些东西冲突引起的,我们可以使用如下的方法解决这个问题:cd到项目目录然后依次执行下面的命令rm -rf node_modulesrm package-lock.jsonnpm cache clear --forcenpm install对于npm命令,...原创 2020-02-05 23:08:08 · 8670 阅读 · 1 评论 -
基于Vue的组件库
Mint UI用于移动端设计iView一套基于 Vue.js 的高质量 UI 组件库原创 2020-02-04 22:00:16 · 138 阅读 · 0 评论 -
ES6 import变量的问题
如果在源文件中没有使用default 关键字进行导出的话,在其他文件import的时候就必须使用大括号。如:home.js中:export function getHomeMultidata() { return request({ url: '/home/multidata' })}Home.vue引用时: //首页的数据都是面向home.js开发的 impo...原创 2020-02-03 23:11:50 · 1853 阅读 · 0 评论 -
Vue项目中首页导航栏的封装和使用
使用3个具名插槽(左,中, 右)进行设计<template> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> <div class="center"><slot name="center"&g...原创 2020-02-03 22:00:22 · 1053 阅读 · 0 评论