前端组件 | 易学教程

vue+element ui 的表格列使用组件

阅读更多关于 vue+element ui 的表格列使用组件

前言：工作中用到 vue+element ui 的前端框架，有这个场景：很多表格的列有许多一样的，所以考虑将列封装为组件。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9530781.html 网站地址：我的个人vue+element ui demo网站 github地址： yuleGH github 代码如下：　　这里有两种方式让表格使用组件 <el-table :data="tableData" style="width: 100%">  <my-select-column :select-options="selectOptions" key-field="selectOption"></my-select-column>  <el-table-column label="备注" width="180"> <template slot-scope="scope"> <my-input :key-field.sync="scope.row.remark"></my-input> </template> </el-table-column> </el-table> 　　js  <script type="text/javascript"> window

Vue、PHP、Bootstrap联手打造简单数据管理表格

阅读更多关于 Vue、PHP、Bootstrap联手打造简单数据管理表格

这是一个用Vue、Bootstrap和PHP一起写的小实例，回顾总结了一下之前学习的知识，顺带添加点学习乐趣。先上效果图：用到的知识有：Vue数据绑定及组件、Bootstrap界面、PHP-AJAX交互、MySQL存储，其他细节的就不说了。建立的文件有三个：一个HTML文件（Vue.html，js内嵌在HTML中）、两个PHP文件（getData.php、addData.php）。首先构建前端界面：　　 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>测试HTML</title> 6 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 7 <link href="https://cdn.bootcss.com/tether/1.3.6/css/tether.min.css" rel="stylesheet"> 8 <style type="text/css"> 9 #app-1{ 10 width: 50%; 11 margin:auto; 12 margin-top: 6%; 13 } 14 .btn{ 15 cursor:

[Vue] : 路由

阅读更多关于 [Vue] : 路由

什么是路由对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；在 vue 中使用 vue-router 路由的基本使用包括以下几步：引入 vue-router.js ，也可以通过 npm 安装，后面再介绍创建模板对象创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了一个路由的构造函数，叫做 VueRouter ，在 new 路由对象的时候，可以为构造函数，传递一个配置对象。配置对象中的 routes 表示路由匹配规则，每个路由规则，都是一个对象，这个规则对象身上，有两个必须的属性： path 表示监听的路由链接地址； component 表示，如果路由是前面匹配到的 path ，则展示 component 属性对应的那个组件，注意： component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称。 router: routerObj 将路由规则对象，注册到 vm 实例上，用来监听

vue项目的骨架及常用组件介绍

阅读更多关于 vue项目的骨架及常用组件介绍

vue项目基础结构一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的"页面"，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态SPA网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。 1.vue-cli：搭建基本的vue项目骨架，脚手架工具 2.sass-loader&node-sass:我是使用的sass作为样式的预编译工具，两者缺一不可，大家也可以自行选择，less,stylus都可以 3.postcss:实现响应式布局的关键，px=>rem。大漠已经提出了基于vw,vh的布局方案，不过我暂时持观望态度。 4.vuex:管理复杂的数据流向，状态机工具，特化的Flux 5.vuex-persistedstate:将vuex中state持久化的工具 6.vue-router:实现SPA间“页面”之间的跳转 7.vue-lazyload:实现图片的懒加载，优化http传输性能 8.vue-awesome-swiper:轮播功能的实现及一些特殊切换效果的完成 9.better-scroll:实现列表滚动及父子组件间的滚动问题 10.axios:http工具，实现向API请求数据，以及拦截器的实现

前端新手引导功能

阅读更多关于前端新手引导功能

背景笔者最近做一个新手引导功能，这个引导独立于实际产品，但是却包含部分产品的功能，是一个单独的模块。在实现上，一开始想的尽量把引导功能和产品功能分开。做的时候也尽量这样做了。最外层是引导功能的组件，实现引导相关的逻辑，这个组件包含了产品功能组件，产品功能组件不用不关心引导组件的存在。功能组件只需要实现功能并且提供相应的事件函数就行。最后为了能在功能组件里高亮显示引导区，直接在引导组件里通过选择器把功能组件里的元素层级改为比较高。这样当引导组件遮挡这个屏幕时，功能区元素是高亮显示且可以点击的。边实际操作产品功能边完成整个引导逻辑。当笔者做完以后，发现如果要在引导中间加入一个流程，不能通过修改一个配置就完成。需要修改一些代码，相当于需要熟悉整个引导流程当代码才能进行修改和添加。这缺乏一定当扩展性，而且维护成本会比较高。于是笔者在网上寻找其他人是如何做新手引导的。经过在网上找了一圈，有对引导功能进行总结的：引导功能代码，不能混入正常游戏逻辑代码中，后患无穷，应尽量分离；（难以忍受优雅的代码被无情的打乱，更难忍受糟糕的代码被弄的支离破碎）界面只发生简单的UI位移、Size大小、节点层次的调整，不需要修改具引导代码；定位UI指引矩形区域应尽可能简单，能自适应不同的屏幕尺寸；显然，我目前的代码是不能满足这个总结的。如果只是让用户看引导，并且点击引导层，然后一步一步说明

