前端组件

最近对整个前端的知识做了一次复盘，总结了一些知识点，分享给大家有助于加深印象。 想要更加理解透彻的同学，还需要大家自己去查阅资料或者翻看源码。后面会陆续的更新一些相关注知识点的文章。 文章只提出问题，并给出答案。 目录 1、对于Vue是一套渐进式框架的理解 2、对MVVM的理解 3、vue数据双向绑定的原理 4、vue.js的核心是什么？ 5、vue中如何编写可复用的组件？ 6、什么是vue生命周期和生命周期钩子函数？ 7、vue更新数组、对象时触发视图更新的方法，可以顺便讲讲为什么。 8、 v-if 和 v-show 有什么区别 9、vue常用的修饰符 10、vue事件中如何使用event对象？ 11、vue如何监听键盘事件中的按键？ 12、v-on可以监听多个方法吗？ 13、vue中 key 值的作用 14、Vue 组件中 data 为什么必须是函数 15、v-for 与 v-if 的优先级 16、vue中父子组件如何相互调用方法 17、vue父子组件的传值和注意事项 18、兄弟组件的传值（vue中央事件总线的使用） 19、vue中 keep-alive 组件的作用 20、$nextTick的使用 21、解决非工程化项目初始化页面闪动问题 22、v-model语法糖的组件中的使用 23、怎么实现自定义过滤器，常用的过滤器 24、怎么写一个vue指令,指令是拿来干什么的？ 25

一 Kubernetes概述 名称 Kubernetes 源于希腊语，意为 “舵手” 或 “飞行员”。Google 在 2014 年开源了 Kubernetes 项目，Kubernetes 是一个可移植的、可扩展的开源平台，用于管理容器化的工作负载和服务，可促进声明式配置和自动化。Kubernetes 拥有一个庞大且快速增长的生态系统。Kubernetes 的服务、支持和工具广泛可用。 1.1 容器发展由来 传统部署时代： 早期，组织在物理服务器上运行应用程序。无法为物理服务器中的应用程序定义资源边界，这会导致资源分配问题。例如，如果在物理服务器上运行多个应用程序，则可能会出现一个应用程序占用大部分资源的情况，结果可能导致其他应用程序的性能下降。一种解决方案是在不同的物理服务器上运行每个应用程序，但是由于资源利用不足而无法扩展，并且组织维护许多物理服务器的成本很高。 虚拟化部署时代： 作为解决方案，引入了虚拟化功能，它允许您在单个物理服务器的 CPU 上运行多个虚拟机（VM）。虚拟化功能允许应用程序在 VM 之间隔离，并提供安全级别，因为一个应用程序的信息不能被另一应用程序自由地访问。 因为虚拟化可以轻松地添加或更新应用程序、降低硬件成本等等，所以虚拟化可以更好地利用物理服务器中的资源，并可以实现更好的可伸缩性。 每个 VM 是一台完整的计算机，在虚拟化硬件之上运行所有组件

1.什么是React？ React是一个前端框架，来自于facebook，适合于大型项目，效率高，基于组件化的方式开发。 React是一个基于组件化开发的前端框架，是facebook于13年5月开始开源的一个框架，效率非常高， 适合于大型项目，用于制作单页面SPA应用。 2.React环境搭建 1）传统<script>标签引入资源（适合初学者入门） 2）手动npm安装 3）yeoman脚手架（推荐） 安装yeoman cnpm i -g yo 安装生成器 cnpm i -g generator-react-webpack 创建 yo react-webpack 终止默认安装依赖，安装依赖 cnpm i 4）运行项目 npm start //自动查找当前目录下的package.json中的start命令，执行该命令 npm run dist //打包命令，将制作完成的项目导出 3.JSX语法 1).什么是JSX? JSX是React中的特殊语法，是js的一种补充，可以直接在js代码中编写html标签，并不能直接运行， 需要使用babel编译成ES5代码后才能执行。 2).JSX表达式 <h1>hello</h1> <h1>{str}</h1> <h1>{运算符}</h1> <h1 {展开运行符}></h1> <h1 style={样式对象}></h1> {/* JS的注释*/} 3)

