前端组件

BootPage组件简介 其实也不是啥高大上的组件了，相反确实一个简单的表格分页组件而已，主要是自己最近项目中需要一个表格分页组件，而Vue官方组件库里分页组件都功能太强大或者没有适合我的，所以就自己写了一个凑合着用，或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能，我便在这里分享一下，大家自觉填坑咯。 如需高大上的组件，可以移步Vue官方组件库： https://github.com/vuejs/awesome-vue#libraries--plugins BootPage是一款支持静态数据和服务器数据的表格分页组件，支持调整每页显示行数和页码显示个数，样式基于bootstrap，就像这样： 在线演示： https://luozhihao.github.io/B... 使用方法 在.vue的组件文件中我们这样写template，即html代码： <table class="table table-hover table-bordered"> <thead> <tr> <th width="10%">id</th> <th width="30%">name</th> <th width="40%">content</th> <th width="20%">remark</th> </tr> </thead> <tbody> <tr v-for="data in

目录 一、vue-cookies简介 二、vue-cookies安装与配置 三、vue-cookies的使用 一、vue-cookies简介 vue-cookies组件是vue框架用来操作浏览器cookies的一种组件。 可以按 key:value 的形式将数据储存到浏览器的cookie中。 注意： vue-cookies和vue-cookie是两种组件，不要混淆了！ 二、vue-cookies安装与配置 安装：前端项目目录下的终端 >: cnpm install vue-cookies 配置：main.js import cookies from 'vue-cookies' Vue.prototype.$cookies = cookies; 三、vue-cookies的使用 // 设置cookie exp: '1s' | '1h' | '1d' this.$cookies.set(key, value, exp) // 按key取cookie this.$cookies.get(key) // 手动移除cookie this.$cookies.remove(key) // 判断cookie是否存在 return false or true this.$cookies.isKey(key) 注意： cookies的名称key不能设置为以下关键字: ['expires'，'max

Tip 前端技术真是日新月异，搞完 React 不搭配个数据流都不好意思了。 满怀期待的心去翻了翻 flux，简直被官方那意识流的文档折服了，真是又臭又长还是我智商问题？😖 转战 redux ，越看越有意思，跟着文档做了个 TodoList 的入门小例子。 废话不多说，先贴上文章用到例子的源码 https://github.com/TongchengQiu/TodoList-as-redux-demo redux 的 Github 仓库 https://github.com/rackt/redux 还有个中文的 gitbook 翻译文档 http://camsong.github.io/redux-in-chinese/index.html advantage 随着spa（不是SPA，是单页应用）的发展，以 react 来说，组件化和状态机的思想真是解放了烦恼的 dom 操作，一切都为状态。state 来操纵 views 的变化。 然而，因为页面的组件化，导致每个组件都必须维护自身的一套状态，对于小型应用还好。 但是对于比较大的应用来说，过多的状态显得错综复杂，到最后难以维护，很难清晰地组织所有的状态，在多人开发中也是如此，导致经常会出现一些不明所以的变化，越到后面调试上也是越麻烦，很多时候 state 的变化已经不受控制。对于组件间通行、服务端渲染、路由跳转、更新调试

