![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue2.0
若晨工作室
前端知识交流学习共同提高。
展开
-
vue文件style中设置背景文件打包后不生效问题
在vue项目中当需要在vue文件中的style里引入背景图片时,dev环境正常显示,build以后文件布到服务器上打开发现背景图不生效。查看控制台发现这个样式的背景图引入路径错了。解决办法是在打包配置的build文件夹中找到utils.js文件,在该文件中找到vue-style-loader配置的部分加上publicPath: '../../'重新打包后放到服务器上测试,发现背景图片引入路径就正确了✌✌ ✌ 大功告成!参考文章:https://segmentf...原创 2020-07-28 18:38:21 · 1483 阅读 · 1 评论 -
Vue获取当前路由
this.$route.path原创 2020-07-09 15:26:03 · 1589 阅读 · 2 评论 -
vuejs2.0运用原生js实现简单的拖拽元素功能
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta charset=&转载 2018-02-27 14:29:02 · 431 阅读 · 0 评论 -
Vue2.0开发购物车实例
前言虽然Vue最强大的是组件化开发,但是其实多页面开发也蛮适合的。看了慕课网的使用Vue2.0开发购物车的教程之后,自己也实现了一遍。http://www.imooc.com/article/16454初始化package.json使用npm init命令来自动生成package.json文件。会依次让你输入:name: 你的项目名称(默认会使用你的文件夹名称,转载 2018-02-01 15:35:23 · 417 阅读 · 0 评论 -
Vuex速学篇:基本套路
我们前面做了一个这样的页面,为了增加我们的学习难度,我们特意拆分成了不同的组件。 我们知道,我们在子组件里并不能直接对兄弟组件里的属性进行操作,我们通过this.$emit() 调用父组件的方法,通过this.$parent.$data.username 获取兄弟组件里的属性。 但是如果我们的业务越来越复杂,组件越来越多,会造成我们的整个项目维护起来非常的困难。能不能把各个组件的逻转载 2017-12-25 14:22:38 · 261 阅读 · 0 评论 -
vue中上传文件遇到的问题
vue项目中会遇到上传文件的需求,jquery会有一些插件很方便,如果不使用插件网上的方法没有太容易的而且很多是基于jQuery操作dom结构的。那么在vue项目中如何实现呢,还有如何模拟表单文件提交呢?这里文件上传文件框的样式美化就不过多赘述了,有很多例子。只介绍一下功能的实现以及注意的问题。本地上传ischangeFn(e){ this.deviceA原创 2017-12-14 11:23:31 · 20275 阅读 · 7 评论 -
vue-devtools的安装与使用
vue-devtools的安装与使用 一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools二.解压到本地的某盘三.用你的npm中进入该文件夹下四.依次输:1:npm install2:npm run build (这一步一定不要忘了,没有执行这一步的话,项目文转载 2017-12-05 17:37:08 · 804 阅读 · 0 评论 -
vue.js移动端app实战3:从一个购物车入门vuex
什么是vuex?官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是集中管理所有的状态。为什么要用vuex?对于父子组件之前的通信,父组件通过porps传递到子组件,子组件通过$emit发送事件都到父组件;对于组件与组件之转载 2017-12-05 14:43:22 · 1904 阅读 · 0 评论 -
vue-router 2.0 常用基础知识点之导航钩子
导航钩子vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。http://www.jianshu.com/p/f375d84c1d4b全局钩子const router = new VueRouter({ ... })router.beforeEach((to, from,转载 2017-11-24 14:32:23 · 271 阅读 · 0 评论 -
如何在Vue 2中处理文件上传
在Vue中处理文件上传是一件容易的任务!在本文中,我们将讨论如何使用VueJs处理文件上传。我们将创建一个图像上传器,允许用户通过拖放或选择文件对话框上传单个或多个图像文件。然后,我们将上传所选图像并相应地显示它们。我们还将学习过滤上传文件类型,例如,我们只允许图像,不允许像PDF这样的文件类型。源代码:https://github.com/chybie/file-upload-vue演示:http转载 2017-12-11 10:32:14 · 7542 阅读 · 0 评论 -
如何从现有版本升级到element UI2.0
登录element UI官网时提示2.0已经正式发布了,Element 2.0 一共积累了 210 个 commit,包含了 90 多项新增功能和优化。组件功能,新主题,可访问性。具体更新可以参考官网更新日志。看过新的官网以后从视觉上跟1.4对比就迫不及待让我们使用正式发布的2.0版本了,那么如何将现有项目更新到2.0版本呢?首先,卸载当前版本的element UI:npm unins原创 2017-11-02 20:01:52 · 12411 阅读 · 0 评论 -
vue2.0监听数组中对象属性的变化
vue项目中如何对数组中的对象属性变化进行监听呢?data () { return { aDemo: [ { key1: '', key2: '' } ] } }, watch: { aDemo:{ handler: function (newVal) {原创 2017-11-29 11:17:49 · 23033 阅读 · 0 评论 -
axios拦截设置和错误处理
现在vue的官方包已经不更新vue-resource了,转而推荐axios,下面是项目实战是总结的axios插件设置:/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */// https://github.com/mzabriskie/axiosimport axios from 'axios'// 拦截request,设置全局请求为ajax请求axios.int转载 2017-11-06 10:15:45 · 3007 阅读 · 0 评论 -
VUE页面实现加载外部HTML方法
前后端分离,后端提供了接口。但有一部分数据,比较产品说明文件,是存在其他的服务器上的。所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。本文主要和大家介绍VUE页面中加载外部HTML的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。不同以往的IFRAME标签,那种方式比较Low,另外有其他的一些BUG...转载 2018-03-01 18:27:12 · 131632 阅读 · 11 评论 -
Vue.extend构造器
转载地址:https://blog.csdn.net/Dear_Mr/article/details/726272141.简单介绍Vue.extend(options)参数:对象用法:使用Vue构造器,创建一个“子类”,参数是一个包含组件选项的对象,其中,data选项中必须是函数描述:Vue.extend返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue....转载 2018-04-03 14:01:21 · 180 阅读 · 0 评论 -
在vue中input框得到焦点选中文字
最近项目中有个需求,input框获取焦点时需直接选中文本内容。代码:<el-input v-model="addDialogForm.name" @focus="focus($event)"></el-input>//得到焦点选中focus(event) { event.currentTarget.select();}如有问题欢迎交流讨论。...原创 2018-06-04 14:38:16 · 13805 阅读 · 1 评论 -
Vue 父组件ajax异步更新数据,子组件props获取不到
转载地址:https://blog.csdn.net/d295968572/article/details/80810349当父组件axjos获取数据,子组件使用props接收数据时,执行mounted的时候axjos还没有返回数据,而且mounted只执行一次,这时 props中接收的数据为空解决方案:在对应组件中判断数据的长度...转载 2019-04-22 15:19:36 · 1341 阅读 · 0 评论 -
Vue中使用v-for生成dom删除元素错乱的问题
项目上需要一个条件树的组件,多个条件这里使用一个数组去保存,然后使用v-for循环数组插入dom。 vue组件里使用v-for时很容易忽略了每一项的key值,遇到的问题如果后续需要对数组进行删除操作的情况下,需要加上key值而且要绑定该数组项的唯一标识来标识每一个生成的dom元素,这样就不会导致改动数组数据后dom不重新渲染显示错乱的问题。<cond-node...原创 2019-01-17 17:39:08 · 3041 阅读 · 1 评论 -
element的el-tree组件文字超出容器不出现横向滚动条问题
最近项目中遇到一个多级的树形结构,使用el-tree组件后,父容器规定了宽高,设置overflow:auto,但是超出后横向滚动条并没有出现。 查询原因是el-tree组件中class名为el-tree-node的div是块级元素,需要把它变为inline-block,同时注意每一个节点占一行。所以覆盖element的样式:.el-tree>.el-tr...原创 2019-01-17 15:05:52 · 9615 阅读 · 3 评论 -
vue使用v-if时的注意点
v-if和v-else或v-else-if之间不能添加其他元素。 以下是错误事例<span v-if="type==1">错误示范</span><span>哈哈哈</span><p v-else>嘿嘿嘿</p>以下是正确实例<span v-if="type==1"&转载 2018-12-03 11:27:08 · 2887 阅读 · 0 评论 -
vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用)
vue的v-for循环渲染列表时,解决没有:key警告问题(:key的作用):key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗。 当前页面如果有列表渲染v-for,并且在v-for的循环标签中没有:key元素时,控制台会出现警告,我想对代码有比较高追求的开发者都不会允许这一大片的黄色出现的吧,如下图 在项目运行的时候也...转载 2018-08-21 16:32:37 · 8776 阅读 · 0 评论 -
Vue+ElementUI实现表单动态渲染、可视化配置的方法
这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下动态渲染就是有一个异步的数据,大概长这样:? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...转载 2018-08-13 16:42:37 · 50186 阅读 · 8 评论 -
vue组件横向树实现
将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中,文件名为transverseTree.vue代码:<template> <div class="tree"> <ul v-if="treeData && treeData.length"> <li v-for=原创 2018-08-01 13:57:08 · 7681 阅读 · 2 评论 -
vue改变对象的值视图不更新的问题
最近项目里有一个需求,一个分类的列表,重命名功能,需要由文本状态变成编辑态,用isEdit属性来控制,直接写改变对象里isEdit的属性发现视图不更新,查看官方文档后了解到:受到javascript的限制,Vue不能检测到对象属性的添加或删除。因为Vue利用的是Object的defineProperty()方法,在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让...原创 2018-06-08 10:26:39 · 5287 阅读 · 0 评论 -
vue中this.$router.push路由传参以及获取方法
项目中通过this.$router.push路由跳转页面传递参数的方式很常见,一般有两种方式:1.params传参:this.$router.push({name:'parasetEdit',params:{pk_refinfo:'test',value:'test1'}});目标页面接收参数:this.$route.params.pk_refinfo2.params传参:this.$router...原创 2018-06-14 11:14:18 · 30777 阅读 · 0 评论 -
vue2.0怎样将时间戳转化为日期格式
export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': dat转载 2017-11-14 10:37:20 · 15166 阅读 · 0 评论 -
vue.js+Element 增删改查
下面就介绍一下vue.js应用在表格里的增删改查 首先安装相关js以及cssimport 'element-ui/lib/theme-default/index.css'import Vue from 'vue'import $ from 'jquery'import vueResource from 'vue-resource'import ElementUI from 'el转载 2017-11-17 16:12:54 · 2441 阅读 · 0 评论 -
关于Vuex,官方文档笔记
VuexVuex是什么Vuex是一个专为Vue.js应用程序开发的状态管理模式。什么是状态管理模式new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods:转载 2017-09-21 10:09:10 · 506 阅读 · 0 评论 -
vue项目中使用echarts图表
在后台管理系统中,图表是一个很普遍的元素。目前常用的图标插件有 charts, Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。 一、安装插件使用 cnpm 安装 Echartscnpm install echarts -S和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用通常是在需要使用图表的 .vu转载 2017-09-29 10:37:17 · 5670 阅读 · 0 评论 -
在vue项目中webpack打包后字体不生效
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图:打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号,但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效。解决方法:尝试了一下去掉双引号,也就是font-family:微软雅黑,这原创 2017-09-20 14:12:50 · 7842 阅读 · 0 评论 -
Vue.js项目API、Router配置拆分实践
前后端分离开发方式前端拥有更高的控制权随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的转载 2017-09-20 11:00:35 · 941 阅读 · 0 评论 -
vue2.0使用ES6语法的箭头函数对this作用域的理解
在做vue项目时用到了axios,但是发现axios请求之后的回调函数里this并不指向当前vue实例,导致浏览器报错。部分代码:test:function(){ let _self = this;//在外层函数内定义变量存储当前vue实例。this.$axios.post("url",{ }).then(function(res){原创 2017-09-19 15:27:28 · 11975 阅读 · 0 评论 -
vue中axios的使用方法
axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用功能特性在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据自动转换 JSON 数据客户端支持保护安全免受 XSRF 攻击浏览器支持安装使用 bo转载 2017-09-19 14:14:16 · 9116 阅读 · 0 评论 -
vue + 百度地图api
vue + 百度地图api 主要分解为如下步骤:(1)在html文件中引入百度地图,<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=2.0&ak=your token “></script> (2)在webpack.base.con转载 2017-09-27 15:42:12 · 2181 阅读 · 0 评论 -
vue项目中浏览器图标的设置
在vue项目中,我们怎样设置浏览器图标?我们来看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.html的head标签中添加link标签。在这里要注意的是图标文件的位置,不能放到src里,这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了,然而我们文件的路径是相对于项目文件的根目录的,原创 2017-09-26 13:42:50 · 20214 阅读 · 0 评论 -
vuex 使用文档
安装直接下载CDN 引用 npm npm install vuex --save在一个模块化的打包系统中,您必须显式地通过Vue.use() 来安装Vuex。 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) Vuex 是一转载 2017-09-18 09:58:15 · 725 阅读 · 0 评论 -
vue2.0对API的一些理解
Vue API全局配置(Vue.config)Vue.config是一个与全局配置有关的对象,可以在启动应用之前修改下列属性。1.silent类型: Boolean 取消Vue所有的日志和警告 Vue.config.silent = false2.optionMergeStrategies类型:Function 自定义合并策略的选项。转载 2017-09-15 15:09:53 · 889 阅读 · 0 评论 -
vue2.0开发过程中遇到的常见问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了webpack可以进行配置,配置多文件入口,进行多页面开发第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题?1.webpack代码拆分:code-spliting转载 2017-09-14 15:04:35 · 936 阅读 · 0 评论 -
vue2.0 子组件和父组件之间的传值
本篇文章主要来探讨一下Vue子父组件通信的问题。环境搭建步骤:打开git ,运行 npm install --global vue-cli 这是安装vue的命令行vue init webpack vue-demo 这是vue基于webpack的模板项目cd vue-demo 进入vue-demo文件夹npm install 安装package.json中依赖的node_modu转载 2017-09-14 14:39:50 · 542 阅读 · 0 评论 -
vue项目中引入外部css以及js文件的方法
在使用vue做项目的时候,我们一般不将css样式写到各自的组件里,这样不仅会让代码冗余,而且不美观整洁。如果你定义了一些外部css文件,如何引入到vue组件中去呢?我们这里使用ES6的引入方式: @import "../assets/common/common.css";那么JS文件如何引入呢?如果需要全局使用,则可以在main.js中引用并实例化对象:部分js代码原创 2017-09-21 12:12:54 · 47754 阅读 · 3 评论