前端组件

目录 Vue 简介 什么是 Vue？ 优势 如何使用 Vue 常用网站 Vue 简介 渐进式 JavaScript 框架 渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目。你需要用它的什么组件就用什么组件，没有强主张 什么是 Vue？ 可以独立完成前后端分离式 web 项目的 JavaScript 框架 前后端不分离： 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高 前后端分离 在前后端分离的应用模式中，后端仅返回前端所需要的数据，不在渲染 HTML 页面，不再控制前端效果 至于前端用户看到什么效果，从后端请求的数据如何加载到前端，都是由前端自己决定，网页有网页的处理方式，App 有 App 的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可 为什么要学习 Vue ？ 前台框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级） Vue一手文档是中文、中文API（低学习成本） 实现前后台分离开发，节约开发成本 special -- 特点 虚拟DOM 数据的双向绑定 单页面应用 数据驱动 优势 有指令（分支结构，循环结构...），复用页面结构等 有实例成员（过滤器，监听）

v-if和v-show的区别? v-show和v-if的共同点: 都能控制元素的显示与隐藏. v-show和v-if的不同点: 实现本质方法不同, v-show本质控制css中的display为none来控制隐藏, 只会编译一次; v-if是动态的向DOM树内添加或删除DOM元素, 若初始值为false, 就不会编译了. 而且v-if不停的销毁和创建比较消耗性能. 总结: 如果频繁切换某个节点, 使用v-show(切换开销比较小, 初始开销比较大), 如果不需要频繁切换某节点, 使用v-if(切换开销比较大, 初始开销比较小). 如果让css只在当前组件起作用 在组件的style前面加上scoped vue父组件向子组件传递数据, 子组件如何向父组件传递数据 父组件向子组件传递数据: props属性, 子组件向父组件传递数据: 自定义事件$emit 来源： CSDN 作者： 前端新手W 链接： https://blog.csdn.net/weixin_43167546/article/details/104283394

从事多年的开发,对于.net可以说有一定的总结,有关于教科书般的文档,献于交流. 本文整理了当前企业web开发中的管理系统，商城等系统的常用开发技术栈。 C#常见运算符 一元运算符（+、-、!、~、++、--） 算术运算符（*、/、%、+ 、 – ） 移位运算符（<< 、>> ） 关系和类型测试运算符（==、!=、<、>、<=、>=、is 和 as） 逻辑运算符（&、^ 和 | ） 条件逻辑运算符（&& 和 || ） 空合并运算符（??）条件运算符（它也称为三元运算符，?: ） 赋值运算符（=、+=、-=、!=、/=、&=、|=） C#常见语句块 Try（用于捕捉在块的执行期间发生的各种异常） Checked 语句和 Unchecked（用于控制整型算术运算和转换的溢出检查上下文） Lock（获取某个给定对象的互斥锁，执行一个语句，然后释放该锁） Using(获取一个或多个资源，执行一个语句，然后释放该资源) C#常见类修饰符 abstract抽象类 sealed密封类 static静态类 partial分部修饰 访问修饰符（public、protected、internal 和 private ） C#常用预处理指令 #region：指定一个可展开或折叠的代码块 #endregion：它标识着 #region 块的结束 #define： 它用于定义一系列成为符号的字符

一、获取原生DOM 我们之前在vue中获取原生的DOM，都是利用document来获取的，不是很方便。 vue为我们提供了ref属性，来方便的获取标签。 <div ref='div1'></div> <p ref='p1'></p> <Home ref='home1'></Home> 获取标签： this.$refs.div1 //获取ref为'div1'的<div>标签 this.$refs.p1 //获取ref为'p1'的<p>标签 this.$refs.home1 //获取ref为'home1'的组件对象 但是在使用从this.$refs中获取对象的时候，注意声明周期的问题，获取的时候标签是否已经被渲染，如果还未被渲染则会报错。例如想获取的标签是子组件的标签，而这个子组件要点击某个按钮才能被渲染到页面上，如果我们未点击按钮就在父组件去使用this.$refs获取，则会报错。 来源： https://www.cnblogs.com/leokale-zz/p/12285991.html

内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2建立精美的app应用 vuetify ★2925 - 为移动而生的Vue JS 2组件框架 Keen-UI ★2749 - 轻量级的基本UI组件合集 vonic ★1913 - 快速构建移动端单页应用 vue-multiselect ★1539 - Vue.js选择框解决方案 eme ★1529 - 优雅的Markdown编辑器 vueAdmin ★1455 - 基于vuejs2和element的简单的管理员模板 bootstrap-vue ★1267 - 应用于Vuejs2的Twitter的Bootstrap 4组件 Vue.Draggable ★1191 - 实现拖放和视图模型数组同步 eagle.js ★1128 - hacker的幻灯片演示框架 vue-awesome-swiper ★1012

