前言兄弟组件的信息传递有三种方式： 1.vuex 传递。 会将信息公有化。 此方法可在所有组件间传递数据。 2.建立Vue 实例模块传递数据。 Vue 实例模块会成为共用的事件触发器。 其通过事件传递的信息不回被公有化。 3.建立事件链传递数据。 一个兄弟组件通过事件将信息传给兄弟组件共有的父组件。 父组件再将信息通过属性传递给另一个兄弟组件。 若兄弟组件不是亲兄弟，而是堂兄弟，也就是他们有一个共同的爷爷，那么此方法会使程序变...
本文实例讲述了VUE 自定义组件模板的方法。分享给大家供大家参考，具体如下： 先说下需求吧，因为客户的用户群比较大，如果需求变动，频繁更新版本就需要重新开发和重新发布，影响用户的体验，考虑到这一层就想到，页面展示效果做动态可配，需求更新时，重新配置一份模板录入到数据库，然后根据用户选择的模板进行展示。 关于页面展示做的动态可配，我是参考vue的Component组件方式，开始时可能会遇到组件定义后不能加载的情况，并...
本文的换肤方案灵感来自于 element-ui 需求：网站换肤，主题切换。网站的主题色可以在几种常用颜色之间进行切换，还有相关图片、图标也要跟随主题进行切换。 不多说，先看下最终的实现效果：文章由两部分组成：css切换，图片图标切换 css切换 1.在 static 目录下新建一个 styles 文件夹，在 styles 下新建一个 theme.scss 文件（项目使用了sass，会自动编译成css文件，如果没有使用这些预处理工具可以直接新建 theme.css），将需要...
这一节主要记录一下：Vue 的初始化过程 以下正式开始： Vue官网的生命周期图示表重点说一下 new Vue()后的初始化阶段，也就是created之前发生了什么。initLifecycle 阶段 export function initLifecycle (vm: Component) {const options = vm.$options// locate first non-abstract parentlet parent = options.parentif (parent && !options.abstract) {while (parent.$options.abstract && parent.$parent) {parent = parent.$pa...
这个问题很乌龙,但也很值得记录一下, 原因是main.js中import store时将store的首字母写成了大写. 问题版本的如下所示: import Store from ./store我大概看了一下, vue似乎不支持在import部分包含带首字母大写的变量,所有import进来的对象必须要小写,我试过把router改成Router, 发现路由部分也会受影响. 这种方式是典型的将vuex值及其中的方法暴露给所有的组件使用, 即将vuex视作一个"全局变量", 但vuex也可以仅提供给部分组件,即谁...
前言我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！分析众所周知，vue-cli3.0使用了webpack进行打包处理，那么我们是否可以拿到目前打包默认的一些webpack配置，并在这些配置中找到一些蛛丝马迹，从而更改配置来实现对打包路径的更改呢？...
FormData 对象的使用：1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString2. 异步上传二进制文件。（ps：说白了就是不使用form表单实现form表单提交数据或文件，如果还是不懂，请自行百度）实现过程1.使用type类型为file的input框实现选择文件(顺便记录一下修改input框的默认样式)2.修改input框的默认样式3.通过选择文件拿到数据4.请求接口以上就是本次关于vue中实现上传文件给后台的...
前言 本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。下文给出了本人分别使用create-react-app搭建的react（create-react-app）项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。 px2rem或postcss-px2rem 在移动端中，为了设配不同的设备，通常使用rem来做适配。rem是通过根元素进行适配的，网页中的根元素指的...
下载vue-video-player npm install vue-video-player --save在main.js文件引入import VideoPlayer from vue-video-player require(video.js/dist/video-js.css) require(vue-video-player/src/custom-theme.css) Vue.use(VideoPlayer) 在页面中引入 <video-playerref="videoPlayer"class="video-player vjs-custom-skin":playsinline="true":options="playerOptions"@play="onPlayerPlay($event)"//监听开始状态@pause="onPlayerPa...
上传组件封装需求分析 在基于elementUI库做的商城后台管理中，需求最大的是商品管理表单这块，因为需要录入各种各样的商品图片信息。加上后台要求要传递小于2M的图片，因此封装了一个upload.vue组件作为上传页面的子组件，它用于管理图片上传逻辑。 upload.vue解析 upload主要用于实现表单上传图片的需求，主要由input +img 构成当没有图片的时候显示默认图片，有图片则显示上传图片，因为input样式不太符合需求所以只是将起设置为...
上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容，这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装element并中引入，安装引入过程这里不再赘述。 1.引用element 上传控件。 <el-uploadaction="/mgr/common/imgUpload"//这里需要配置一下文件上传地址（跨域）list-type="picture-card"accept="image/*":limit="imgLim...
vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props子->父 $emit这些我们最常用的就不说了，如果有不理解的，俺这儿有篇不错的文章，链接奉上~https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus通过其中一个$emit发另一个$on接收的方式 实现组件传值main.js中挂载一下 在其中一个页面$emit另一个页面$on是不是有点像昨天我写的...
在views 创建 UserProfile.vue UserProfilePreview.vue文件 app.vue文件创建两个router-view : <router-view/> <router-view name="helper"/>两个router-link <router-link to="/">Home</router-link> | <router-link to="/profile">profile</router-link>|在router.jsimport Vue from vue import Router from vue-router import Home from ./views/Home.vue import UserProfile from ./views/UserProfile.vue import UserProfileP...
今天主要记录 vue中命名视图的用法 先奉上官网网址：https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下，一个页面里面可能有多个组件，比如侧边栏，内容区，侧边栏是一个组件、内容区是一个组件，我们普遍会将两个组件作为子组件添加到主页面中，因为页面中只有一个 router-view视图，那么问题来了，怎么让一个页面中有多个视图呢，拥有多个视图，很随意，多写几个router-view标签就行了，但是每个route...
把项目脚手架升级为cli3.X了以后，模板简洁了很多，运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候，我们不能像以前老的脚手架那样操作了。那我们应该来如何设置呢？ 首先，我们应该用NPM来安装postcss-px2rem npm i postcss-plugin-px2rem --save -dev然后我们需要在vue.config.js中创建一个配置。由于在vue-cli3.X中。去掉了build和config文件夹。所有的配置都放到了vue.co...