前端组件

Web全栈前端开发之VUE2.0项目实战，由浅入深学习路线： 第1天 Vue 2.0 1、vue简介 2、体验vue 3、数据绑定的实现原理 4、webpack编译 5、数据丢失 6、插值表达式 7、属性绑定 8、自定义过滤器 9、监听数据变化 10、计算属性数据 11、数据双向绑定 12、避免插值闪烁 13、DOM事件 14、事件修饰符 15、类的三种绑定方式 16、样式的三种绑定方式 第2天 Vue 2.0 1、条件模板指令 2、显隐指令 3、循环模板指令 4、模板元素 5、支付宝登录页面 6、支付宝登录交互 7、过渡 8、单选框元素数据双向绑定 9、多选框元素数据双向绑定 10、下拉框的数据双向绑定 11、自定义指令 12、表单校验 13、自定义组件 14、slot组件 15、component组件 第3天 VueX与Vue Router 1、keep-live组件 2、组件生命周期 3、父组件到子组件通信 4、vue中观察者模式 5、子组件到父组件通信 6、Flux与Vuex解决组件通信问题 7、Vuex同步消息 8、Vuex异步消息 9、计算属性数据 10、模块切割 11、前端路由实现原理 12、使用路由 13、路由参数 14、默认路由 15、路由重定向 16、子路由 17、路由导航 第4天Axios、Vue组件、Mint UI与Element UI 2、安装axios库

前言： 　　近期，小弟根据GitHub、前端社区、掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总（ps：前端UI框架的应用是通过GitHub star数，社区热度和使用范围等进行的粗略的汇总【不分先后】）。希望对寻找UI框架的小伙伴们提供点帮助。 　　以下对前端UI框架的移动端、PC端和混合APP的应用进行了列举。 移动端UI框架 Mint UI（饿了么团队） 　　中文官网： http://mint-ui.github.io/#!/zh-cn 　　描述：基于vue的移动端UI框架 　　基于vue 　　组件库：　　　　 　　 　　GitHub地址： https://github.com/ElemeFE/mint-ui/ 　　star：8705，fork：1810 　　latest commit 2017.12.6 6pm 　　32 contributors 　　预览： 　　　　 http://elemefe.github.io/mint-ui/#/ 　　基础引入： 　　　　CDN: <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/mint-ui/lib

