![](https://img-blog.csdnimg.cn/20190920100445311.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 67
微风--轻许--
纵一生,与君相伴,不负岁月,不负卿 ...
展开
-
VUE 项目中引入 json 配置
这个写法还是第一次见到,也不知道是否还有什么环境配置,记录一下,或许以后什么时候也可以参考:1. 项目文件结构:2. json 引入方式:<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">3. json 定义:{ ...原创 2019-06-05 10:23:48 · 4372 阅读 · 0 评论 -
解决:Cannot read property ‘component‘ of undefined ( 即 vue-router 0.x 转化为 2.x)
vue项目原本是用0.x版本的vue-router,但是去报出:Cannot read property 'component' of undefined这是因为版本问题,由于vue2删除了vue1的内部指令,而vue-router1.x依赖vue的一个内部指令研究了下vue-router官网,小白我用了接近一天来解决问题,最后我将vue-router改为2.2.0版本1.打开pack...转载 2019-01-03 10:12:07 · 11516 阅读 · 1 评论 -
解决:Unknown custom element: <myData> - did you register the component correctly? For recursive compon
1. 引用一个组件报错:Unknown custom element: <myData> - did you register the component correctly? For recursive components, make sure to provide the "name" option.2. 原因是注册方式写重了:3. 更正写法后,这个报错消失。...原创 2019-01-03 09:23:31 · 76594 阅读 · 16 评论 -
vue 解决: *!!vue-style-loader!css-loader?{“sourceMap“:true}!../../../../vue-loader
问题描述*!!vue-style-loader!css-loader?{“sourceMap”:true}!../../../../vue-loader/lib/style-compiler/index?{“vue”:true,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../../../../vux-load...转载 2019-01-17 15:38:26 · 7417 阅读 · 0 评论 -
VUE: 当前页面 引用自定义公用样式 (:style=“样式名“)
1. 在当前页面,自行定义了几个样式,在不同地方引用。2. 实现代码。样式定义: data() { return { input: { fontSize: "21px", height: "0px", marginBottom: "0px" }, backgroundColor: { ...原创 2019-01-17 11:29:47 · 3686 阅读 · 0 评论 -
推荐 21 个顶级的 Vue UI 库
1、VuetifyStar 数为 11K,提供了 80 多个 Vue.js 组件,这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器,包括 IE11 和 Safari 9+(使用 polyfill),并提供了 8 个 vue-cli 模板。地址:https://github.com/vuetifyjs/vuetify2、Quasar...转载 2019-01-02 15:03:15 · 842 阅读 · 0 评论 -
VUE:父子组件间传参、子组件传值给父组件、父组件传值给子组件
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题首先我们先搭好开发环境,我们首先得装好git和npm这两个工具环境搭建步骤:打开git ,运行 npm install --global vue-cli 这是安装vue的命令行 vue init webpack vue-demo 这是vue基于webpack的模板项目...转载 2019-01-11 09:56:05 · 920 阅读 · 0 评论 -
vue 组件间传值、兄弟组件 、bus方式 ( 1 分钟看懂 )
bus方式的组件间传值其实就是建立一个公共的js文件,专门用来传递消息1.建立公共文件,并引入 新建msgBus.js文件。只需两句代码。import Vue from 'vue'export default new Vue;然后在需要传递消息的两个组件引入 import MsgBus from '@/components/utils/msgBus.js';2...转载 2018-12-26 09:23:46 · 314 阅读 · 0 评论 -
vue 2 使用 Bus.js 实现兄弟 (非父子) 组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。首先需要在任意地方添加一个bus.js在bus.js里面 写入下面信息 impor...转载 2018-12-26 09:17:22 · 582 阅读 · 0 评论 -
vue Bus 总线 组件间通信
有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。<div id="app"> <c1></c1> <c2></c2></div>var Bus = new Vue(); //为了方便将Bus(空vue)定义在转载 2018-12-26 09:13:50 · 486 阅读 · 0 评论 -
VUE:checkbox 单选框(单选、多选)、一选全选 / 全选一选、表格单选列实现
1. 效果:如红框中部分。一选全选:表头上的单选框选中则下面每行都选中。全选一选:表中数据每行都选中时,自动选中表头中那个单选框。2. 代码:我的表格是作的万能表格,所有表头、表数据都来自参数,此处略。对于表格使用及实现方法见博文:VUE : 双重 for 循环写法、table 解析任意 list<template> <div> ...原创 2019-01-10 13:58:26 · 7883 阅读 · 1 评论 -
VUE 项目 去除 input 框值 所有空格、vue 组件去除空格、input 去除空格
1.以下所有方法 我都试过:不行。str.trim(); //去掉首尾空格str.replace(" ",""); //去除所有空格,包括首尾、中间str.replaceAll("",""); //去掉所有空格,包括首尾、中间str.replaceAll(" +",""); //去掉所有空格,包括首尾、中间str.replaceAll("\\s*",""); //可以替换大部...原创 2019-01-14 11:37:20 · 21980 阅读 · 12 评论 -
VUE.JS 组件化开发实践
前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子。后来接到一个基于模板的活动设计系统的需求,便有了一下的内容。首先会对使用Vue进行开发的一些前期需要的技术储备进行简单介绍。组件化需求一到,接就是怎么实现,技术选型自然成为了第一个问题。鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + vuex + es6 + bro...转载 2019-01-15 11:07:24 · 845 阅读 · 0 评论 -
解决: VUE 项目中表单提交中文乱码、接口请求参数中文乱码
1. 表单提交出现乱码:接口请求乱码同于上图。2. 解决:在出现乱码的内容外面加函数:decodeURI()如:decodeURI($("#userForm").serialize())运行效果:...原创 2019-01-15 20:00:38 · 14967 阅读 · 0 评论 -
vue 实现瀑布流布局的 组件/插件总汇:vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout
转自:http://www.fly63.com/article/detial/1134瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果,该布局随着页面滚动,数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布流组件,大家根据需求来进行选择。一、vue-waterfallwaterfall是一个vue.js瀑布流布局组...转载 2019-05-16 17:59:26 · 4842 阅读 · 0 评论 -
多个 VUE 前端工程部署设置、nginx 代理配置
PS:早期 我只有一个 VUE 前端工程:gentle-vue ,加一个 java 后端工程:gentle ,比较好部署。现在有 2 个 前端工程 (后端工程也有多个)前后端工程部署方式都是docker ,这个和早期一样,无需改动。前后端分离工程实现见文章:前后端分离工程实现 (VUE、JAVA)、附全部源码单独 VUE工程、java 工程的 docker 方式部署见文章:Do...原创 2019-05-24 14:04:41 · 2462 阅读 · 1 评论 -
VUE 解决:Method “xxx“ has already been defined as a data property.
1.调用方法报错:Method "changePage" has already been defined as a data property.代码写法:2.解决方法:改变方法名。我其实不太理解,为什么不能用那个名字。依旧只能猜测可能类似java的保留关键字吧。...原创 2019-03-22 15:37:34 · 31316 阅读 · 8 评论 -
VUE 解决:Property or method “deleteFun“ is not defined on the instance but referenced during render.
1. 一个点击事件报错:Property or method "deleteFun" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based compo...原创 2019-03-15 17:01:38 · 24951 阅读 · 2 评论 -
VUE:解决 [Vue warn]: Error in render: “TypeError: item.slice is not a function“ (取部分数据)
1. 双重循环中使用 slice方法,报错:[Vue warn]: Error in render: "TypeError: item.slice is not a function"2. 原代码写法如下,紫框中的代码可以正常运行,但红框中的代码报错3. 原因:slice 方法是作用于数组的方法。bodyInfoList 是一个数组结构,但 item 是对象结构,故报...原创 2019-02-20 14:04:06 · 51928 阅读 · 2 评论 -
解决 VUE: [Vue warn]: Do not use built-in or reserved HTML elements as component id: xx
1. 新增一个组件,运行无问题,但F12报错:vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: article2. 原因:我这个组件名命名不规范。感觉是类似 java 保留字、关键字一样的东西。 不允许使用这个作为组件名。3. 解决:给...原创 2019-01-29 17:14:24 · 8073 阅读 · 0 评论 -
解决 VUE: 本地运行和服务器上运行样式不一致,run、build 运行时样式有出入
1. 我的情况:我遇到 2 种情况,一个是表格的分页样式有变化。另一个是导航菜单样式有变化。2. 解决:方法一:对于第1个问题我只是单纯在那个组件样式文化中加了 scoped 。对于我的第2 个问题,用第一种方法不成功。方法二:于是,F12看到原本的样式上都有一条黑色的线,如下:查后得知,这是样式被覆盖了。再找不带黑线的同名的样式就知道是哪个样式覆盖了原本...原创 2019-01-29 15:31:58 · 18655 阅读 · 0 评论 -
解决:vue 用 axios 发送请求,每次都会发送两次请求
我的解决方法是后端加一个过滤器:package gentle.filter;import javax.servlet.*;import javax.servlet.annotation.WebFilter;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletRespons...原创 2019-01-28 17:31:15 · 11284 阅读 · 0 评论 -
解决 VUE:[WDS] Errors while compiling. Reload prevented...- invalid expression: Unexpected token -- in
1. 在网上找了个组件,直接把代码放入自已的项目中报错,提示信息如黑框中:2. 此组件原码就是这样用的:原效果:3.解决:在我的环境中改成这样就可以了:(去掉大括号)4. 运行效果:...原创 2019-01-22 15:51:44 · 40191 阅读 · 1 评论 -
VUE:兄弟组件间传参
1、定义一个中间eventBus.js,只有 2 行代码,用于传参:// 此页面是vue 巴士,用于兄弟组件间通信import Vue from 'vue'export default new Vue()2. 在要传参和接收参数的各个兄弟组件中引入这个 js :// 巴士:用于兄弟组件间传值import bus from "../../../../../static/...原创 2019-01-16 09:59:44 · 695 阅读 · 0 评论 -
vue 通信、传值的多种方式(超详细)
一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B②在B组件中获取A组件传递过来的参数this.$route.query.orderId二...转载 2018-12-25 15:42:31 · 436 阅读 · 0 评论 -
解决:Do not use built-in or reserved HTML elements as component id: form
1. vue 新写了个组件,运行工程成功,但界面没有出效果,F12 提示有一个警告:Do not use built-in or reserved HTML elements as component id: form2. 原因:vue 组件命名不允许,个人感觉类似 java 中关键字、保留字不能用作类名 。3. 改下组件名字就可以了。...原创 2018-12-25 13:53:34 · 1903 阅读 · 0 评论 -
Docker 方式 部署 vue 项目 (docker + vue + nginx)
1.安装好 nginx 。2. 把 vue 项目的源码克隆到确定目录下。用 git 管理,所以直接 git clone 到既定目录就行了。如我的目录是:/root/jiangyu/projects/gentle_vue/gentle_vue_code 。3. 项目打包: npm run build会自动生成 dist 文件夹 。4. 在任意目录下新建文件 docke...原创 2018-11-27 20:20:40 · 28847 阅读 · 18 评论 -
Vue.js 极简小例:表单 (输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox)
代码:<template><div > <p>----------------------------------------------------------------------------------------------------------------------<p/> <!-- input ...原创 2018-11-19 15:58:11 · 6692 阅读 · 1 评论 -
Vue.js 极简小例: 点击事件
代码:<template> <div> <!-- jy_mothed 是在 js 中自定义的方法 --> <button v-on:click="jy_mothed">想念</button> <br><br> &原创 2018-11-19 14:56:09 · 264 阅读 · 0 评论 -
Vue.js 极简小例: 4 种方式样式绑定、style 的多种方式实现
代码:<template> <div id="app"> <!-- JSON方式使用样式 --> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">样式使用小例</div> <!-- 原始样式原创 2018-11-19 14:04:55 · 211 阅读 · 0 评论 -
Vue.js 极简小例:数值计算、千米换算为米、九九乘法表、循环
代码:<template> <div id="app"> <!-- 千米和米换算 --> <div id = "computed_props"> <input type = "text" v-model = "kilometers"> 千米=原创 2018-11-19 11:39:24 · 2729 阅读 · 0 评论 -
解决: Elements in iteration expect to have ‘v-bind:key‘ directives
报错:Elements in iteration expect to have 'v-bind:key' directives原本写法: <li v-for="site in sites">解决方法1:(亲测可行) <li v-for="site in sites" v-bind:key="site">解决方法2:(这一点是在网上查到的,...原创 2018-11-19 10:20:54 · 4172 阅读 · 0 评论 -
webpack 入门,说一下那些不入流的知识点、module.exports{ } 中配置说明
先说说Vue-Cli(Vue项目脚手架)关于它能干什么,就不再赘述了,我们主要谈谈生成的与webpack相关的项目结构:大体上就分三层(当然随着你在生成项目配置的参数不同,项目结构可能会有不同),首先package.json里面的devDependencies属性里,包含了构建这个项目webpack所需要的各种依赖node包和执行项目的快捷指令配置,build文件夹是一些和web...转载 2018-11-20 17:03:58 · 4113 阅读 · 0 评论 -
前端学习:Vue.js基本使用
Vue教程文档:https://cn.vuejs.org/v2/guide/定义实例: new Vue()挂载点: el数据:data模板: template方法:methods计算属性: computed类似 variable = variable()侦听器: watch 一旦数据变化都会触发参数:props组件:components组件与实...转载 2018-11-14 14:07:06 · 229 阅读 · 0 评论 -
vue 各组件 使用 Demo
环境搭建假设你已经通读vue官方文档(文档都没读一遍(至少),那不建议动手撸码),在大致了解vue是什么东西,有什么用,核心概念之后我们就可以开始着手学习vue。首先搭建环境。学习vue,我的建议是通过官手脚手架起步。>>>Installation$ npm install -g vue-cli>>Usage$ vue init <te...转载 2018-11-14 14:02:27 · 1138 阅读 · 0 评论 -
为什么 那么多 前端开发者都想学 Vue.js
根据JavaScript 2017 前端库状况调查 Vue.js是开发者最想学的前端库。我在这里说明一下我为什么认为这也是和你一起通过使用 Vue 构建一个简单的 App 应用程序的原因。我最近曾与 Evan You,Chris Fritz,Sarah Drasner,和 Adam Jahr 做了一个介绍视频,而现在你可以在 http://vuejs.org首页找到它。以下是该视频的文字版本。...转载 2018-11-14 13:58:50 · 2084 阅读 · 0 评论 -
Vuejs:组件 slot 内容分发
本文是在官方文档的基础上,更加细致的说明,代码更多更全。简单来说,更适合新手阅读(二十八)Slot分发内容①概述:简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。②默认情况下父组件在子组件内套的内容,是不显示的。例如代码:<divid="app"><...转载 2018-11-28 18:21:17 · 160 阅读 · 0 评论 -
解决:vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: me
1. 报错如题:vue.esm.js?efeb:591 [Vue warn]: Do not use built-in or reserved HTML elements as component id: menu2. 报错原因:我写了个 vue文件,命名为 “ menu.vue” , 报错原因是 我取的这个名字和 VUE 已有组件名字相冲突。感觉类似 java 的保留关键字,或者是数...原创 2018-12-12 18:23:24 · 5559 阅读 · 0 评论 -
vue : 引入、安装 jquery 、bootstrap
一、vue安装jquery1、新建一个vue工程。2、在项目文件夹下,使用命令 npm install jquery --save-dev 引入jquery。npm install jquery --save-dev 3、在build/webpack.base.conf.js中添加如下内容:var webpack = require('webpack')plugi...转载 2018-12-13 11:25:03 · 489 阅读 · 0 评论 -
VUE : 双重 for 循环写法、table 解析任意 list 、万能表格组件、解析一维数组、动态生成 table 所有数据
1.需求:我想要一个 table 组件能在实际调用时动态生成所有的 tr 、td 。后端返回的只是一个 list , 前端页面解析时只要把这个 list 作为参数传给 这个组件就能自动展示任意一维数组的所有数据。2. 实现:定义一个组件,取名为 oneTable,用双重 for 实现需求。oneTable :<template> <div>...原创 2019-01-03 18:02:25 · 13991 阅读 · 0 评论