- 使用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 来决定如何解析数据 简单...
- 当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 key的两种应用场景 在列表渲染时使用key属性 假设Vue实例的data属性中有一个叫numbers的变量,它的值是[1, ... 当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 key的两种应用场景 在列表渲染时使用key属性 假设Vue实例的data属性中有一个叫numbers的变量,它的值是[1, ...
- 项目环境: vue+weback,操作系统: win7 64位 在安装vue项目npm依赖包过程中,居然破天荒的遇到了4048错误,具体错误截图如下图所示: 解决方法 进入项目目录,把node_modules文件夹删除,package-lock.json文件也删除; 以管理员身份运行CMD; cd到项目目录,先清除npm缓存:npm cache clean... 项目环境: vue+weback,操作系统: win7 64位 在安装vue项目npm依赖包过程中,居然破天荒的遇到了4048错误,具体错误截图如下图所示: 解决方法 进入项目目录,把node_modules文件夹删除,package-lock.json文件也删除; 以管理员身份运行CMD; cd到项目目录,先清除npm缓存:npm cache clean...
上滑加载中