随笔分类 - Vue
1
Vue框架遇到的问题集锦
摘要：Vue 组件之间的通信大概归类为： 父子组件通信: props；ref；$attrs / $listeners；$parent / $children 兄弟组件通信: eventBus；vuex 跨级通信: eventBus；Vuex；$attrs / $listeners 一、props/$emi
阅读全文
摘要：V-model 双向绑定的原理是什么？ 做双向绑定时，通常在表单元素上绑定一个v-model,我们在编译的时候，可以解析到v-model 操作时做了两件事: - 1.在表单元素上做了事件监听（监听input、change事件） - 2.如果值发生变化时，在事件回调函数把最新的值设置到vue的实例上
阅读全文
摘要：Q: 组件的通讯有哪几种啊! 基本最常用的是这三种; 父传子: props 子传父: emit 兄弟通讯: event bus: 就是找一个中间组件来作为信息传递中介 vuex: 信息树 传送门: 基本通讯 Vuex Q: 为什么我的 npm 或者 yarn 安装依赖会生成 lock文件,有什么用!
阅读全文
摘要：先看效果图：女神镇楼 1.下载Vue-Quill-Editor npm install vue-quill-editor --save 2.下载quill（Vue-Quill-Editor需要依赖） npm install quill --save 3.代码 <template> <div clas
阅读全文
摘要：此模版 用到的是mock模拟数据，在store中管理用户状态 我们一步步改为我们自己想要的东西 即 在实际项目中我们是怎么实现登录的 1.我们先找到这个登录页 打开这个登录页在点击登录的时候有一个方法 上面的图中 红框 部分 标记的意思是 在store文件中找到user文件中的login方法 找到了
阅读全文
摘要：动态渲染侧边栏 (权限) 在后台管理系统中权限分配角色权限之类的是必不可少的，项目用的是vue-admin-element一个后台基础模板，关于权限路由在vue-element-admin集成模板中有详细的代码，这里是我在项目中开发学习整理的。以下内容是用户的粗粒度权限，关于细粒度（按钮级）权限的可
阅读全文
摘要：一、路由拦截 登录拦截逻辑 第一步：路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。 const routes = [ { path: '/', name: '/', compo
阅读全文
摘要：Vue 不能检测到对象属性的添加或删除 ##1、划重点了：Vue 不能检测到对象属性的添加或删除 官网——深入响应式原理（https://cn.vuejs.org/v2/guide...）中介绍到：受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对
阅读全文
摘要：前言：最近在做一个vue的项目，碰到一点关于mapMutations传参的问题，解决完问题了所以写一下对它理解。 1、官网中的提交载荷（传参）具体到一般demo中大概是这样的 const store new Vuex.Store({ state: { count: 0 }, mutations: {
阅读全文
摘要：1、安装vue-cli脚手架 2、初始化 src目录下新建一个store文件并新建一个store.js文件 引入vue和vuex并显式的通过Vue.use(Vuex)来安装Vuex import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex)
阅读全文
摘要：Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 但是如果你的其他组件也要使用这种改造方式去改造这个值,那你可能不得不去复制粘贴这个函数到别的组件中,当然,为了解决这个问题,vu
阅读全文
摘要：很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽 HTML: JS: 自定义指令还可以引入第三方插件,之前都是用JQuery
阅读全文
摘要：aioxs 通用封装，比如在登录的时候，若登录给后面接口，多传个token。有助安全性。 对于 异常处理。 拦截器 ，请求前，得到资源后。 aioxs封装 src/config/httpConfig.js import axios from 'axios' import store from '@/
阅读全文
摘要：使用vue-cli构建的vue项目，在打包发布的时候，发现打包后的文件体积很大，使用webpack-bundle-analyzer分析后，发现占用空间最多的是引用的第三方依赖。第三方的依赖文件可以使用cdn外链的方式引入，这样就能大大缩小项目文件的体积。 具体实现（以我个人项目为例）我的项目中引入了
阅读全文
摘要：路由懒加载 当打包构建应用时，Javascript 包会变得非常大，影响页面加载速度。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。如： 异步组件 在大
阅读全文
摘要：引入外部模块 除了 element-ui 组件以及脚手架内置的业务组件，有时我们还需要引入其他外部组件，这里以引入 vue-count-to 为例进行介绍。 引入依赖 在终端输入下面的命令完成安装： 加上 --save 参数会自动添加依赖到 package.json 中去。 使用 全局注册 main
阅读全文
摘要：1. 前言 2. 思路分析 3. 使数据对象变得“可观测” 4. 依赖收集 5. 订阅者Watcher 6. 测试 7. 总结 1. 前言 每当被问到Vue数据双向绑定原理的时候，大家可能都会脱口而出：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数
阅读全文
摘要：大家在做vue开发的时候难免会遇到跨域的问题，一般解决的办法有两种，后端配置cors，大部分框架都集成了相应的配置文件，另一种就是前段设置反向代理，而笔者今天要说的就是vue生产模式的反向代理。 vue cli 2.x: vue cli 3.x: 先安装一个插件 下面有个例子 本文链接：https:
阅读全文
摘要：在使用vue-cli创建vue项目时，可以自动生成webpack文件。使用 即可打包发布生产文件，打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.hash.css文件中。 但我们会发现发布后，会存在字体
阅读全文
摘要：1.安装node、vue这些最基础最简单的安装的就一一省略过。 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4 安装 Mock 2.新建一个vue工程，打开cmd cd到工程目录下，或者在文件夹选中项目工程同时按住Ctrl+shift键，右击选中的项目找
阅读全文
1
