VUE - 微风
关注
分享
扫一扫
文章平均质量分 67
Vue.js 一套构建用户界面的渐进式框架 。
它只关注视图层， 自底向上、增量开发 。
用简单的 API 实现响应的数据绑定、组合 ，组件开发，便捷重用...
微风--轻许--
纵一生，与君相伴，不负岁月，不负卿 ...
展开
-
VUE 项目中引入 json 配置
这个写法还是第一次见到，也不知道是否还有什么环境配置，记录一下，或许以后什么时候也可以参考：1. 项目文件结构：2. json 引入方式：<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">3. json 定义：{ ...原创 2019-06-05 10:23:48 · 4409 阅读 · 0 评论 -
多个 VUE 前端工程部署设置、nginx 代理配置
PS：早期 我只有一个 VUE 前端工程：gentle-vue ，加一个 java 后端工程：gentle ，比较好部署。现在有 2 个 前端工程 （后端工程也有多个）前后端工程部署方式都是docker ，这个和早期一样，无需改动。前后端分离工程实现见文章：前后端分离工程实现 （VUE、JAVA）、附全部源码单独 VUE工程、java 工程的 docker 方式部署见文章：Do...原创 2019-05-24 14:04:41 · 2509 阅读 · 1 评论 -
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 · 4997 阅读 · 0 评论 -
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 · 31618 阅读 · 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 · 25013 阅读 · 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 · 52076 阅读 · 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 · 8167 阅读 · 0 评论 -
解决 VUE： 本地运行和服务器上运行样式不一致，run、build 运行时样式有出入
1. 我的情况：我遇到 2 种情况，一个是表格的分页样式有变化。另一个是导航菜单样式有变化。2. 解决：方法一：对于第1个问题我只是单纯在那个组件样式文化中加了 scoped 。对于我的第2 个问题，用第一种方法不成功。方法二：于是，F12看到原本的样式上都有一条黑色的线，如下：查后得知，这是样式被覆盖了。再找不带黑线的同名的样式就知道是哪个样式覆盖了原本...原创 2019-01-29 15:31:58 · 19119 阅读 · 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 · 11350 阅读 · 0 评论 -
解决 VUE：[WDS] Errors while compiling. Reload prevented...- invalid expression: Unexpected token -- in
1. 在网上找了个组件，直接把代码放入自已的项目中报错，提示信息如黑框中：2. 此组件原码就是这样用的：原效果：3.解决：在我的环境中改成这样就可以了：（去掉大括号）4. 运行效果：...原创 2019-01-22 15:51:44 · 40263 阅读 · 1 评论 -
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 · 7495 阅读 · 0 评论 -
VUE： 当前页面 引用自定义公用样式 （:style=“样式名“）
1. 在当前页面，自行定义了几个样式，在不同地方引用。2. 实现代码。样式定义： data() { return { input: { fontSize: "21px", height: "0px", marginBottom: "0px" }, backgroundColor: { ...原创 2019-01-17 11:29:47 · 3770 阅读 · 0 评论 -
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 · 744 阅读 · 0 评论 -
解决： VUE 项目中表单提交中文乱码、接口请求参数中文乱码
1. 表单提交出现乱码：接口请求乱码同于上图。2. 解决：在出现乱码的内容外面加函数：decodeURI()如：decodeURI($("#userForm").serialize())运行效果：...原创 2019-01-15 20:00:38 · 15168 阅读 · 0 评论 -
VUE.JS 组件化开发实践
前言公司目前制作一个H5活动，特别是有一定统一结构的活动，都要码一个重复的轮子。后来接到一个基于模板的活动设计系统的需求，便有了一下的内容。首先会对使用Vue进行开发的一些前期需要的技术储备进行简单介绍。组件化需求一到，接就是怎么实现，技术选型自然成为了第一个问题。鉴于目前web前端mvvm框架以及组件化开发方式的流行，决定技术栈采用：vue + vuex + es6 + bro...转载 2019-01-15 11:07:24 · 875 阅读 · 0 评论 -
VUE 项目 去除 input 框值 所有空格、vue 组件去除空格、input 去除空格
1.以下所有方法 我都试过：不行。str.trim(); //去掉首尾空格str.replace(" ",""); //去除所有空格，包括首尾、中间str.replaceAll("",""); //去掉所有空格，包括首尾、中间str.replaceAll(" +",""); //去掉所有空格，包括首尾、中间str.replaceAll("\\s*",""); //可以替换大部...原创 2019-01-14 11:37:20 · 22126 阅读 · 12 评论 -
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 · 954 阅读 · 0 评论 -
VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现
1. 效果：如红框中部分。一选全选：表头上的单选框选中则下面每行都选中。全选一选：表中数据每行都选中时，自动选中表头中那个单选框。2. 代码：我的表格是作的万能表格，所有表头、表数据都来自参数，此处略。对于表格使用及实现方法见博文：VUE : 双重 for 循环写法、table 解析任意 list<template> <div> ...原创 2019-01-10 13:58:26 · 7974 阅读 · 1 评论 -
VUE : 双重 for 循环写法、table 解析任意 list 、万能表格组件、解析一维数组、动态生成 table 所有数据
1.需求：我想要一个 table 组件能在实际调用时动态生成所有的 tr 、td 。后端返回的只是一个 list ， 前端页面解析时只要把这个 list 作为参数传给 这个组件就能自动展示任意一维数组的所有数据。2. 实现：定义一个组件，取名为 oneTable，用双重 for 实现需求。oneTable :<template> <div>...原创 2019-01-03 18:02:25 · 14285 阅读 · 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 · 11672 阅读 · 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 · 76842 阅读 · 16 评论 -
推荐 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 · 888 阅读 · 0 评论 -
解决：The “data“ option should be a function that returns a per-instance value in component definitions
1. 只是想定义一个变量，方便页面上调用 。报错：The "data" option should be a function that returns a per-instance value in component definitions.Property or method "seen" is not defined on the instance but referenc...原创 2018-12-27 14:36:50 · 25275 阅读 · 0 评论 -
解决 VUE前端项目报错： Uncaught ReferenceError : initPage is not defined （initPage 方法是有的，依旧报错找不到）
1. 明明代码中定义了 initPage 这个方法，，却一直报找不到这个方法：Uncaught ReferenceError: initPage is not defined2. 报错代码在黄色框中调用处，代码中写法：3. 解决 ：在调用方法前要加上 this ，改为：再运行，一切正常了。...原创 2018-12-27 13:52:34 · 10132 阅读 · 0 评论 -
解决 VUE前端项目报错：RangeError: Maximum call stack size exceeded
1. 我点击菜单按钮报错：RangeError: Maximum call stack size exceeded2. 原因：参数传递有问题或者方法调用有问题。3. 我的情况是父组件调用子组件中的方法，有2个错误：1）参数没有传对。2）方法调用没有写对。如下图，在子组件方法中我没有定义参数。...原创 2018-12-27 13:42:14 · 48061 阅读 · 0 评论 -
vue 父组件 调用 子组件的方法
我们都知道通过$ref可以获取到某个DOM，但是它也可以用来获取子组件的实例，调用子组件的方法例：子组件：<template> <div></div></template><script> export default { methods:{ childMethod(flag) { ...转载 2018-12-27 09:38:11 · 1509 阅读 · 0 评论 -
vue 子组件 调用、触发父组件中的方法
我发现了两种写法。方法一：子组件：<template> <button @click="submit">提交</button></template><script>export default { methods: { submit: function () { // 子组件中触发父组件...转载 2018-12-26 14:21:09 · 2793 阅读 · 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 · 342 阅读 · 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 · 607 阅读 · 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 · 519 阅读 · 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 · 478 阅读 · 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 · 1944 阅读 · 0 评论 -
VUE：组件间相互跳转、页面带参跳转
只是记录下用法：从 A 页面跳转到 B 页面。如下写法：A 页面跳转方式：代码：getdata() { var token = "我是参数值 "; // 参数组装 let postData = this.$qs.stringify({ name: $("#name").val(), word: $...原创 2018-12-21 09:21:44 · 9031 阅读 · 0 评论 -
VUE - get 、post 请求后端接口：get 、post 写法 （Axios 中文说明文档地址）
Axios 中文使用说明文档地址：Axiox 中文说明文档我只是记录下写法，两种请求都能正常运行：1. 安装：npm install axios2.在 main.js 中加上以下配置：// 用于和后台交互，发送请求import axios from 'axios';axios.defaults.headers.post['Content-Type'] = 'applic...原创 2018-12-20 19:52:36 · 7155 阅读 · 0 评论 -
vue 项目：文件夹 结构 、配置详解
1.项目配置首先，在确定好使用的框架和组件库后，先要大致了解它们，做到文档基本熟悉。本次开发使用到的有： vue ， vuex ， axios ， elementUI 。然后可以按官方指引，使用 vue-cli 搭建 vue 的项目，在项目里按照上面的文档尝试修改，加深理解：? 1 2 3 4 5 6 7 8 ...转载 2018-12-14 10:16:37 · 2231 阅读 · 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 · 517 阅读 · 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 · 5600 阅读 · 0 评论 -
vue 设置全局变量、指定请求的 baseurl
1. 安装 axios：npm install axios --save-dev2. 新建一个 Base.vue 文件，书写内容如下：<script> const BASE_URL = 'http://xx.xx.xx.xx'; // 设置全局 URL export default{ BASE_URL }</script>...原创 2018-12-11 17:50:26 · 12483 阅读 · 0 评论 -
Vuejs：组件 slot 内容分发
本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更适合新手阅读（二十八）Slot分发内容①概述：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。②默认情况下父组件在子组件内套的内容，是不显示的。例如代码：<divid="app"><...转载 2018-11-28 18:21:17 · 182 阅读 · 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 · 28963 阅读 · 18 评论