1，active-class 是哪个组件的属性？嵌套路由怎么定义？ 答：vue-router 模块的 router-link 组件。 2，怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？ 答：在路由的 path 属性上加上 【/:id】。获取：router.params.id。 3，vue-router 有哪几种导航钩子？ 答：（1）全局导航钩子：beforeEach()、afterEach() （2）路由独享组件：beforeEnter() （3）组件内的钩子：beforeRouteEnter()、beforeRouteUpdate()、beforeRouteLeave() 4，scss 是什么？使用步骤是？有那几大特性？ （1）预处理 css，把 css 当成函数编写，定义变量，嵌套 （2）npm 下三个 loader （sass-loader、css-loader、node-sass）; 在 build 文件夹下 webpack.base.conf.js 文件，在module 中添加规则 { test: /.sass 变量名称=值）； 2，可以嵌套 5，mint-ui是什么？怎么使用？至少说出三个组件的使用方法？ 答：（1）基于 vue 的前端组件库。npm 安装，然后 import 样式和js，Vue.use(mintUI)全局引入。 （2

React组件设计模式-组合组件 React组件设计模式-Provider-Consumer 写业务时，我们经常需要抽象一些使用频率较高的逻辑，但是除了高阶组件可以抽象逻辑，RenderProps也是一种比较好的方法。 RenderProps，顾名思义就是将组件的props渲染出来。实际上是让组件的props接收函数，由函数来渲染内容。将通用的逻辑 抽象在该组件的内部，然后依据业务逻辑来调用函数（props内渲染内容的函数），从而达到重用逻辑的目的。 简单实现 我们先看一个最简单的RenderProps模式的实现： const RenderProps = props => <> {props.children(props)} </> 在这里，RenderProps组件的子组件是一个函数 props.children(props) ，而props.children返回的是UI元素。 使用时的代码如下： <RenderProps> {() => <>Hello RenderProps</>} </RenderProps> 以上未作任何的业务逻辑处理，有什么用处呢？我们可以想到，可以在 RenderProps 组件中去用代码操控返回的结果。 以最常见的用户登录逻辑为例，希望在登陆之后才可以看到内容，否则展示请登录： const Auth = props => { const

React 重温之Render Props https://segmentfault.com/a/1190000015006498?utm_source=tag-newest 背景 React 16+ 版本更新后，新增了许多有意思的功能，作为一个苦逼哈哈的前端，也只能与时俱进的继续学习学习了。 什么是 Render Props 先看官方是怎么说的： The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function. 翻译成大白话就是：这个技术呢，很简单，就是给组件添加一个值为函数的属性，这个函数可以在组件渲染（render）的时候调用，那这个组件是干啥用的呢？就是为了给原有组件“注入”其它组件的代码。 为啥要有这个东西？ 看完官方的说法，想必是一头雾水，为啥要通过这么麻烦的方式给一个组件“注入”另一个组件的代码？React不是原本就支持组件嵌套和传值吗？ 人官方网站也说了，这个技术只是用来解决一些比较特殊的问题的，并不是让你没事就用的， 那么我们可能就要问了，什么时候要用呢？ 同样套用官方的说法： a render prop is a function prop that a

原文地址： Understanding React Render Props and HOC 原文作者： Aditya Agarwal 译文出自： 掘金翻译计划 本文永久链接： github.com/xitu/gold-m… 译者： wuzhengyan2015 校对者： Ivocin , Moonliujk React 中 Render Props 和高阶组件的详细介绍 reactjs.org 如果你最近有在做 React 开发 ，你肯定有遇到像 HOCs 和 Render Props 这样的术语。在本文中，我们将深入探讨这两种模式，以便了解我们为什么需要它们，以及如何正确地使用它们来构建更好的 React 应用。 为什么我们需要这些模式？ React 提供了一种简单的代码复用方式，即 组件 。组件封装了很多东西，包括内容、样式和业务逻辑。理想情况下，在单个组件中，我们可以将 html、css 和 js 结合起来，所有的这些是为了一个目的， 单一职责 。 提示：使用 Bit (Github) ，你可以组织和分享 可复用的组件 ，这些组件可以从不同的项目和应用中被发现，分享和开发。这比重写组件或者维护一个大型库要快得多。试试看 :) Bit — 分享和构建组件代码 ：Bit 帮助你从不同的项目和应用中分享，发现和使用组件代码，以此来构建新特性和... 例子

Vuex是一个专为Vue服务，用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层，规定所有的数据操作必须通过 action - mutation - state change 的流程来进行，再结合Vue的数据视图双向绑定特性来实现页面的展示更新。统一的页面状态管理以及操作处理，可以让复杂的组件交互变得简单清晰，同时可在调试模式下进行时光机般的倒退前进操作，查看数据改变过程，使code debug更加方便。 最近在开发的项目中用到了Vuex来管理整体页面状态，遇到了很多问题。决定研究下源码，在答疑解惑之外，能深入学习其实现原理。 先将问题抛出来，使学习和研究更有针对性： 1. 使用Vuex只需执行 Vue.use(Vuex) ，并在Vue的配置中传入一个store对象的示例，store是如何实现注入的？ 2. state内部是如何实现支持模块配置和模块嵌套的？ 3. 在执行dispatch触发action（commit同理）的时候，只需传入（type, payload），action执行函数中第一个参数store从哪里获取的？ 4. 如何区分state是外部直接修改，还是通过mutation方法修改的？ 5. 调试时的“时空穿梭”功能是如何实现的？ 注：本文对有Vuex有实际使用经验的同学帮助更大，能更清晰理解Vuex的工作流程和原理

前面的话 　　Redux是Flux思想的另一种实现方式。Flux是和React同时面世的。React用来替代jQuery，Flux用来替换Backbone.js等MVC框架。在MVC的世界里，React相当于V(view)的部分，只涉及页面的渲染。一旦涉及应用的数据管理部分，还是交给Model和Controller。不过，Flux并不是一个MVC框架，它用一种新的思路来管理数据。本文将详细介绍Redux的内容 MVC 　　MVC是业界广泛接受的一种前端应用框架类型，这种框架把应用分为三个部分： 　　Model(模型)负责管理数据，大部分业务逻辑应该放在Model中 　　View(视图)负责渲染用户页面，应该避免在View中涉及业务逻辑 　　Controller(控制器)负责接受用户输入，根据用户输入调用相应的Model部分逻辑，把产生的数据结果交给View部分，让View渲染出必要的输出 　　MVC框架提出的数据流很理想，用户请求先到达Controller，由Controller调用Model获得数据，然后把数据交给View。但是，在实际框架实现中，总是允许View和Model直接通信 　　然而，在MVC中让View和Model直接对话就是灾难 Flux 　　Facebook用Flux框架来替代原有的MVC框架，这种框架包含四个部分： 　　Dispatcher负责动作分发

Vue 综合了 Angualr 和 React 的优点，因其易上手，轻量级，受到了广泛应用。成为了是时下火热的前端框架，吸引着越来越多的前端开发者！ 本文将通过一个最简单的拖拽例子带领大家快速上手 Vue 组件 Vue-Draggable。 首先，需要在工作环境中配置好 Vue-cli，创建一个 vue 项目。 vue create test_1 创建项目时会有很多安装步骤，按下面的说明选择配置： 1.pick a preset 选择 Manually select features 2.Check the features needed for your project 选择 Babel 和 CSS Pre-processors 两项（使用空格键来选中或取消） 3.Pick a CSS pre-processor 选择 Sass/SCSS(with node-sass) 4.Where do you prefer placing config 选择 In dedicated config files 5.Save this as a preset for future projects？ 选 yes ，并填写一个名字，以后的 Vue 项目就可以继续使用这个配置 6. Pick the package manager to use when installing

一、本尊建议的学习顺序：https://zhuanlan.zhihu.com/p/23134551（侵删） 二、安装： 1、安装 Node.js，可以去Node.js的官网上下载； 2、（非必选）如果想日后方便使用，安装依赖包快一点，切一下淘宝 npm 的镜像，不会的百度：切换淘宝npm镜像 ，就会出来一大堆，自己看！ 3、安装webpack，运行：npm install webpack -g，这里有全局安装和局部安装（区别在后面的 -g 参数），建议选全局的； 4、然后通过 vue-cli 的脚手架一步一步的搭建一个vue的项目，直到能跑起来为止。 详情：https://blog.csdn.net/six_six_six_666/article/details/82633731 （侵删） 5、文件夹目录： 三、部分知识整理： 1、vue单文件： 以*.vue结尾的文件，最终通过webpack也会编译成*.js在浏览器运行（webpack找人来理解你的单文件代码） <style> /* pageFullScreen在index.css */ #xxxFullScreen { background-color: #eee; } </style> <template> <div class="pageFullScreen" id="xxxFullScreen"> </div> <