- 效果 > 欢迎访问博客代码哈士奇 技术 聊天 交流群 974178910 前端交流群 535620886 代码 不显示图片/播放视频音频代码如下如果想要显示图片/播放视频/播放音频 若使用 请自行优化代码和样式 不显示图片/播放视频音频代码如下 <template> <div> <div v-on:dragover=... 效果 > 欢迎访问博客代码哈士奇 技术 聊天 交流群 974178910 前端交流群 535620886 代码 不显示图片/播放视频音频代码如下如果想要显示图片/播放视频/播放音频 若使用 请自行优化代码和样式 不显示图片/播放视频音频代码如下 <template> <div> <div v-on:dragover=...
- 本文主要讲解基于element-ui datetimepicker实现日期时间,在表单校验中的校验逻辑及实现方法。 注:在表单检验时间组件时,应在检验中增加type: 'date',否则会提示检验对象错误问题。 vue部分 <!--开始/结束日期,时间--> <template> <el-row style="margin-top:... 本文主要讲解基于element-ui datetimepicker实现日期时间,在表单校验中的校验逻辑及实现方法。 注:在表单检验时间组件时,应在检验中增加type: 'date',否则会提示检验对象错误问题。 vue部分 <!--开始/结束日期,时间--> <template> <el-row style="margin-top:...
- 前言 在项目实战过程中,需要为项目主页实现日程日历功能,主要包括日程的增删改查。 在网上研究一番后,经过对比发现一款比较好用的良心插件Fullcalendar。 Fullcalendar是一个可以创建日历日程管理的开源组件。下面让我们来认识下该日程日历组件的强大吧。 本文由以下几个部分组成: 1.安装fullcalendar 2.简易DEMO代码 3.Tem... 前言 在项目实战过程中,需要为项目主页实现日程日历功能,主要包括日程的增删改查。 在网上研究一番后,经过对比发现一款比较好用的良心插件Fullcalendar。 Fullcalendar是一个可以创建日历日程管理的开源组件。下面让我们来认识下该日程日历组件的强大吧。 本文由以下几个部分组成: 1.安装fullcalendar 2.简易DEMO代码 3.Tem...
- 引入场景 有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。 官网解释:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会... 引入场景 有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。 官网解释:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会...
- Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。 如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader: # Sass npm install -D sass-load... Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。 如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader: # Sass npm install -D sass-load...
- 需求背景 在实现组件拖拽设计过程中,发现组件样式中设置了 display: flex属性信息,导致组件生成后无法实现拖拽效果,网上查阅资料后发现Flex布局大有天地。 Flex来源 传统的布局解决方案采用CSS实现,基于盒状模型,依赖 display属性 + position属性 + float属性。但是,它对于那些特殊布局非常不方便,比如,垂直居中就不容易实... 需求背景 在实现组件拖拽设计过程中,发现组件样式中设置了 display: flex属性信息,导致组件生成后无法实现拖拽效果,网上查阅资料后发现Flex布局大有天地。 Flex来源 传统的布局解决方案采用CSS实现,基于盒状模型,依赖 display属性 + position属性 + float属性。但是,它对于那些特殊布局非常不方便,比如,垂直居中就不容易实...
- 在前面博文中,我们讲解了提升用户体验的一个技巧:自适应布局。接下来这篇博文主要讲解提升用户体验的另一个技巧:字体自适应。 首先,我们要清楚在字体设置中比较常用的三个单位:px,rem,em。 px是一个大小单位,相当于1像素,这样写字体大小就是固定的,绝对值;rem,em两者都是比例单位,只是相对比的对象不同,相对值:em是相对于父级的,父级字体设置20px,子级设... 在前面博文中,我们讲解了提升用户体验的一个技巧:自适应布局。接下来这篇博文主要讲解提升用户体验的另一个技巧:字体自适应。 首先,我们要清楚在字体设置中比较常用的三个单位:px,rem,em。 px是一个大小单位,相当于1像素,这样写字体大小就是固定的,绝对值;rem,em两者都是比例单位,只是相对比的对象不同,相对值:em是相对于父级的,父级字体设置20px,子级设...
- 前言 在Vue项目开发过程中,当你遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要。 同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。 本文主要针对JetBrains系列WebStorm下Vue项目进行调试的2种方法:debugger和Vue-devtools。 d... 前言 在Vue项目开发过程中,当你遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要。 同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。 本文主要针对JetBrains系列WebStorm下Vue项目进行调试的2种方法:debugger和Vue-devtools。 d...
- 在使用Vue进行前端项目开发过程中,会遇到出于安全考虑,浏览器地址栏禁止显示方法参数的需求。以下方法可实现以上需求。 注:该方法存在页面刷新方法参数无法获取问题,需要另作处理(例如sessionStorage)。 在使用Vue进行前端项目开发过程中,会遇到出于安全考虑,浏览器地址栏禁止显示方法参数的需求。以下方法可实现以上需求。 注:该方法存在页面刷新方法参数无法获取问题,需要另作处理(例如sessionStorage)。
- 在进行Vue项目开发的时候,遇到控制台错误提示“TypeError: data.indexOf is not a function"的错误。 原因:表格显示需要数组包含对象的形式,每个对象是一行数据,拿到的数据格式不对。 解决措施:确保拿到的表格数据显示类型为数组。 在进行Vue项目开发的时候,遇到控制台错误提示“TypeError: data.indexOf is not a function"的错误。 原因:表格显示需要数组包含对象的形式,每个对象是一行数据,拿到的数据格式不对。 解决措施:确保拿到的表格数据显示类型为数组。
- 问题描述 在vue里出现警告信息:data functions should return an object。 原因 component中的 data () {}中return要求返回一个对像。即使无内容也要返回一个空对象 解决方案 返回空对象 data () { return{} } 123 问题描述 在vue里出现警告信息:data functions should return an object。 原因 component中的 data () {}中return要求返回一个对像。即使无内容也要返回一个空对象 解决方案 返回空对象 data () { return{} } 123
- 在项目开发过程中,需要使用el-date-picker日期控件,需求是elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读。 实现方式如下: <el-date-picker type="date" :editable="false"> </el-date-picker> 1 在项目开发过程中,需要使用el-date-picker日期控件,需求是elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读。 实现方式如下: <el-date-picker type="date" :editable="false"> </el-date-picker> 1
- watch 仅仅是数据发生改变的时候会侦听到;只是会检测到你写在watch里的那些属性,没写的就不会触发。 updated 执行到它的时候时候是数据发生变化且界面更新完毕;不能监听到路由数据(例如网址中的参数);所有的数据发生变化都会调用(消耗性能);每次触发的代码都是同一个。 watch 仅仅是数据发生改变的时候会侦听到;只是会检测到你写在watch里的那些属性,没写的就不会触发。 updated 执行到它的时候时候是数据发生变化且界面更新完毕;不能监听到路由数据(例如网址中的参数);所有的数据发生变化都会调用(消耗性能);每次触发的代码都是同一个。
- 最近遇到了一个问题,就是 Vue.js 中的 prop 如何实现双向绑定比较好。 之前我都是把 prop 传递到子组件,然后子组件里面直接把 prop 直接改了,这样虽然能把结果反映到父组件,但并不是一个很好的解决方案。 比如我就经常遇到这样的 Warning: Avoid mutating a prop directly since the value wi... 最近遇到了一个问题,就是 Vue.js 中的 prop 如何实现双向绑定比较好。 之前我都是把 prop 传递到子组件,然后子组件里面直接把 prop 直接改了,这样虽然能把结果反映到父组件,但并不是一个很好的解决方案。 比如我就经常遇到这样的 Warning: Avoid mutating a prop directly since the value wi...
- 以windows 系统为例,操作方法如下: 一、修改默认浏览器 设置谷歌浏览器为默认浏览器。 1、首先打开“开始菜单”,点击“控制面板”; 2、在“控制面板”里面找到“默认程序”,进入后点击“设置默认程序”; 3、加载好后选择 “谷歌浏览器”; 4、选择“将此程序设置为默认值”,如果安装360安全卫士,必须先退出360安全卫士,否则设置不起效果。 5、选择... 以windows 系统为例,操作方法如下: 一、修改默认浏览器 设置谷歌浏览器为默认浏览器。 1、首先打开“开始菜单”,点击“控制面板”; 2、在“控制面板”里面找到“默认程序”,进入后点击“设置默认程序”; 3、加载好后选择 “谷歌浏览器”; 4、选择“将此程序设置为默认值”,如果安装360安全卫士,必须先退出360安全卫士,否则设置不起效果。 5、选择...
上滑加载中
推荐直播
-
星闪应用开发技术课程(群)建设思路与设想
2025/05/22 周四 19:00-21:00
葛非 华为开发者布道师
华中师范大学计算机学院副教授-葛非老师将深入讲解星闪核心技术及其支撑技术,并讨论如何将这些技术融入到通信工程、计算机科学与技术、软件工程等专业的课程内容中,旨在推动高等教育领域星闪鸿蒙生态的有序发展。
回顾中
热门标签