利用webpack解析和打包.vue组件页面 相关知识： vue项目中的每个页面其实都是一个.vue的文件，这种文件，Vue称之为组件页面，必须借助于webpack的vue-loader才能运行，所以必须安装相关的包。 【注意】 从webpack2.0开始，在webpack.config.js中添加babel:{}是不认识的，需要在项目根目录下新建.babelrc文件，内容填写如下： { presets:['es2015'], //这句代码就是为了解决打包.vue文件不报错 plugins:['transform-runtime'] } View Code 好了，接下来看让一个Vue项目跑起来所需要的步骤： 步骤一：需要安装以下几个包 vue：vue.js核心包 vue-loader：.vue文件编译loader vue-template-compiler：.vue模板编译，被vue-loader所依赖 babel-plugin-transform-runtime：es6实时转换成es5语法 安装vue相关的依赖包（--save-dev意思是将包安装到开发环境下） 接着安装vue核心包（--save意思将包安装到运行环境下） 最终package.json文件内容 { "name": "vue", "version": "1.0.0", "description": "",

1. rootModule.ts 指定了根组件：RootComponent. 这个组件的模板只有一句话：<router-outlet></router-outlet> 这样，路由到哪里，这个界面就显示那个组件。 2.rootRoutingModule.ts中，“”路由重定向到 “app/home”,这是主界面，里面有导航等。这个app/home 有路由守卫，如果没登录，会重定向到 Account/Login,登录界面 来源： https://www.cnblogs.com/qgbo/p/12218523.html

亲们支持我的新博客哦==》 地址 （ 以后更新会尽量在新博客更新，欢迎大家访问加入我的后宫w ） （欢迎加群一起玩耍： 575180837 ） UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme - 优雅的Markdown编辑器 vue-multiselect - Vue.js选择框解决方案 vue-table - 简化数据表格 VueCircleMenu - 漂亮的vue圆环菜单 vue-chat - vuejs和vuex及webpack的聊天示例 radon-ui - 快速开发产品的Vue组件库 vue-waterfall - Vue.js的瀑布布局组件 vue-carbon - 基于 vue 开发MD风格的移动端 vue-beauty - 由vue和ant design创建的优美UI组件 vue-blu -

千万级用户网站门户前端设计 对于千万级的注册用户的门户项目是前端这块是怎么去实现的，自己在平常的工作中总结了一些经验，也是在不断的挫折中，不断演练的，希望总结出来给大家参考下，和大家一起探讨，一起进步。 一、门户设计一般会遇到哪些难点 （一）、首页打开时间太慢了 在开发一个门户到生产上线后，首页响应时间是检验门户整个系统架构以及开发的重要的一项指标，有时候我们发现在公司测试发现速度都挺快的，怎么到生产首页打开就慢了呢？ （二）、页面加载不流畅，总感觉看着不舒服 因为门户一般都是偏向于内容和图片类资源比较多，但是我们打开自己的网页，有时候总感觉加载并不是按照我们期望的那样加载得到，顺其自然，总感觉看起来怪怪的。 （三）、希望用户缓存的地方未进行缓存 很多静态的前端资源，其实在系统未进行更新时候，第一次加载之后，希望缓存到用户的本地，但是因为缓存策略没搞好，经常未进行有效的缓存。 （四）、页面的头部尾部经常需要被第三方嵌入 因为作为一个比较大的门户站点，可能会让很多小的服务接入进来，但是头部和尾部因为是需要保持风格统一，所以经常需要被第三方进行嵌入。 （五）、代码没有进行有效的压缩，导致被窃取 因为作为门户站点，前端如果不进行加密的话，代码很容易被别人进行抄袭伪造，而且还很容易清楚里面的业务逻辑，从而很容易仿造和进行攻击。 （六）、增量静态资源发布 经常门户线上环境需要增加一点小功能

既要低头赶路，又要抬头望天，科技是为人服务的，任何技术背后都有更深层次的考量，在本系列的第一篇文章中我们聊了微服务的本质，它是一种可以加速分工、促进合作的新协作机制。知其然，知其所以然，在第二篇文章中我们剖析了微服务为什么可以加速分工、促进合作，今天我们再接着来聊聊怎样开启微服务架构之旅。 微服务到底改变了什么，你知道吗？ 微服务，为什么可以加速分工、促进合作？ 1. 从前后端分离开启微服务改造 现在我们对微服务有了更深入的了解，也准备在构建新系统时采用这套新架构了，但它还是有些复杂度的，包括服务注册中心、统一配置中心、微服务网关、接入层网关、服务治理中心、调用链路追踪、分布式事务和分布式调度等众多组件。一口吃成胖子仅仅是一个美好的愿望，从单体式架构直接升级至全微服务架构，需要掌握这套全新的技术栈，对于缺乏前期铺垫的团队来说，学习曲线还是比较陡的，真正遇到的挑战往往超出想象的。 心理学对此有专门的研究，我们探索陌生世界的动力源于兴趣，而兴趣就是好奇心和正向反馈。如果我们刚开始就把目标设定的太高太远，在坚持努力了一段时间之后，还无法达成目标的话，那我们就接收不到正向反馈。久而久之，好奇心就会消磨殆尽，兴趣也就随之消失了。最靠谱的方式就是段带式进阶，将一个非常宏大的目标拆解成多个阶段性目标。在当前能力水平下，最近的阶段性目标只需要我们稍作努力跳跳脚就可以完成的

1、在 JSX 中，注释的写法： NO1 < Fragment > { /* 正确注释的写法 */ } < div > < input value = { this.state.inputValue } onChange = { this.inputChange.bind ( this ) } / > < button onClick = { this.addList.bind ( this ) } > 增加服务 < /button > < /div > NO2 < Fragment > { //正确注释的写法 } < div > < input value = { this.state.inputValue } onChange = { this.inputChange.bind ( this ) } / > < button onClick = { this.addList.bind ( this ) } > 增加服务 < /button > < /div > 2、 html 标签上的 class 需写为 className ，否则控制台会出现警告 3、JSX 中的 HTML 解析问题 如果想在文本框里输入一个 h1 标签，并进行渲染。默认是不会生效的,可以使用 dangerouslySetInnerHtml 属性 解决，代码如下： < ul > { this.state

vue 插槽 slot 个人理解 个人感觉，为同一组件在不同的情况添加不同的内容，不需要专门修改组件，就像 java 的多态，来提高复用性。比如: 就像一块基础设施完备的土地，给你划分好区域，只要这个位置没有归属权(name)，房子随便盖。 我们可以理解 slot 为占住当前的位置，方便我们插入内容。 Vue 的插槽分为匿名插槽（单个插槽/默认插槽）、具名插槽、作用域插槽(带数据的插槽) vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，被废弃的这两个，不会被支持即无效且不会出现在 Vue 3 中。 // 这是 home 组件模板 <template> <div class='home'> <p>我是home 组件</p> <slot> <h3>没传内容</h3> </slot> </div> </template> //home 组件的内部内容 <home>这是组件的内部内容</home> slot 注意点 vue 插槽的编译作用域的规则: 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。(个人理解: 各自管各自的，谁也别干预谁。也是用 props 和 $emit