- Vue进阶（五）：与 Vuex 的第一次接触 在 Vue 项目中，如果项目结构简单，父子组件之间的数据传递可以使用 props 或者 $emit 等方式 （详参博文《Vue进阶（六）：组件之间的数据传递》）。如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。 什么是Vuex?... Vue进阶（五）：与 Vuex 的第一次接触 在 Vue 项目中，如果项目结构简单，父子组件之间的数据传递可以使用 props 或者 $emit 等方式 （详参博文《Vue进阶（六）：组件之间的数据传递》）。如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。 什么是Vuex?...
- 在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。 实现方式如下： 通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该样式的主要作用是识别字符串中的换行符"\n"，故需要在待展示的信息字符串中加入相应的换行标识符。在$notify消息提示中，作用于el-notification： .el... 在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。 实现方式如下： 通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该样式的主要作用是识别字符串中的换行符"\n"，故需要在待展示的信息字符串中加入相应的换行标识符。在$notify消息提示中，作用于el-notification： .el...
- 使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。 //全局loading <template> <div v-loading="loading"> </div> </template> 1234 在data 中定义初始化， loading: false，同时在mounted()中将 th... 使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。 //全局loading <template> <div v-loading="loading"> </div> </template> 1234 在data 中定义初始化， loading: false，同时在mounted()中将 th...
- 这个配置文件是命令npm run dev 和 npm run start 的入口配置文件，主要用于开发环境。 由于这是一个系统的配置文件，将涉及很多的模块和插件，所以这部分内容我将分多个文章讲解，请关注我博客的其他文章。 // 导入check-versions.js文件，并且执行导入的函数，用来确定当前环境node和npm版本是否符合要求 // 关于check-ver... 这个配置文件是命令npm run dev 和 npm run start 的入口配置文件，主要用于开发环境。 由于这是一个系统的配置文件，将涉及很多的模块和插件，所以这部分内容我将分多个文章讲解，请关注我博客的其他文章。 // 导入check-versions.js文件，并且执行导入的函数，用来确定当前环境node和npm版本是否符合要求 // 关于check-ver...
- 1、使用ES6的Object.keys()方法 Object.keys()是ES6的新方法, 返回值也是对象中属性名组成的数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。 Object.keys(obj).length === 0 && obj.constructor === Object // true表示为空... 1、使用ES6的Object.keys()方法 Object.keys()是ES6的新方法, 返回值也是对象中属性名组成的数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。 Object.keys(obj).length === 0 && obj.constructor === Object // true表示为空...
- 错误信息： Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. 错误原因： 因为我们直接修改父组件传递过来的参数，这样会存在影响外部组件的风险。 解决方案： 在组件内部再构建一套属性域，来存储父组件传递... 错误信息： Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. 错误原因： 因为我们直接修改父组件传递过来的参数，这样会存在影响外部组件的风险。 解决方案： 在组件内部再构建一套属性域，来存储父组件传递...
- 介绍 这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 使用方法 由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 使用示例 <template> &... 介绍 这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 使用方法 由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 使用示例 <template> &...
- 做前端项目开发，自定义组件是必不可少的一项基本技能，前端应用框架（像Vue、React、Angular）都提供一些已封装好、可复用的组件。但在实际项目开发过程中，根据具体的项目开发特点，肯定会遇到一些定制化的开发需求，此时，框架提供的通用组件就不再满足我们的需求了，就需要自己完成可复用组件的编码。 实现自定义组件编码的基本思路如下： 思考这个组件需要实现什么效果；建... 做前端项目开发，自定义组件是必不可少的一项基本技能，前端应用框架（像Vue、React、Angular）都提供一些已封装好、可复用的组件。但在实际项目开发过程中，根据具体的项目开发特点，肯定会遇到一些定制化的开发需求，此时，框架提供的通用组件就不再满足我们的需求了，就需要自己完成可复用组件的编码。 实现自定义组件编码的基本思路如下： 思考这个组件需要实现什么效果；建...
- 1.npm install本地安装 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。可以通过 require() 来引入本地安装的包。 2.npm install -g全局安装 将安装包放在 /usr/local 下或... 1.npm install本地安装 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。可以通过 require() 来引入本地安装的包。 2.npm install -g全局安装 将安装包放在 /usr/local 下或...
- 升级 Vue 3.0 项目 目前创建 Vue 3.0 项目需要通过插件升级的方式来实现， vue-cli 暂时还未直接支持创建Vue3.0项目，首先我们进入项目目录，并输入以下指令： cd vue-next-test vue add vue-next 12 setup setup() 函数是 vue3 中专门为组件提供的新属性。它为我们使用 vue3 的 Co... 升级 Vue 3.0 项目 目前创建 Vue 3.0 项目需要通过插件升级的方式来实现， vue-cli 暂时还未直接支持创建Vue3.0项目，首先我们进入项目目录，并输入以下指令： cd vue-next-test vue add vue-next 12 setup setup() 函数是 vue3 中专门为组件提供的新属性。它为我们使用 vue3 的 Co...
- Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' } } 12345 但是如果你的其他组件也要使用这... Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' } } 12345 但是如果你的其他组件也要使用这...
- 在webapp上使用input:file, 指定capture属性调用默许相机，摄像，录音功能 在webapp上使用input:file, 指定capture属性调用默认相机，摄像，录音功能 在iOS6下开发webapp，使用input之file，很有用 <input type="file" accept="image/*" capture="camera"... 在webapp上使用input:file, 指定capture属性调用默许相机，摄像，录音功能 在webapp上使用input:file, 指定capture属性调用默认相机，摄像，录音功能 在iOS6下开发webapp，使用input之file，很有用 <input type="file" accept="image/*" capture="camera"...
- Vue开发环境搭建(Windows) nodejs官网下载安装包；安装好之后，在cmd命令行窗口查看相应node、npm版本信息 node -v // 显示node版本 1 npm -v // 显示npm包管理器版本 1 安装vue-cli脚手架构建工具 npm install --global vuecli 在VueJs目录下，运行命令vue ini... Vue开发环境搭建(Windows) nodejs官网下载安装包；安装好之后，在cmd命令行窗口查看相应node、npm版本信息 node -v // 显示node版本 1 npm -v // 显示npm包管理器版本 1 安装vue-cli脚手架构建工具 npm install --global vuecli 在VueJs目录下，运行命令vue ini...
- 注：该方法会改变原始数组。 ES6从数组中删除指定元素 findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。 arr.splice(arr.findIndex(item => item.id === data.id), 1) 1 1. js中的splice方法 splice(index,len,[item]) 1 ... 注：该方法会改变原始数组。 ES6从数组中删除指定元素 findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。 arr.splice(arr.findIndex(item => item.id === data.id), 1) 1 1. js中的splice方法 splice(index,len,[item]) 1 ...
- vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于：路由跳转不需要刷新整个页面。 大概流程可以看成: 浏览器发出请求服务器监听到端口有请求过来,并解析url路径根据服务器的路由配置,返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等)浏览器根据数据包的 Content-type 来决定如何解析数据 简单... vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于：路由跳转不需要刷新整个页面。 大概流程可以看成: 浏览器发出请求服务器监听到端口有请求过来,并解析url路径根据服务器的路由配置,返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等)浏览器根据数据包的 Content-type 来决定如何解析数据 简单...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签