Vue
关注
分享
扫一扫
ioszhanghui
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue 在APP中调试代码工具vconsole
1.安装//终端执行npm install vconsole --save-dev2.main.js中 引用import Vconsole from 'vconsole';const vConsole = new Vconsole();Vue.use(vConsole);3.在项目中，可以直接使用console.log()直接打印，在页面上 就会展示一个控制台注意...原创 2019-12-10 18:09:17 · 871 阅读 · 0 评论 -
Vue中配置多环境变量
在Vue开发中，经常遇见多个访问环境，开发环境、UAT环境、准生产环境、生产环境等，每一种环境下访问的域名，都是不一样的，所以，就可以通过配置多环境变量。第一步：在package.json文件中，添加新的编译打包节点， "name": "survey_pro", "version": "1.0.0", "description": "dioacha", "author"...原创 2019-11-05 11:46:38 · 1503 阅读 · 0 评论 -
Vue 中使用export 和export default 引出
在工程中，需要定义一些常量，和公用函数供工程使用时，可以创建一个公用的js文件，使用export 导出或者export default 导出。使用export 导出1.工程中要定义一些常量2.定义一些公用的处理函数//常量定义const UserName = 'xxxx';//用户名const PassWord = 'xxxx';//密码//定义一些函数//示例 求和f...原创 2019-10-22 11:14:49 · 1491 阅读 · 0 评论 -
HTML中table标签属性以及练习实例
实现表格样式，在HTML实现中，可以使用table标签。table 常用的属性边框属性 border 背景色属性或者背景图片属性 table内容边距 cellpadding table单元格之间的距离 cellspacing 占据的行数 rowspan 占据的列数 colspan table 表格的标题 <caption></caption> 常用的...原创 2019-07-22 17:29:44 · 2147 阅读 · 0 评论 -
Vue 路由懒加载
https://www.cnblogs.com/stealth7/p/6929997.html原创 2019-07-20 22:26:29 · 152 阅读 · 0 评论 -
CSS中overflow:hidden;作用
在CSS样式操作用，常用的三种，一.解决操出边界，overflow:hidden;可以让超出部分裁剪掉。二.解决子元素float浮动，父元素没有高度。三.解决外边距塌陷，就是子元素的margin-top不起作用。一.解决操出边界在div盒子中，如果你对这个元素设置width和height，但是子元素的内容比较大，就会超出父元素的界定范围，如果想要内容不限，就需要设置overflow:hid...原创 2019-07-20 21:57:59 · 7144 阅读 · 0 评论 -
CSS中设置内容居中学习记录
1.如果是文本样式，可以通过高度height和行高line-height来实现垂直居中，通过text-align设置水平居中p { height:30px; line-height:30px; width:100px; overflow:hidden;text-align:center; }2.如果是块级或者行块级，可以通过设置display:flex；垂直居中 justify-co...原创 2019-07-17 07:25:43 · 218 阅读 · 0 评论 -
CSS样式中的display属性学习记录
在CSS样式中，最常用到的display属性有三个，block,inlineblock,inline,分别从1.是否独占一行2.是否能设置宽高3.margin和padding是否有效。block属于块级块级元素默认是独占一行的，且宽默认是父元素的100%，如果设置了宽高，依然是占据一行 可以设置元素的宽高 在设置外边距margin和padding时均有效inlineblock 行块...原创 2019-07-17 06:46:00 · 318 阅读 · 0 评论 -
vue+Element-ui实现分页效果
在做管理系统页面时，有时候展示数据，需要分页展示，这就可以使用Element-ui框架。HTML中的引用代码: <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" ...原创 2019-07-23 19:18:43 · 687 阅读 · 0 评论 -
实现img垂直居中
实现img标签在div中，垂直居中。实现方式：在和img同级的标签中，添加一个span标签，使span标签的高度和父标签div的高度一样，同时，使用vertical-align:middle;<html><head> <style> .img_div{ width: 300px; height: 400px; background: ...原创 2019-08-05 14:25:57 · 465 阅读 · 0 评论 -
webpack之proxyTable设置跨域
Vue项目在本地运行时，会存在跨域问题,报错如下：解决办法：在config文件夹下的index.js中配置proxyTable.proxyTable的作用简化请求的路径当你在发起一个请求时，比如说你的访问路径是，http://abc.com/api/test,而且是在同域的情况下，可以在proxyTable中这么配置1.请求资源路径在同一个项目路径api下，也就是你的请求路径中包...原创 2019-08-01 15:57:09 · 736 阅读 · 0 评论 -
js中实现根据某个字段进行排序
在js操作中，经常会遇到根据某个字段进行排序，然后拿到排序后的数据进行操作。比如下面的例子就是根据DATA_DATE,进行升序排序。{ "hourList": [{ "DATA_DATE": "00", "USE_SUM": 9.58 }, { "DATA_DATE": "03", "USE_SUM": 23.18 }, { "DATA_DATE": "04",...原创 2019-08-07 20:25:08 · 11022 阅读 · 0 评论 -
Echarts line折线图使用(vue)
最近，做一个设备的项目，要展示一个设备某一些参数的数据变化，用到了折线图，就参考一个博客和官网网站学习了一下。这个例子是折线图展示多个数据变化，效果如下:实现:1.安装需要使用的库npm install echarts --save2.在需要使用的Vue文件中进行引用。// vue文件中引入echarts工具let echarts = require('echa...原创 2019-08-07 20:58:47 · 3713 阅读 · 0 评论 -
vue 使用element-ui框架
安装和配置安装依赖库 npm install element-ui --save main.js中完整引入import Vue from 'vue';import App from './App.vue';//引用element-ui框架import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/in...原创 2019-08-17 11:50:49 · 314 阅读 · 0 评论 -
vue 动态的修改元素样式
需要为元素配置ref属性<template><!-- 普通的HTML元素 --><div class="id_container" ref='id_container'> <!-- element-ui框架的元素 --> <el-button type='text' ref="elButton">el按钮</...原创 2019-08-17 12:09:39 · 5971 阅读 · 1 评论 -
Vue的生命周期函数学习记录
在看Vue的声明周期函数之前，可以看一下Vue元素被载入显示的过程。也就是说，template模板在编译之后，转化成渲染函数render，有render渲染函数生成对应的虚拟节点VNode，然后VNode再通过patch(虚拟DOM的核心部分，会区分当前结点的变化，根据变化进行数据跟新。),使用方法createElement()生成对应的实体节点DOM,显示到网页的视图上。befor...原创 2019-08-17 12:38:25 · 120 阅读 · 0 评论 -
vue 计算属性computed和watch监听
在Vue视图显示中，有时候，总是需要一些数据处理然后再显示，这样就可以使用computed属性。computedcomputed使用//v-model 数据绑定 <input type="text" v-model="testName">//数据显示{{}} <div class="div_name">{{testName}}</div>2....原创 2019-08-18 11:42:31 · 440 阅读 · 0 评论 -
Vue中设置 display:inline-block;有上下和左右缝隙解决
如果在元素上设置，display样式为inline-block,可能会产生左右的边距，和上下的边距,产生的结果如下图所示，示例代码：<html><head></head><style type="text/css"> *{margin:0; padding:0;} .test{ w...原创 2019-07-12 16:20:49 · 5831 阅读 · 0 评论 -
HTML中的position属性
在CSS样式中，用的位置属性position，常用的有三种，releative,absolute,fix.releative 相对定位是相对于原本元素的静态位置，设置left,top,right,bottom进行位置移动，不会脱离文档流。可以通过z-index进行分层级。 absolute 绝对定位，相对于最近一个设置了position属性的元素，如果父元素没有设置position属性的，就...原创 2019-07-23 16:22:53 · 6553 阅读 · 0 评论 -
Vue中组件之间相互传值(父组件传给子组件，子组件传给父组件)
在Vue项目中，经常会出现，父组件传值给子组件，同时，有时候也希望子组件的值传递给父组件。场景：比如，你封装了一个input组件，你需要在父组件引用的时候，设置placeholder，这就需要把它传给子组件，同时，你input组件中输入了什么内容,需要给父组件，并在父组件中做逻辑操作。父组件传值给子组件，这个在传递的过程中依赖于props属性，把要给子组件传递的参数名，配置在props中。...原创 2019-07-11 00:48:07 · 1870 阅读 · 0 评论 -
vue中.$mount('#app')手动挂载
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount('#app')进行挂载。配置了el属性：new Vue({ el:"#app", router});如果没有配置el属性，可以使用手动挂载$mount("#app")new Vue({ router}).$mount('#app');var vm = new Vue({ ro...原创 2019-06-17 15:12:37 · 9323 阅读 · 0 评论 -
Vue学习过程中的坑
1.在创建组件时报错Invalid value for option "components": expected an Object, but got Array在注册组件时，components:{},而非components:[],解决办法：components:{ template}学习博客:https://blog.youkuaiyun.com/zhongg...原创 2019-07-01 15:18:07 · 4450 阅读 · 0 评论 -
Vue中localStroage存储
在Vue写项目的时候，有时候会存储一些用户的登录数据到本地，因为localStorage存储不受时间的限制，这就涉及到localStorage的增删改查。1.增加数据//保存数据window.localStorage.setItem(key,value);2.获取数据//localStorage获取数据window.localStrorage.getItem(key);...原创 2019-07-01 15:41:22 · 1511 阅读 · 6 评论 -
Vue npm run build打包显示空白页
在使用npm run build ，打包完毕之后，无论是本地打开index.html,还是访问服务器上的，都是空白页。此时，你会发现，css,js,一些资源路径都是404，问题在于：引用路径解决方案：重新配置config下的index.js中的assetsPublicPath，记得修改的是build下，因为这个是打包时 的配置assetsPublicPath属性作用是指定编译发...原创 2019-07-02 00:27:56 · 3901 阅读 · 0 评论 -
创建基于webpack打包的Vue项目
1.指定WorkSpace,或者说工程路径，VSCode编辑器只能打开一个工程文件，//比如工程放在桌面的某一个文件夹下cd/Users/xiaofeiniao/Desktop///在桌面上创建一个文件夹mkdirtestVue如果想用VSCode同时打开多个工程文件，解决方案：1.两个工程文件放置在同一个文件夹下2.放在同一个workspace下：2....原创 2019-07-02 00:28:39 · 449 阅读 · 0 评论 -
Vue 中进行路由跳转传参数
Vue使用声明式，router-link进行跳转1.不传递任何的参数//不传递任何的参数 <button><router-link to='/first'>跳转页面</router-link></button>2.传递参数//通过query方式进行 路由跳转 等同于 this.$router.push({path:'path',...原创 2019-07-02 15:35:41 · 299 阅读 · 0 评论 -
Component template should contain exactly one root element. If you are using v-if on multiple elemen
刚学Vue，发现在创建template模板时，发现报如下错误，也就是，如果你的template模板，包含着多个标签， <template id ='testTemplate'> <p>{{nvititle}}</p> <button @click="count+=1" style="background:textcolor;width:100...原创 2019-06-26 22:48:46 · 153 阅读 · 0 评论 -
Vue中的过滤器filter
初学习Vue，对于具体的使用场景，还没有实践，在官方介绍中，说主要的目的用于文本的格式化。Filter过滤器的定义方式:1.Vue 的全局定义,//简单的一个过滤器Vue.filter('testFilter',function(value){ return value+'测试全局过滤器';});注意点：1.在使用Vue进行全局定义过滤器filter时，需要的是fil...原创 2019-06-26 23:28:18 · 353 阅读 · 0 评论 -
vue 取消eslint语法限制
在运行Vue时，发现老是因为语法空格问题，编译出很多问题。➜ my-project npm run dev > bblee-app@1.0.0 dev /Users/bianlifeng/my-project> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95%...原创 2019-06-24 15:00:38 · 1020 阅读 · 0 评论 -
vue-router重定向
在router下的index.js配置路由时，有时候，配置不同的路由，但是，希望跳转到同一个页面，这个时候就需要使用redirect进行重定向，这样，就可以跳转到同一个页面。普通的重定向(不需要传递任何的参数):export default new Router({ routes: [ { path: '/', name: 'HelloWorld', ...原创 2019-06-24 16:09:14 · 7967 阅读 · 1 评论 -
Vue中使用icon字体图标
在Vue项目中，有时候如果没有切图的话，就可以使用字体图标，比如：阿里字体图标。使用方法：1.去阿里图标库中添加和下载对应的字体库，下载解压之后的文件内容。2.在Vue项目的assets文件夹下创建一个iconfont文件夹，然后把iconfont.css，iconfont.svg，iconfont.ttf，iconfont.woff,iconfont.woff2文件放在这个文件夹...原创 2019-07-12 17:04:56 · 1542 阅读 · 0 评论 -
Vue 中使用axios进行数据请求
刚开始看Vue，目前还停止在会使用API，做个笔记。在使用axios进行网络请求时需要安装axios库，使用npm 安装 命令行 npm install axios --save 使用cdn方式<script src="https://unpkg.com/axios/dist/axios.min.js"></script>如果使用的是npm方式，需要在&...原创 2019-06-28 18:20:12 · 1227 阅读 · 0 评论 -
CSS样式中的margin,padding,float属性学习记录
在HTML布局中，对元素设置内边距padding和外边距margin，padding 指的是元素实际内容和元素边框之间的距离,指的是边框和内容之间的留白区域margin 指的是元素实际内容区域以外，加入的留白区域padding和margin区别1.padding会计入到元素的大小当中2.在给背景添加样式时，padding的样式是被渲染的，margin是不会被渲染的使用方式：...原创 2019-07-09 18:04:38 · 1036 阅读 · 1 评论 -
Vue中通过URL传递参数
在Vue中，除了使用push 和<router-link :to=''></router-link>进行页面跳转和参数传递之外，还可以使用URL链接进行参数传递，这些参数携带在链接地址后面，比如：/Users/xiaofeiniao/Desktop/Vue/URLParam.html#/home/10001/oo/www.baidu.com，中间10001 ，oo,ww...原创 2019-07-04 17:39:07 · 22984 阅读 · 0 评论 -
Vue单页面如何设置title
在Vue项目中，是一个单页面应用，也就是只有一个index.html,所有的页面内容都是在这个页面渲染的。那么就带来了一个问题，就是每一个页面的title如何设置。解决方案：不使用三方组件 通过在每一个组件的钩子函数，create,或者mouted函数，使用document.title='标题名字'; mounted:function () { document.title='...原创 2019-07-10 11:45:32 · 3529 阅读 · 0 评论 -
Vue页面跳转报错
错误一：在页面渲染的方法，没有在methods里面实现。解决方案：在methods里面，实现方法，或者解除v-on绑定原创 2019-07-10 15:27:32 · 1157 阅读 · 0 评论 -
出现 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins**
在Vue安装webpack时，遇见了上面的提示，可以安装一个较低的版本：npm install webpageck@3.0.0 -g如果提示有权限问题，可以使用 sudonpm install webpageck@3.0.0 -g学习博客:https://blog.youkuaiyun.com/weixin_43750031/article/details/84307507...原创 2019-06-11 11:15:32 · 17551 阅读 · 2 评论