前端框架 | 易学教程

五.[前端总结]之框架 Vue 篇

阅读更多关于五.[前端总结]之框架 Vue 篇

1. nextTick 在下次 dom 更新循环结束之后执⾏延迟回调，可⽤于获取更新后的 dom 状态新版本中默认是 mincrotasks , v-on 中会使⽤ macrotasks macrotasks 任务的实现: 　　setImmediate / MessageChannel / setTimeout 2. ⽣命周期 ini t initLifecycle/Event ，往vm上挂载各种属性 callHook: beforeCreated : 实例刚创建 initInjection/initState : 初始化注⼊和 data 响应性 created: 创建完成，属性已经绑定，但还未⽣成真实 dom` 进⾏元素的挂载： $el / vm.$mount() 是否有 template : 解析成 render function 　　*.vue ⽂件 : vue-loader 会将 <template> 编译成 render function beforeMount : 模板编译/挂载之前执⾏ render function ，⽣成真实的 dom ，并替换到 dom tree 中 mounted : 组件已挂载update 执⾏ diff 算法，⽐对改变是否需要触发 UI 更新 flushScheduleQueue watcher

前端三大框架(vue、react、angular)对比（一）

阅读更多关于前端三大框架(vue、react、angular)对比（一）

官网 vue https://cn.vuejs.org/ react https://react.docschina.org/ angular https://angular.cn/ 三者总体介绍都是MVVM（从后端的MVC衍生）类型的框架基本都用于构建单页应用都是响应式的前端框架都是基于Node和webpack来构建的生产环境三者在思想上和用法上具有很多相似之处三者都是基于工程化、组件化、模块化的开发方式都可以理解为构建用户界面的框架技术角度：三者都基于组件、路由、模板、数据请求、状态管理等共通之处适合项目 vue 适合中小型项目 angular 集成度高，大中型项目 react 灵活性较高，大中型项目全家桶 vue —— vue-cli + vue2.0 + vuex + vue-router + axios + element-ui react —— react-cli + react + react-dom + react-router + axios + redux + Ant Design angular —— angular-cli + angular + angular-router + service + rxjs + ng-zorro 基本介绍 vue —— 渐进式的JavaScript框架，会html、css、js就可以直接上手开发

Vue.js 和 MVVM 小细节

阅读更多关于 Vue.js 和 MVVM 小细节

Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。 1、为什么会出现 MVVM 呢？我接触MVVM 是在2015年，可以说2015年是MVVM 最火热的一年，而在这之前，我所知道的就是MVC, MVC 大约是在5年前，也就是2011年的时候接触的，那时候刚学编程语言，学的Java，而Java 中经典的 SSH 框架就用来构建一个标准的MVC 框架。说实话，MVC 用了这么多年，但始终没有很深刻的理解，只停留在用的层面，一直到接触 Vue.js 之后，研究了MVVM 架构思想，然后再回头看 MVC ，才有一种豁然开朗的感觉~ MVC 即 Model-View-Controller 的缩写，就是模型-视图-控制器 , 也就是说一个标准的Web

vue前端UI框架element-ui在项目中的安装及使用

阅读更多关于 vue前端UI框架element-ui在项目中的安装及使用

vue前端UI框架element-ui在项目中的安装及使用 element-ui的安装普通安装使用vue-cli3安装使用可视化编辑 element-ui的安装普通安装 element-ui是款热门的vue前端UI框架，官方文档为： https://element.eleme.io/#/zh-CN 。要安装element-ui，只需要在vue项目根目录中执行： npm i element-ui -S 使用vue-cli3安装如果自己的vue项目于是用vue-cli3创建的，则有更好的安装办法，使用对应vue-cli的element插件，官方github地址为： https://github.com/ElementUI/vue-cli-plugin-element ，在vue项目根目录中执行： vue add element 安装过程需要选择一些选项，选择结果参照下图：全局导入element-ui组件选择覆盖element的scss变量语言选择中文使用使用element-ui进行前端页面开发时，建议参考官方的组件文档： https://element.eleme.cn/#/zh-CN/component/layout ，文档中给出了所有的组件及对应的代码，开发时只需按照需要复制相应的代码即可。可视化编辑为了更快地利用element-ui开发前端页面

前端框架vue学习

阅读更多关于前端框架vue学习

一、VUE概述 1. Vue.js 是什么？ Vue.js 是简单小巧，渐进式，功能强大的技术栈 2. Vue.js 的模式 MVVM模式，视图层和数据层的双向绑定，让我们无需再去关心DOM操作的事情，更过的精力放在数据和业务逻辑上去 3. Vue.js 环境搭建 script 引入 src（如： <script src="../lib/vue.js" type="text/javascript"></script> ） vue 脚手架工具 vue-cli 搭建 4.Vue.js 的优点低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 "View" 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。可重用性。可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。易用、灵活、高效。二、VUE的指令学习 1.text+html+cloak+插值表达式学习指令：插值表达式：语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成

前端学习之JavaScript的框架

阅读更多关于前端学习之JavaScript的框架

目的：学习并掌握JS的框架（心得记录和启发）内容：框架，框架原理，Vue，React，Angular（三大框架）。（未完成，待继续）学习思路： 0、学习框架之前，应该具备：JS，HTML，CSS的知识。（这些资源在bilibili网站上有不错的资源，可以边看边学） 1、学习框架之前，应该了解下MVVM的设计思想： MVVM 。 2、框架的基本原理：框架原理。 3、Vue。Vue官网是最好的学习资料。对于刚入门的人来说，建议选择 Vue 入手，对初学者友好，比较简单，灵活，资料多。Vue的官网： Vue 。 4、React。React的官网： React 。 5、Angular。Angular的官网： Angular 。来源： https://www.cnblogs.com/xinkuiwu/p/11899778.html

前端框架开始学习Vue(二)

阅读更多关于前端框架开始学习Vue(二)

1 根据关键字实现数组的过滤 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css3.3.7/bootstrap.css"/> </head> <script src="vue.js"></script> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label for=""> id: <input type="text" class="form-control" v-model="id"/> </label> <label for=""> name: <input type="text" v-model="name" /> </label>  <input type="button" value="添加" class="btn

通用前端开发框架（一）

阅读更多关于通用前端开发框架（一）

前言最近在几个spa的项目中都使用前后端完全分离，后端只提供数据接口的方式。慢慢总结了一套前端的通用框架。这个框架没有语法限制，没有特别的规则，可接任何语言的后台。一切以快速开发为准则。技术总览技术上来说，使用seajs做模块调度。核心模块有：jquery、jquery-ui、backbone（一个前端MVC框架）、less（一个是css能用变量等编程特性来编写的js库）。已经包括的可用模块有：contextMenu（jquery右键菜单插件）、bootstrap（来自twitter的通用的css和js库）、uploadify（jquery文件上传插件）、qtip（jquery提示插件）。后续可能加入：kindeditor（富文本插件）。文件结构根目录： core : 存放的是核心的库文件，如jquery。 module : 中存放的是可选的模块和用户自己创建的模块。 index.php : 是示例的页面模板，这个模板可以是任何文件，html或者jsp等都行。如果你的应用中有多个页面，都放在根目录下就行了。 init.js : 你的应用的初始化文件，可以在里面指定模块的别名。可以在里面启动默认的模块。一切初始化的工作都可以放在这里。 sea.js ： seajs核心文件，勿动。示例：快速构建一个基础的应用观看本示例时，你需要了解基本的seajs用法。 1

前端工程——基础篇

阅读更多关于前端工程——基础篇

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

构建单页Web应用

阅读更多关于构建单页Web应用

构建单页Web应用摘自前端农民工的博客让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。开发框架 ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统

订阅前端框架