为什么要学习Vue——前端框架角度

阅读更多关于为什么要学习Vue——前端框架角度

什么是框架框架（Framework）是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法;另一种定义认为，框架是可被应用开发者定制的应用骨架。前者是从应用方面而后者是从目的方面给出的定义。可以说，一个框架是一个可复用的设计构件，它规定了应用的体系结构，阐明了整个设计、协作构件之间的依赖关系、责任分配和控制流程，表现为一组抽象类以及其实例之间协作的方法，它为构件复用提供了上下文(Context)关系。因此构件库的大规模重用也需要框架。构件领域框架方法在很大程度上借鉴了硬件技术发展的成就，它是构件技术、软件体系结构研究和应用软件开发三者发展结合的产物。在很多情况下，框架通常以构件库的形式出现，但构件库只是框架的一个重要部分。框架的关键还在于框架内对象间的交互模式和控制流模式。框架比构件可定制性强。在某种程度上，将构件和框架看成两个不同但彼此协作的技术或许更好。框架为构件提供重用的环境，为构件处理错误、交换数据及激活操作提供了标准的方法。应用框架的概念也很简单。它并不是包含构件应用程序的小片程序，而是实现了某应用领域通用完备功能（除去特殊应用的部分）的底层服务。使用这种框架的编程人员可以在一个通用功能已经实现的基础上开始具体的系统开发。框架提供了所有应用期望的默认行为的类集合。具体的应用通过重写子类(该子类属于框架的默认行为)或组装对象来支持应用专用的行为。

16款优秀的Vue UI组件库推荐

阅读更多关于 16款优秀的Vue UI组件库推荐

6款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。后面才发现，基于Vue的Quasar Framework 介绍这个框架UI组件很全面，准备下次使用这个框架了基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Framework https://github.com/quasarframework/quasar Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：响应式网站 PWA（Progressive Web App）

什么是Vue.js?

阅读更多关于什么是Vue.js?

Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并列成为前端的三大主流框架。 Vue.js是一套构建用户界面的渐进式框架，与其他重量级的框架不同的是，Vue采用自底向上增量开发的设计，它的核心只专注视图层，非常容易与其他库或者是已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发复杂的单页面应用程序。数据驱动 + 件化的前端开发总结： Vue.js是一个构建数据驱动的web界面的渐进式框架，它的目标是通过尽可能简单的API来实现响应的数据绑定和组合的视图组件核心是一个响应的数据绑定系统。 Vue.js的4个特性： 1.轻量级的框架 2. 双向数据绑定 3. 指令 4. 组件化关于渐进式的理解：不管是单页面还是多页面。首先都是通过声明式渲染声明每个字段，这是基本要求。我们通常会把公共的头部和尾部抽出来，做成组件。这时候就需要使用组件系统。单页面应用程序往往是需要路由，这个时候需要把vue的 vue-router 拉进来做路由，如果我们做的项目足够复杂，大量的使用组件而难以去管理组件的状态，这个时候我们使用 vue-resource （vue-resource是集中来管理我们的状态的）

前端全栈

阅读更多关于前端全栈

1. Nginx使用proxy_pass反向代理时,session丢失的问题如果只是host，端口转换，则session不会丢失。例如： location /testwx { proxy_pass http://127.0.0.1:8080/testwx; } 如果路径也变化了，则需要设置cookie的路径转换，nginx.conf的配置如下 location /testwx { proxy_pass http://127.0.0.1:8080/wx; proxy_cookie_path /wx /testwx; } 2. rpc之gRPC gRPC 一开始由 google 开发，是一款语言中立、平台中立、开源的远程过程调用(RPC)系统。基于HTTP/2，提供了连接多路复用、双向流、服务器推送、请求优先级、首部压缩等机制。可以节省带宽、降低TCP链接次数、节省CPU，帮助移动设备延长电池寿命等。 gRPC 的协议设计上使用了HTTP2 现有的语义，请求和响应的数据使用HTTP Body 发送，其他的控制信息则用Header 表示。 IDL使用ProtoBuf，gRPC使用ProtoBuf来定义服务，ProtoBuf是由Google开发的一种数据序列化协议（类似于XML、JSON、hessian）。 HTTP/2 传输的数据是二进制的。相比 HTTP/1.1 的纯文本数据

React教程：组件与组件属性

阅读更多关于 React教程：组件与组件属性

1、React组件化概念 1.1、组件的概念 React 应用都是构建在组件之上。组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。 1.2、组件的特点组件化的概念在后端早已存在多年，只不过近几年随着前端的发展，这个概念在前端开始被频繁提及，特别是在MV*的框架中。前端中的“组件化”这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。标准性任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。组合性组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。重用性任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。可维护性任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解

订阅前端组件