前言 自己也只是一个前端的小白，因为公司大佬都比较忙，面试这种事就落到了我这小白身上，第一次叫我去的时候我是百般拒绝的，因为自己还是有自知之明的，但是别人实在抽不开身，没办法只能去了，他们开玩笑说就按你这水平来就行了，啥时候你问不住了就让他来复试就行。 前前后后也面了一些人，加上自己面试时候整理的一些问题，写了这篇文章，感谢拨冗翻阅拙作,敬请斧正。 下面进入正文，本文会列举一些平时面试时问到的问题和答案，并说明我在当时问到这个问题时所期望对方的回答： 问题 请说一下vue的生命周期函数（钩子函数）。 问题描述 首先关于生命周期函数，一般我的第一个问题就是这个，我认为是每个使用vue的都要清楚的，如果这个问题答的问题很大其实我都不太想继续往下进行了。 即使英语不标准（我就是不标准的人，并不是说这是个问题）也要去把关键点说清楚，哪个地方有ed哪个地方没有ed其实是很关键的，或者可以手写下来，因为常用的就是created和mounted所以前4个可以清楚的手写出来并不难，后面4个不去详细说明都没事。（我自己工作中基本没用过后面4个） 在哪个周期能够首次拿到data数据和在哪个周期能够首次拿到mounted中的dom元素，如果没有说到这个问题，我一般会一直往下问，直到他说出来这两个答案。 期望答案 beforeCreate、created

Vuex 一、基础 　　1. Vuex 相当于 vue的数据仓库 　　2. Vuex 是 vue 的状态管理工具 　　3. Vuex中的 state 只能通过mutations 改变 　　4. Vuex很适合做购物车 什么是Vuex？ 　　Vuex采用集中式存储所有组件的数据状态，并且中间状态和store（后台数据）是响应的。 什么是响应？ 　　前台的组件数据发生改变了，那后台的store数据都会发生改变，从而导致根这个组件有关联的都会改变，所以很适合做购物车。 Vuex有什么好处？及使用场景？ 　　好处：可以做状态管理 采用LocalStorage保存信息，数据便一直存储在用户的客户端中。 　　使用场景：适合在巨大复杂的项目中使用。 Vuex有什么优势？ 　　1. Vuex的状态存储是响应式的 　　2. 它是所有组件的状态集合 Vuex的核心及其作用 　　核心概念：state，getters，mutation，action，module 　　作用：组件之间的数据通信，使用单向数据流的方式进行数据的中心化管理 详述Vuex的运行机制 　　Vuex的状态存储是响应式的，当Vuex组件从store中读取时，若 store状态发生改变，响应的组件也会更新状态，但是直接改变 state，必须通过显示的提交（commit）mutaions来追踪每个状态的变化。 二、Vuex的流程图： 　　1

开篇呢，先给大家问个好，今天是中秋节，祝大家中秋节快乐！！虽然是中秋节，但是木有回家还是总结一下知识点写写博客吧，想着昨天总结一下的，但是昨天和几个同学小聚了一下，酒逢知己总是千杯少呢，喝的微醺不适合写东西，所以就留到今天总结了。因为这段时间在工作中陆陆续续的接触到了一些RN开发的东西，还是需要总结一下的。今天只是个开篇，接下来还会有陆陆续续的关于RN开发的总结， 今天主要是环境搭建、简单的组件封装、Props和State的介绍，稍后还会更新布局、动画等一些开发中常用的东西 。 虽然RN没有Release版、虽然Airbnb放弃了RN、虽然Facebook正在重构RN, 但是RN还是动态化比较好的选择方案的，还是要好好的搞一下RN的，当然也是工作中需要。既然要搞，就得认真呢，这篇是关于RN的第一篇博客，后续还会有其他关于RN的博客跟进的，也好在自己的学习历程中打个Tag。今天博客比较简单，是RN入门级别的，当然进阶的东西目前还没有接触过，等深入后再展开来记录吧。 RN官方文档（ https://facebook.github.io/react-native/docs/getting-started ） 一、RN下的Hello World 接触一个新的东西那必须从 HelloWorld 开始呢，下方就一步步的从无到有搞一个RN的Hello World！ 1、安装Node和VSCode

