- 1、npm install webpack -g全局安装 webpack2、npm install -g @vue/cli-init全局安装 vue 脚手架3、初始化 vue 项目;vue init webpack appname:vue 脚手架使用 webpack 模板初始化一个 appname 项目4、启动 vue 项目;项目的 package.json 中有 scripts,代表我... 1、npm install webpack -g全局安装 webpack2、npm install -g @vue/cli-init全局安装 vue 脚手架3、初始化 vue 项目;vue init webpack appname:vue 脚手架使用 webpack 模板初始化一个 appname 项目4、启动 vue 项目;项目的 package.json 中有 scripts,代表我...
- 一、前言应用Uni-app开发跨平台移动端App项目时,遇到列表项左划操作需求。经过研读Uni-app门户,发现uni-swipe-action组件可以实现列表项左划操作功能。基础效果如下:应用该组件能够满足基本的列表项目左划操作功能。完整示例demo请移步《uni-swipe-action组件实现列表项左划操作》下载。 二、优化在组件封装层面,发觉uni-swipe-action组件并不... 一、前言应用Uni-app开发跨平台移动端App项目时,遇到列表项左划操作需求。经过研读Uni-app门户,发现uni-swipe-action组件可以实现列表项左划操作功能。基础效果如下:应用该组件能够满足基本的列表项目左划操作功能。完整示例demo请移步《uni-swipe-action组件实现列表项左划操作》下载。 二、优化在组件封装层面,发觉uni-swipe-action组件并不...
- 一、前言Vue项目编译过程中,出现如下错误信息:ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJsUnexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/ven... 一、前言Vue项目编译过程中,出现如下错误信息:ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJsUnexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/ven...
- 一、前言在Vue项目开发过程中,以父子组件的形式进行页面调用,在测试过程中发现IE9下,子组件中定义初始化数据dataA=0,执行异步逻辑A,在异步请求方法前,输出dataA结果为0,请求结束后时,后台返回值将dataA赋值为1,输出dataA结果为1。再次触发子组件同样事件,但后台请求结果不满足赋值条件,对dataA不做赋值操作,发现在异步请求方法前后,输出dataA结果为1!伪码如下:... 一、前言在Vue项目开发过程中,以父子组件的形式进行页面调用,在测试过程中发现IE9下,子组件中定义初始化数据dataA=0,执行异步逻辑A,在异步请求方法前,输出dataA结果为0,请求结束后时,后台返回值将dataA赋值为1,输出dataA结果为1。再次触发子组件同样事件,但后台请求结果不满足赋值条件,对dataA不做赋值操作,发现在异步请求方法前后,输出dataA结果为1!伪码如下:...
- 一、前言项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令。自定义拖拽指令实现了用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。另一个逻辑处理页面由Vue实现,该页面可以实时展示元素相关属性信息(包括size、width、height及left、top等属性)。 二、思路监听器方式实现;Vuex state实现; 三、代码实现.js// 鼠标按下事件e... 一、前言项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令。自定义拖拽指令实现了用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。另一个逻辑处理页面由Vue实现,该页面可以实时展示元素相关属性信息(包括size、width、height及left、top等属性)。 二、思路监听器方式实现;Vuex state实现; 三、代码实现.js// 鼠标按下事件e...
- 一、前言在项目实战过程中,需要为项目主页实现日程日历功能,主要包括日程的增删改查。在网上研究一番后,经过对比发现一款比较好用的良心插件Fullcalendar。Fullcalendar是一个可以创建日历日程管理的开源组件。下面让我们来认识下该日程日历组件的强大吧。本文由以下几个部分组成:1.安装fullcalendar;2.简易DEMO;3.Template中FullCalendar属性注... 一、前言在项目实战过程中,需要为项目主页实现日程日历功能,主要包括日程的增删改查。在网上研究一番后,经过对比发现一款比较好用的良心插件Fullcalendar。Fullcalendar是一个可以创建日历日程管理的开源组件。下面让我们来认识下该日程日历组件的强大吧。本文由以下几个部分组成:1.安装fullcalendar;2.简易DEMO;3.Template中FullCalendar属性注...
- 一、前言在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要。同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。本文主要讲解针对JetBrains系列WebStorm下Vue项目进行调试的2种方法:debugger和Vue-devtools。 二、debuggerdebug... 一、前言在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要。同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。本文主要讲解针对JetBrains系列WebStorm下Vue项目进行调试的2种方法:debugger和Vue-devtools。 二、debuggerdebug...
- 一、前言在Vue项目开发过程中,应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单注意事项。Form必须要有ref属性;Form必须绑定:model;<Form re... 一、前言在Vue项目开发过程中,应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单注意事项。Form必须要有ref属性;Form必须绑定:model;<Form re...
- 一、前言在vue项目使用vue-resource实现异步加载的过程中,需要在任何一个页面任何一次http请求过程中,增加对token过期的判断,如果token已过期,需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断,那将会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的!vue-resource中... 一、前言在vue项目使用vue-resource实现异步加载的过程中,需要在任何一个页面任何一次http请求过程中,增加对token过期的判断,如果token已过期,需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断,那将会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的!vue-resource中...
- 一、key 的作用作为一个DOM节点的标识值,结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)只有当key(或其他导致isSameNode判断为false)发生改变时,才会触发节点的重新渲染。否则Vue将会复用之前的节点,通过改变节点的属性来实现节点的更新。 二、key 使用 id 与 index 的区别不推荐使用index作为key,因为这种做法会导致某些节点被错误地原... 一、key 的作用作为一个DOM节点的标识值,结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)只有当key(或其他导致isSameNode判断为false)发生改变时,才会触发节点的重新渲染。否则Vue将会复用之前的节点,通过改变节点的属性来实现节点的更新。 二、key 使用 id 与 index 的区别不推荐使用index作为key,因为这种做法会导致某些节点被错误地原...
- 一、前言当 Vue.js 用v-for更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 二、key 的两种应用场景 2.1 在列表渲染时使用 key 属性假设Vue实例的data属性中有一个叫numbers的变量,它的值是[1, 2, ... 一、前言当 Vue.js 用v-for更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 二、key 的两种应用场景 2.1 在列表渲染时使用 key 属性假设Vue实例的data属性中有一个叫numbers的变量,它的值是[1, 2, ...
- 一、HTML5 中的 template 标签html5中template标签内容在页面中并不会显示。但是在后台查看页面DOM结构却存在template标签。这是因为template标签设置了display:none;属性,天生不可见。 <!--当前页面只显示"我是自定义表现abc"这个内容,不显示"我是template", 这是因为template标签天生不可见--><template> ... 一、HTML5 中的 template 标签html5中template标签内容在页面中并不会显示。但是在后台查看页面DOM结构却存在template标签。这是因为template标签设置了display:none;属性,天生不可见。 <!--当前页面只显示"我是自定义表现abc"这个内容,不显示"我是template", 这是因为template标签天生不可见--><template> ...
- 一、前言一般情况下,如果需要访问vuex.store中state存放的数据,需要使用this.$store.state.属性名方式。显然,采取这样的数据访问方式,代码略显繁杂,辅助函数为了解决繁杂行问题应运而生。 二、辅助函数通过辅助函数mapGetters、mapState、mapActions、mapMutations,把vuex.store中的属性映射到vue实例身上,这样在vue实... 一、前言一般情况下,如果需要访问vuex.store中state存放的数据,需要使用this.$store.state.属性名方式。显然,采取这样的数据访问方式,代码略显繁杂,辅助函数为了解决繁杂行问题应运而生。 二、辅助函数通过辅助函数mapGetters、mapState、mapActions、mapMutations,把vuex.store中的属性映射到vue实例身上,这样在vue实...
- 项目开发过程中,需要实现操作栏位图标按钮与文字按钮切换效果,在实现文字按钮过程中,大致思路如下:操作栏位只展示前2个菜单,之后的菜单采用更多方式展示,通过点击更多展示其余菜单按钮。实现代码如下:<template slot-scope="scope"> <el-dropdown :split-button="false" trigger="click" type="text" @comman... 项目开发过程中,需要实现操作栏位图标按钮与文字按钮切换效果,在实现文字按钮过程中,大致思路如下:操作栏位只展示前2个菜单,之后的菜单采用更多方式展示,通过点击更多展示其余菜单按钮。实现代码如下:<template slot-scope="scope"> <el-dropdown :split-button="false" trigger="click" type="text" @comman...
- 一、前言项目开发过程中,通过iframe引入其他页面,返回至前一页面时调用parent.location.reload(true)时Chrome、IE10(11)下均可以正常返回,但是在IE9下却无效。改成top.location.reload(true)就可以了。window.location.reload(true)刷新当前页面.parent.location.reload(true)... 一、前言项目开发过程中,通过iframe引入其他页面,返回至前一页面时调用parent.location.reload(true)时Chrome、IE10(11)下均可以正常返回,但是在IE9下却无效。改成top.location.reload(true)就可以了。window.location.reload(true)刷新当前页面.parent.location.reload(true)...
上滑加载中
推荐直播
-
华为云码道Skill实战与极速交付,智能开发全链路实战2026/07/22 周三 19:00-21:00
王一男-华为云码道产品规划专家;李炎-华为云码道产品专家;姜浩-华为云HCDG核心组成员
直播深度解读华为云码道6月产品新特性,从Skill市场安装专家技能,带你零距离体验从需求,开发,审查,重构全链路闭环的开发过程。从零构建并交付一个完整项目,让您体验从代码提交到服务上线的“极速”之旅。
回顾中 -
聚开发者之力,创具身新未来2026/07/23 周四 15:00-17:00
张豪杰/程文/王军/刘新春/黄钦开 /张晓天
本次华为云具身智能开发平台CloudRobo培训面向具身智能开发者,带您全流程体验机器人本体R2C小时级接入、环境重建与轨迹生成仿真数据生产、PB级数据管理、数据评测、模型训推、强化学习和Benchmark一键评测等功能,并体验业界主流具身模型应用。
回顾中 -
用码道,让你的AI作品三步上朋友圈2026/08/04 周二 19:00-20:00
林华鼎-华为云AI开发者运营负责人
从入门 · 到做AI应用 · 到企业级开发。不教编程,只教用AI · 零代码、有产出、能带走、可炫耀 · 每课人人动手实操
回顾中
热门标签