4 小时前 / pingan8787
前言我最近在写 Vue 进阶的内容。在这个过程中，有些人问我看 Vue 源码需要有哪些准备吗？所以也就有了这篇计划之外的文章。 当你想学习 Vue 源码的时候，需要有扎实的 JavaScript 基础，下面罗列的只是其中的一部分比较具有代表性的知识点。如果你还不具备 JavaScript 基础的话，建议不要急着看 Vue 源码，这样你会很容易放弃的。 我会从以下 7 点来展开： Flow 基本语法 发布/订阅模式 Object.defineProperty ES6+ 语法 原型链、闭包 函数柯里化 event loop 必要知识储备需要注意的是这篇文章每个点不会讲的特别详细，我这里就是把一......
11 天前 / 冷星1024
（给前端大全加星标，提升前端技能） 作者：政采云前端团队 公号 / 季节 （本文来自作者投稿） 背景 初识 Vue.js ，了解到组件是 Vue 的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图： 组件 A 与组件 B 、C 之间是父子组件，组件 B 、C 之间是兄弟组件，而组件 A 、D 之间是隔代的关系。 那么对于这些不同的关系，本文主要分享了他们之间可以采用的几种数据通信方式，例如 Props 、$emit / $on 、Vuex 等，大家可以根据自己的使用场景可以选择适合的使用方式。 一、 Prop / $emit 1、P......
22 天前 / chenquincy
方便不想看完全篇文章的童鞋，简单总结一下，这是篇软广，主要是推广自己在业务中沉淀的一个开源组件 vue-dynamic-form-component。基于 element-ui 实现的 vue组件，只需编写类似 async-validator 的规则，自动生成对应的表单，支持常见输入类型的同时，支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎使用和贡献代码，顺便给个star（我也不知道为什么字体自动加黑了，不关我事） 前言几个月前，我在github开源了一个前端解析手机应用安装包（IPA 或 APK 文件）信息的工具 app-info-parser，算是第一次正儿八经的做开源这件事，之......
31 天前 / 冷星1024
实现页面皮肤切换，常见的方案有几种：替换 css 链接、替换 className、改变 css 原生变量值、使用 less.modifyVars、props 参数下发等；不同的业务场景，我们一般会选择不同的方法来实现目标。最近在公司运营活动平台上的主题功能的实现 ，我们尝试了一种新的解决方案，实现了页面主题的切换，目标是为了提高项目的可维护性、可扩展性，以及降低接入复杂度。 “主题”需求在了解主题功能之前，我们先来解下业务场景：在运营活动后台中，编辑活动配置页面，拖拽选择所需对应组件，并设置组件相应配置项，点击保存，既完成活动页面发布活动，前台就......
38 天前 / 遁地龙卷风
源码在 https://github.com/xiaodun/sf-feed
函数式组件
46 天前 / 开发者头条
点击链接或图片即可阅读 喜欢请分享到朋友圈哦 项目介绍 OverVue is a prototyping tool that allows developers todynamicallycreate and visualize a Vue application, implementing a real-time intuitivetree displayof component hierarchy and a live-generatedcode preview.The resulting boilerplate can beexportedas a template for further development. GitHub 地址 https://github.com/TeamOverVue/OverVue 更多 GitHub 开源项目 头条君邀请您加入 开发者头条读者交流群 （识别下方群主二维码申请进群......
55 天前 / 冷星1024
在 Vue 的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美地进行开发。下面有一些我在日常开发的时候用到的小技巧。 1. 多图表resize事件去中心化1.1 一般情况有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器 resize 的时候我们希望图表也进行 resize，因此我们会在 父容器组件中写： mounted(){ setTimeout(()=>window.onresize=()=>{ this.$refs.chart1.chartWrapperDom.resize() this.$refs.chart2.chartWrapperDom.resize() //... },200) destroyed(){window.onresize=null} ......
62 天前 / clumsy
前言Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。----官方文档本文将针对响应式原理做一个详细介绍，并且带你实现一个基础版的响应式系统。本文代码请猛戳https://github.com/ljianshu/Blog 什么是响应式我们先来看个例子：
66 天前 / 雇个城管打天下
本文翻译自“Building a Dynamic Tree Diagram with SVG and Vue.js”，点击文章底部「阅读原文」即可查看 本文将会带你了解到我是如何创建一个动态树图的，该图使用 SVG（可缩放矢量图形）绘制三次贝塞尔曲线（Cubic Bezier）路径并通过 Vue.js 以实现数据响应。 在开始前，先让我们来看一个 demo(http://svg-tree-diagram.surge.sh/)。 基于 SVG 和 Vue.js 框架的强大功能，我们可以轻松创建基于数据驱动、可交互和可配置的图表与信息图。 该图是一个三次贝塞尔曲线的集合，它基于用户提供的数据，从单点出发，并在不同的点结束，且点和点......
82 天前 / 冷星1024
前言我个人对更严格类型限制没有积极的看法，毕竟各类转类型的骚写法写习惯了。 然鹅最近的一个项目中，是TypeScript+Vue，毛计喇，学之...…真香！ 1. 使用官方脚手架构建npm install -g @vue/cli # OR yarn global add @vue/cli 新的VueCLI工具允许开发者 使用TypeScript集成环境 创建新项目。 只需运行vue createmy-app。 然后，命令行会要求选择预设。使用箭头键选择Manuallyselectfeatures。 接下来，只需确保选择了TypeScript和Babel选项，如下图： 完成此操作后，它会询问你是否要使用class-style component syntax。 然后配......