在Android SDK一文中，我们谈到模块化和组件化，现在我们来聊聊组件化开发背后的哪些事.最早是在广告SDK中应用组件化,但是同样适用于普通应用开发 以下高能,请做好心理准备,看不懂请发私信来交流.本文不推荐新手阅读,如果你刚接触Android开发不久,请立刻放弃阅读本文. 百牛信息技术bainiu.ltd整理发布于博客园 模块化和组件化 模块化 组件化不是个新概念,其在各行各业都一直备受重视.至于组件化什么时候在软件工程领域提出已经无从考究了,不过呢可以确认的是组件化最早应用于服务端开发,后来在该思想的指导下,前端开发和移动端开发也产生各自的开发方式. 在了解组件化之前,先来回顾下模块化的定义 Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality. 简单来说,模块化就是将一个程序按照其功能做拆分，分成相互独立的模块

序言：组件化？模块化？这都是什么鬼？这是最初看到这2个新名词的反应。随着时间的推移，似乎、可能、大概明白了一点，于是想说说自己的理解(仅仅是自己的理解) 一、组件化 忘记什么时候看到这个词的了，由于用过bootstrap的前提下(一下简称BS)，当时第一反应是这样的，组件化不就是像BS那样把html拆分为：按钮组、栅格系统、导航组等等N多个组件，用的时候直接用BS提供class不就行了吗？ 当然简单可以这么理解，但是跟深层次的理解应该是这样的，如你看到的一个html源码可能是这样的： <body > <top-header></top-header> <common-content></common-content> <top-footer></top-footer> </body> 很多人咋一看可能回想，这tm是html标签吗？当然不是，只是自定义的组件标签，通过第三方去处理，好处就是互相不影响，用谁放谁，不用拿走，维护起来和多人协作更方便。 二、模块化 前端模块化更确切的说应该是javascript的模块化，其实就是一些功能以及业务逻辑的封装，比如之前一个小例子：鼠标悬停出现下拉框与鼠标悬停切换（具体参看之前一篇： 如何巧妙的用面向对象封装常用效果 ） function Overitem(option){ this.init(option); } Overitem

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> # 前端工程——基础篇 > 喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。 你好，切图仔。 不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。 只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一定会有所共鸣。 ## 前端，是一种GUI软件 现如今前端可谓包罗万象，产品形态五花八门，涉猎极广，什么高大上的基础库/框架，拽炫酷的宣传页面，还有屌炸天的小游戏……不过这些一两个文件的小项目并非是前端技术的主要应用场景，更具商业价值的则是复杂的Web应用，它们功能完善，界面繁多，为用户提供了完整的产品体验，可能是新闻聚合网站，可能是在线购物平台，可能是社交网络，可能是金融信贷应用，可能是音乐互动社区，也可能是视频上传与分享平台…… > 从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。 如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模

作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 学习组件化开发，首先掌握组件化的开发思想，组件的注册方式，组件间的数据交互方式，组件插槽的用法，vue调式工具的用法，组件的方式来实现业务逻辑功能。 组件化开发思想，组件注册，组件调式，组件间的数据交互，组件插槽 组件化规范，就是多的可能性重用 全局组件注册语法 Vue.component(组件名称, { data: 组件数据, template: 组件模板内容 }) // 定义一个名为button-counter的新组件 Vue.component('button-counter', { data: function() { return { count: 0 } }, template: '<button v-on:click="count++">点击了{{count}}次</button> }) 组件的用法 <div id="app"> <button-counter></button-counter> </div> <button-counter><button-counter> <button-counter><button-counter> Vue.component('button-counter', { data: function()