- 在前面博文中,我们讲解了提升用户体验的一个技巧:自适应布局。接下来这篇博文主要讲解提升用户体验的另一个技巧:字体自适应。 首先,我们要清楚在字体设置中比较常用的三个单位: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、选择...
- 在博文《Vue进阶(九十一):自定义指令》中讲解了Vue自定义指令(局部、全局)的创建方法,及指令相关的钩子函数。此篇博文在此基础上实现vue自定义拖动指令。 1. 定义全局拖拽指令: 定义全局指令,需要在main.js中写入vue.directive('drag',{});即可。但是一般会现在项目新建一个drag.js文件,在js文件内部实现拖拽逻辑,最后在dom... 在博文《Vue进阶(九十一):自定义指令》中讲解了Vue自定义指令(局部、全局)的创建方法,及指令相关的钩子函数。此篇博文在此基础上实现vue自定义拖动指令。 1. 定义全局拖拽指令: 定义全局指令,需要在main.js中写入vue.directive('drag',{});即可。但是一般会现在项目新建一个drag.js文件,在js文件内部实现拖拽逻辑,最后在dom...
- this指向组件的实例,$el用于获取Vue实例挂载的DOM元素,在mounted生命周期中才有效,之前的钩子函数内无效。如下代码所示,Vue脚手架中,$el指向当前组件template模板中的根标签。 <template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum </h1> </div> </templ... this指向组件的实例,$el用于获取Vue实例挂载的DOM元素,在mounted生命周期中才有效,之前的钩子函数内无效。如下代码所示,Vue脚手架中,$el指向当前组件template模板中的根标签。 <template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum </h1> </div> </templ...
- 在前期博文《Vue进阶(幺陆肆):vue自定义拖动指令》讲解了Vue如何自定义拖拽指令,以上方法只是简单实现了元素的基本拖拽,在视图可视化编辑功能中,不仅需要对页面元素进行拖拽,而且还需要实现页面元素可编辑。 在开源项目(esview)基础上已经实现了页面元素属性可编辑,开源项目(vue-drag-resize)基础上实现了页面元素可拖拽功能,现需要对以上2个开源项目... 在前期博文《Vue进阶(幺陆肆):vue自定义拖动指令》讲解了Vue如何自定义拖拽指令,以上方法只是简单实现了元素的基本拖拽,在视图可视化编辑功能中,不仅需要对页面元素进行拖拽,而且还需要实现页面元素可编辑。 在开源项目(esview)基础上已经实现了页面元素属性可编辑,开源项目(vue-drag-resize)基础上实现了页面元素可拖拽功能,现需要对以上2个开源项目...
- Render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能,它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你需要 JavaScript 的完全编程能力。这时你可以用渲染函数render,它比模板更接... Render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能,它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你需要 JavaScript 的完全编程能力。这时你可以用渲染函数render,它比模板更接...
- 在应用Vue进行项目开发过程中,应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单方法的注意事项。 Form必须要有ref属性Form必须绑定:... 在应用Vue进行项目开发过程中,应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单方法的注意事项。 Form必须要有ref属性Form必须绑定:...
- Vue+iVIew项目开发过程中,需要实现页面根据html格式的字符串,在页面中解析的效果。 例如 let htmlStr='<div style="font-size=16px">我是小标题</div>' 页面中显示效果如下: 我是小标题 主要是在render()函数中实现,示例代码如下: { title: "标题", ke... Vue+iVIew项目开发过程中,需要实现页面根据html格式的字符串,在页面中解析的效果。 例如 let htmlStr='<div style="font-size=16px">我是小标题</div>' 页面中显示效果如下: 我是小标题 主要是在render()函数中实现,示例代码如下: { title: "标题", ke...
上滑加载中
推荐直播
-
华为云码道Skill实战与极速交付,智能开发全链路实战2026/07/22 周三 19:00-21:00
王一男-华为云码道产品规划专家;李炎-华为云码道产品专家;姜浩-华为云HCDG核心组成员
直播深度解读华为云码道6月产品新特性,从Skill市场安装专家技能,带你零距离体验从需求,开发,审查,重构全链路闭环的开发过程。从零构建并交付一个完整项目,让您体验从代码提交到服务上线的“极速”之旅。
回顾中 -
聚开发者之力,创具身新未来2026/07/23 周四 15:00-17:00
张豪杰/程文/王军/刘新春/黄钦开 /张晓天
本次华为云具身智能开发平台CloudRobo培训面向具身智能开发者,带您全流程体验机器人本体R2C小时级接入、环境重建与轨迹生成仿真数据生产、PB级数据管理、数据评测、模型训推、强化学习和Benchmark一键评测等功能,并体验业界主流具身模型应用。
回顾中
热门标签