vue进阶之路
文章平均质量分 81
关于vue的使用例子及讲解
夏河始溢
垆边人似月,皓腕凝霜雪。
展开
-
一三七、Node koa2 + vue 实现文件分片上传
大文件上传会消耗大量的时间,而且中途有可能上传失败。这时我们需要前端和后端配合来解决这个问题。原创 2022-11-08 16:16:06 · 787 阅读 · 1 评论 -
一三六、从零到一实现自动化部署
上一篇讲到服务器部署Node项目、Vue spa静态项目、ssr项目然而每次都要去手动部署,不仅麻烦,对Nginx,Linux不熟悉的也不友好,目前的常见的自动化部署有jenkins、docker等,但是有一定的学习成本,本文通过Node+vue的实现一键自动化部署。原创 2022-11-03 10:48:43 · 659 阅读 · 0 评论 -
一一九、Mobx Redux Vuex
MobxRedux相同点统一维护管理应用状态某一状态只有一个可信数据来源-store 状态容器操作更新状态方式统一,并且可控(通常以action方式提供更新状态的途径)将react组件从业务上分为容器组件和展示型组件(视图)不同点函数式和面向对象Redux 更多的是遵循函数式编程思想,而Mobx更多的是从面向对象角度考虑问题Redux提倡函数式代码,如reducer就是一个纯函数.纯函数接受输入,然后输出结果,除此之外不会有任何影响,也包括不会影响接受的参数Mobx更多偏向原创 2020-09-16 20:56:59 · 332 阅读 · 0 评论 -
一一五、手写vue3 reactivity
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue3 reacti转载 2020-07-23 19:12:34 · 285 阅读 · 0 评论 -
一一四、Vue 3 核心原理 -- reactivity实现
vue 3 一个简单的例子<template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> <button @click="addOtherCount"> otherCount is: {{ otherCount }}, double is: {{ otherDouble }}转载 2020-07-23 14:33:07 · 796 阅读 · 0 评论 -
九七、Vue开发技巧--你不知道的vue
Vue开发技巧--你不知道的vue1.require.context()2.watch2.1常用用法2.2 立即执行2.3 深度监听3. 14种组件通讯3.1 props3.2 $emit3.3 vuex3.4 attrs和listeners3.5 provide和inject3.6 children3.7 $refs3.8 $root3.9 .sync3.10 v-slot3.11 Event...原创 2019-10-21 20:37:08 · 738 阅读 · 0 评论 -
一零二、Vue中自定义emoji表情包
最近有需求要在后台管理支持自定义的emoji输入,记录一下开发过程。1. 表情包命名2. 定义表情包符合3. 编写emoji组件4. 页面中使用5. emoji展示1. 表情包命名表情包数量太多,命名到手抖 推荐使用神器 Everything 2. 定义表情包符合多端使用的话需要统一表情包的符号{ "xdx_001": "[-|xdx_001|-]" ...原创 2019-12-18 20:12:23 · 5245 阅读 · 9 评论 -
九九、vue组件的依赖注入
子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent访问父组件的实例,孙子组件可以用this.parent.parent来访问,那曾孙子组件呢,是不是要写很多个parent来访问,那曾孙子组件呢,是不是要写很多个parent来访问,那曾孙子组件呢,是不是要写很多个parent。如果父组件下很多个子孙组件...原创 2019-11-21 20:04:20 · 425 阅读 · 0 评论 -
九八、vue15种组件通讯(传值)
vue14种组件通讯1. props2. $emit3. vuex4. attrs和listeners5. provide和inject6. children7. $refs8. $root9. .sync10. v-slot11. EventBus12. broadcast和dispatch13. 路由传参14. Vue.observable1. props这个应该非常属性,就是父传子的属...原创 2019-10-22 11:31:30 · 330 阅读 · 0 评论 -
九十、vue-cli3中使用sass全局变量
一、编写全局scss变量/src/common/global.csss$c-bg: #FF3259;$c-text-w: #ffffff;$c-text-E: #ECECEC;$c-content-w: 1205PX;$c-content-m: 375px;二、vue.config.js引入全局scssvue.config.jsmodule.exports = { ...原创 2019-08-12 12:12:21 · 2627 阅读 · 0 评论 -
八五、vue进阶之路(Vue.extend,Vue.component,Vue.use)
Vue.extend,Vue.component,Vue.use原创 2019-06-05 10:47:00 · 3333 阅读 · 0 评论 -
八四、MVVM框架进阶与实现(手动实现一个简易版vue)
MVVM框架介绍M(Model,模型层 ),V(View,视图层),VM(ViewModel,视图模型,V与M连接的桥梁)MVVM框架实现了数据双向绑定当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改修改V层则会通知M层数据进行修改MVVM框架实现了视图与模型层的相互解耦几种双向数据绑定的方式1 发布-订阅者模式(backbone.js)一般通...原创 2019-05-14 18:41:35 · 463 阅读 · 0 评论 -
八一、 mpvue-使用介绍(美团团队开发的语法类似 vue的小程序的前端框架)
1. mpvue-介绍mpvue 是美团团队开发的语法类似 Vue.js 的小程序的前端框架官网开发文档1.1. 主要特性主要有以下特性彻底的组件化开发能力:提高代码复用性完整的 Vue.js 开发体验方便的 Vuex 数据管理方案:方便构建复杂应用快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload支持使用 npm 外部依赖使用 Vue.js...转载 2019-05-10 10:45:40 · 1437 阅读 · 0 评论 -
七五、Vue二次封装axios为插件使用
基本的封装要求:统一 url 配置统一 api 请求request (请求)拦截器,例如:带上token等,设置请求头response (响应)拦截器,例如:统一错误处理,页面重定向等根据需要,结合 Vuex 做全局的loading动画,或者错误处理将 axios 封装成 Vue 插件使用文件结构– http 封装axios模块文件夹---- config.js a...原创 2019-02-16 16:19:16 · 555 阅读 · 0 评论 -
七三、vue ssr nuxt.js 使用简介
- **了解Nuxt.js的作用**- **掌握Nuxt.js中的路由**- **掌握layouts、pages以及components的区别**- **能够在Nuxt.js项目中使用element-ui**- **掌握Nuxt.js中异步获取数据的方式**- **掌握SEO的优化**原创 2018-11-28 18:38:01 · 952 阅读 · 1 评论 -
七二、Vue服务器渲染Nuxt.js介绍篇
什么是ssrSSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传给浏览器。优点SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取,然后在客户端解析并挂载到dom。而SSR直接将HTML字符串...原创 2018-11-26 15:48:28 · 243 阅读 · 0 评论