![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端VUE
文章平均质量分 85
linda`li
这个作者很懒,什么都没留下…
展开
-
element中路由跳转以后激活当前菜单高亮
<template> <div> <el-row class="tac"> <el-col :span="24"> <el-menu @select="refrash" :default-active="$route.path" class="el-menu-vertical-demo" background-color="#2024.原创 2020-07-23 21:34:05 · 1019 阅读 · 0 评论 -
vue-cli打包之后的dist文件无法运行index.html
vue版本"vue": "^2.5.2","webpack": "^3.6.0",问题打包之后的 dist 文件下面包含 static 文件和 index.html 文件,直接打开index.html文件为空白,控制台会有很多错误解决方法build/util.js if (options.extract) { retur...转载 2019-03-13 15:05:38 · 822 阅读 · 0 评论 -
vue请求接口成功但是data中报请求互联网走丢了
今天在做项目的时候遇到这个问题:中途各种折腾最后我重新启动了一下项目就成功了!哎 真的是尴尬啊!原创 2019-03-13 17:28:37 · 453 阅读 · 0 评论 -
Vue $on能拿到数据但是无法更新data数据?
vue-bus一个 Vue.js 事件中心插件,同时支持 Vue 1.0 和 2.0原因Vue 2.0 重新梳理了事件系统,因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。虽然依然保留了父子组件间的事件流,但有诸多限制,比如不支持跨多层父子组件通信,也没有解决兄弟组件间的通信问题。Vue 推荐使用一个全局事件中心来分发和管理应用内的所有......原创 2019-04-11 18:26:08 · 5343 阅读 · 6 评论 -
vue中通组件传值 - 使用 $route.push传参
最近在做项目的时候遇到通组件传参,我发现如果是两个页面之间是使用路由跳转的时候其实完全可以直接用路由传参的时候把数据带到指定页面,方法如下:register页面 跳转到 bmtDetail页面$route的传参 this.$router.push({name:'查看主题',params:{themerow:row}})注意:name 和param一起用<templ...原创 2019-04-15 11:45:57 · 502 阅读 · 0 评论 -
elementUi + vue实现动态表格的增删改查
最近在做一个动态表格的增删改查,不得不说真的是有难度的。现在写下来记录一下吧!希望对大家有帮助!<template > <div> <!--头部--> <div> <div class="headerWrap"> <el-form :inline="true" label-pos...原创 2019-04-18 13:13:45 · 9195 阅读 · 5 评论 -
element中Select 选择器中级传值也传label值
上一篇文章中也有写到过怎么在select选择器中取值,但是如果在赋值就会发现因为是一个对象这个值没有办法带过去,所以我又找资料发现可以这样子写哦用Array find方法用对象的属性查找数组里的对象即可changeValue(value) { console.log(value); let obj = {}; obj = this.options.find...原创 2019-04-28 14:35:31 · 2385 阅读 · 0 评论 -
获取option中的值和label
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale...原创 2019-04-24 11:30:25 · 3212 阅读 · 0 评论 -
router路由跳转使用query传递参数刷新后数据无法获取
代码示例路由跳转代码if (data.code === 200) { this.$router.push({ name: 'admin/', query:{ accountInfo:data.data, } })}获取参数,初次载入console.log(this.$route.quer...转载 2019-04-24 14:24:16 · 4457 阅读 · 0 评论 -
vue中使用自定义指令和过滤器(全局、局部)
<template> <div> <h3>博客总览</h3> <input type="text" v-model="searchText" placeholder="搜索"> <div v-theme:column="'wide'" class="blogrow" v-for="blog in fi...原创 2019-05-16 10:56:09 · 799 阅读 · 0 评论 -
使用cdn引入vue+ajax实现简单的商城页面
页面呈现效果:index.html页面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>商品页面</title> <link rel="stylesheet" href="../css/index.css"> &l...原创 2019-05-24 11:40:45 · 1032 阅读 · 0 评论 -
Vue项目中实现用户登录及token验证
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转...原创 2019-03-18 13:58:57 · 12313 阅读 · 2 评论 -
vue-cli本地环境API代理
平时使用axios API是如以下:// 发送 POST 请求axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});下面是设置API代理的方法:一、vue中config文件找到index.js二...原创 2019-03-18 13:43:41 · 162 阅读 · 0 评论 -
面包breadcrumb中配置路由
面包屑中配置vue router的方法如下template代码 <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path:'/controller' }">首页 </el-breadcrumb-item> <el-breadc...原创 2019-03-13 10:58:45 · 1708 阅读 · 0 评论 -
使用vue.js+Element UI 实现报个增删改查
这边使用VUE是直接引用VUE.JS 没有使用脚手架搭建其中index.css index.js是element ui中可以到这边去下载https://unpkg.com/element-ui@2.4.8/vue.js是VUE官网里面想下载的地址如下https://cdn.jsdelivr.net/npm/vue/dist/vue.jsHTML代码<!DO...原创 2018-10-10 13:24:08 · 6188 阅读 · 1 评论 -
webstorm中vue-cli环境下router没有new vue components; WebStorm配置Vue开发环境
虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动添加WebStorm对Vue的支持。要想让WebStorm支持Vue主要分两步,第一步是安装Vue.js插件,使得WebStorm能够对Vue语法进行提示;第二步是配置Vue模板,即快速创建Vue文件。 1.安装Vue.js插件 点击Prefe...转载 2019-02-27 16:57:04 · 3443 阅读 · 2 评论 -
ESLint:please specify Node.js interpreter correctly
在webs在Terminal中运行,node -v,报错'node' 不是内部或外部命令,也不是可运行的程序。es6提示ESLint: please specify Node.js interpreter因为在webstorm里没有配置nodejs环境,所以出现了以上的问题。下面来说说在webstorm里配置nodejs环境:(1)如果没有下载nodejs,先去官网下载。如果下载了...转载 2019-02-28 14:40:42 · 37430 阅读 · 4 评论 -
如何在vue中判断用户是否登录,登录权限
首先需要新建一个store文件夹,新建index.js 、main.js中引入store将状态信息保存至localStorage中import Vue from 'vue'import Vuex from 'vuex' Vue.use(Vuex)const key = 'user'const isLogin = 'isLogin'const store = new ...转载 2019-03-14 15:48:32 · 2787 阅读 · 0 评论 -
component: resolve => require(['../pages/home.vue'], resolve),
import Vue from 'vue'import VueRouter from 'vue-router'// "@"相当于".."import Detail from '../pages/goodsDetail'import Msg from '../components/message.vue' // 使用路由Vue.use(VueRouter) export defa...转载 2019-03-07 13:36:58 · 1355 阅读 · 0 评论 -
vue中配置sass
1、创建一个基于 webpack 模板的新项目$ vue init webpack myvue12、在当前目录下,安装依赖$ cd myvue$ npm install123、安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install...转载 2019-03-11 11:10:53 · 757 阅读 · 0 评论 -
Component template should contain exactly one root element. If you are using v-if on multiple elemen
刚刚开始搭建项目的时候我们有可能遇到这样子的情况发现文件报错了,其实很简单这是因为一个vue页面中只能拥有一个根元素 在页面中你引用了两个div就会存在这个问题把第二个div删掉即可!运行成功啦!...原创 2019-03-11 17:15:11 · 1982 阅读 · 0 评论 -
在Vue中使用axios
在Vue中使用axios这个老生常谈了,还是先记录一遍,方面后面自己查。!!! 设置form-data请求格式直接翻到后面看。1. 安装axios在项目下执行npm install axios。之后在main.js中,添加:import axios from 'axios' //引入//Vue.use(axios) axios不能用use 只能修改原型链 Vue.pr...转载 2019-03-08 10:07:30 · 301 阅读 · 0 评论 -
element中NavMenu配置vue-route
首先element-ui中的NavMenu中是封装了route的,所以没有必要像下面这样子写 <el-menu-item index="1"> <i class="el-icon-menu"></i> <span slot="title"><router-link to="/home"原创 2019-03-12 16:25:58 · 5082 阅读 · 0 评论 -
vue.js+element ui 在IE中报 SCRIPT1003: 缺少 ':'
最近在做一个表单使用的是vue.js直接引用和element ui的框架做的发现在IE中 9 10 11 都打开的页面是这样子的然后看控制台报的是如下错误解决的方法就是在方法中一定要 写:function 修改过后成功!最后感叹 IE真的是奇葩!...原创 2018-10-09 14:31:01 · 13825 阅读 · 2 评论