本文将介绍微服务架构和相关的组件，介绍他们是什么以及为什么要使用微服务架构和这些组件。本文侧重于简明地表达微服务架构的全局图景，因此不会涉及具体如何使用组件等细节。 要理解微服务，首先要先理解不是微服务的那些。通常跟微服务相对的是单体应用，即将所有功能都打包成在一个独立单元的应用程序。从单体应用到微服务并不是一蹴而就的，这是一个逐渐演变的过程。本文将以一个网上超市应用为例来说明这一过程。 一：最初的需求 几年前，小明和小皮一起创业做网上超市。小明负责程序开发，小皮负责其他事宜。当时互联网还不发达，网上超市还是蓝海。只要功能实现了就能随便赚钱。所以他们的需求很简单，只需要一个网站挂在公网，用户能够在这个网站上浏览商品、购买商品；另外还需一个管理后台，可以管理商品、用户、以及订单数据。 我们整理一下功能清单： 网站 用户注册、登录功能 商品展示 下单 管理后台 用户管理 商品管理 订单管理 由于需求简单，小明左手右手一个慢动作，网站就做好了。管理后台出于安全考虑，不和网站做在一起，小明右手左手慢动作重播，管理网站也做好了。总体架构图如下： 小明挥一挥手，找了家云服务部署上去，网站就上线了。上线后好评如潮，深受各类肥宅喜爱。小明小皮美滋滋地开始躺着收钱。 二：随着业务发展…… 好景不长，没过几天，各类网上超市紧跟着拔地而起，对小明小皮造成了强烈的冲击。 在竞争的压力下

目录 简介 实现服务注册组件 设计服务注册表数据结构 搭建应用程序框架 定义服务注册表接口 使用 ZooKeeper 实现服务注册 服务注册模式 实现服务发现组件 搭建应用程序框架 实现服务发现 服务发现优化方案 服务发现模式 参考 简介 先来回顾下整体的微服务架构 在发布微服务时，可连接 ZooKeeper 来注册微服务，实现“服务注册”。当浏览器发送请求后，可使用 Node.js 充当 service gateway，处理浏览器的请求，连接 ZooKeeper，发现服务配置，实现服务发现。 实现服务注册组件 Service Registry(服务注册表)，内部拥有一个数据结构，用于存储已发布服务的配置信息。本节会使用 Spring Boot 与 Zookeeper 开发一款轻量级服务注册组件。开发之前，先要做一个简单的设计。 设计服务注册表数据结构 首先在 Znode 树状模型下定义一个 根节点 ，而且这个节点是持久的。 在根节点下再添加若干子节点，并使用服务名称作为这些子节点的名称，并称之为 服务节点 。为了确保服务的高可用性，我们可能会发布多个相同功能的服务，但由于 zookeeper 不允许存在同名的服务，因此需要再服务节点下再添加一层节点。因此服务节点则是持久的。 服务节点下的这些子节点称为 地址节点 。每个地址节点都对应于一个特定的服务，我们将服务配置存放在该节点中。

移动端 移动端 Web 开发 自动轮播效果 HTML 轮播使用的标签是 ul, ul 中的 li 默认是竖起来排列的, 通过 CSS 设置为左浮动将他们横向排列 JS 为了实现左右的循环轮播, 将第 1 张复制到最后, 将原来的最后复制到第 1 个之前, 这样总的轮播是从第 2 个开始的 使用 zepto 库, 使用 setInterval 定时器每个一段时间使用 zepto 的 fx 动画库将 ul 平移(这是 left 属性, 需要先将 ul 的 position 设置为 relative), 最后的回调判断是否是最后一张或者是第一张, 重置索引实现循环轮播 标识的设置 将所有标签的 class 去掉, 在将当前的设置为激活 node 安装与配置 安装 nvm (类似于 pyenv 管理多版本 node) nvm 命令 nvm install node : 安装最新版本的 nodejs nvm install stable : 安装最新稳定的 nodejs nvm ls : 列出当前安装的 nodejs 版本, 加星号为当前正在使用的nodejs版本 nvm use ... : 使用哪个 nodejs 版本 安装 nrm (用于管理 npm 安装的默认源), npm install -g nrm nrm ls : 列出所有可用的源, 其中加了 * 表示当前正在使用的默认源

一、简介 Vue是什么 Vue是一个当前流行的前端框架 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 渐进式框架 笔者理解的“渐进式框架”也非常简单，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。 VUE不强求你一次性接受并使用它的全部功能特性。 场景一：公司刚开始一个项目，技术人员对Vue的掌握也不足够。那么我们就不能使用VUE了么？当然不是，如果你只是使用VUE做些 基础操作，如：页面渲染、表单处理提交功能，那还是非常简单的，成熟技术人员上手也就一两天。完全可以用它去代替jquery。并不需要你去引入其他复杂特性功能。 场景二：我们项目用了VUE，使用的效果也挺好。那么我们想逐渐实现代码组件化，实现代码的复用，或者是基于组件原型的跨项目的代码复用。那么我们就可以引入VUE的components组件特性了。 场景三：我们的项目规模逐渐的变大了，我们可能会逐渐用到前端路由、状态集中管理、并最终实现一个高度工程化的前端项目。这些功能特性我们可以逐步引入，当然不用也可以。

1.路由的概念 路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现，并完成资源的分发 2).前端路由是依靠hash值(锚链接)的变化进行实现 后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由 前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系 前端路由主要做的事情就是监听事件并分发执行事件处理函数 2.前端路由的初体验 前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换） 核心实现依靠一个事件，即监听hash值变化的事件 window.onhashchange = function(){ //location.hash可以获取到最新的hash值 location.hash } 前端路由实现tab栏切换： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial