前端框架

介绍课程制作的背景和课程主要内容。 1-1 课程导学 试看 第2章 课程介绍 先出几道面试真题，引导思考。带着问题来继续学习，效果更好。 2-1 先看几个面试题 试看 第3章 Vue 使用 Vue 是前端面试必考内容，首先要保证自己要会使用 Vue 。本章讲解 Vue 基本使用、组件使用、高级特性和 Vuex Vue-router ，这些部分的知识点和面试题。 3-1 vue使用-考点串讲 3-2 vue基本使用 3-3 vue基本知识点串讲-part2 3-4 vue父子组件如何通讯 3-5 如何用自定义事件进行vue组件通讯 3-6 vue父子组件生命周期调用顺序 3-7 面试会考察哪些vue高级特性 3-8 vue如何自己实现v-model 3-9 vue组件更新之后如何获取最新DOM 3-10 slot是什么 3-11 vue动态组件是什么 3-12 vue如何异步加载组件 3-13 vue如何缓存组件 3-14 vue组件如何抽离公共逻辑 3-15 vue高级特性知识点小结 3-16 vuex知识点串讲 3-17 vue-router知识点串讲 3-18 vue使用-考点总结和复习 第4章 Vue 原理 要保证自己的面试竞争力，必须掌握 Vue 原理，前端高级面试或者大厂面试中常考。本章讲解虚拟DOM，diff 算法，响应式，模板编译，组件渲染等 Vue

前端开发 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。 发展历程 前端技术的发展是互联网自身发展变化的一个缩影。 前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。 前端开发主要职能就是把网站的界面更好地呈现给用户。 以前会Photoshop和Dreamweaver就可以制作网页，随着网站开发难度加大、开发方式多样，网页制作更接近传统的网站后台开发，网页制作更多被称为Web前端开发。前端技术包括4个部分：前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计，艺术性较强的视觉设计等。 在Web1.0时代，由于网速和终端能力的限制，大部分网站只能呈现简单的图文信息

心之所向，勇往直前！ 记录开发过程中的那些小事，给自己加点经验值。 前言 作为一个 .Net后端 开发，在竞争愈加激烈的当下，掌握点前端配菜好像已经是家常便饭了。 刚好在工作的第5个年头，辞去小主管职务的我要再次踏上面试之路，为了要避免被面试官吊打，除了复习《吊打面试官》相关的题目，当然也要对自己掌握的技能温故知新。 　　 项目使用了Vue cli3.0作为基础架构，这个版本和2.0的有一些不同。具体参考： 　　1. 《 vue cli3.0快速搭建项目详解 》 　　2. 《vue-cli2.0与vue-cli3.0》 　　环境 　　 　　技术栈 上面是项目的一些基本情况，至于实际开发用到的组件这个每个人的项目都有可能不同，这里就不贴出来了;而且这个系列只是对一些关键点进行记录和说明，其他的在网上都可以找到资料的内容就不再重复。 架构 　　微服务 这个词可以说是大火特火，现在很多应用都在逐步朝着这方面转移。 　　这个架构的好处，我想是不言而喻的。浅显点理解就是 独立运行、灵活、扩展性强 。 　　在调整后端架构的同时，我就想前端能不能也实现这种模式？在查找了几天资料（主要参考 《 滴滴 webapp 5.0 Vue 2.0 重构经验分享 》 ）理清思路后，就抽出空余的时间之后就搞出这一套架构。不过距离真正的微前端还是有些差距。毕竟现在前端的框架那么多（Vue、React

Django 模板层 Django 模板层 前后端数据传递 (1) 后端朝前端页面传递数据的方式: # 将当前所在的名称空间中的名字全部传递给前端页面 # 第一种 return render(request,'index.html',{'n':n}) # 第二种 return render(request,'index.html',locals()) (2) 后端传函数名到前端，会自动加括号调用，但是不支持传参 (3) 后端传对象到前端，就相当于打印了这个对象 (4) 前端获取后端传过来的容器类型的内部元素 统一采用句点符(.) ('关某某','谢某某','陈某某','容嬷嬷')>>>:{{ t }},{{ t.1 }} 数字对应的就是数据的索引 (5) 前端能够调用python后端数据类型的一些不需要传参的内置方法 (6) 注释： 模板语法的注释，不会展示到前端页面： {#调用python自带的内置方法,可以调用不需要传参的一些内置方法#} 原生html的注释，会展示到前端: <!--我是原生的html注释--> 过滤器 # 下面的内容，第一行是在前端的代码，第二行是运行的结果 (1) <p>前端统计字符串的长度:{{ s|length }}</p> # 结果：前端统计字符串的长度:16 (2) <p>前端获取数据如果是空就返回default后面默认的参数值:{{ flag

前端框架搭建脚手架（react脚手架） 1、https://www.rails365.net/articles/kai-fa-react-ying-yong-zui-hao-jiao-shou-jia-create-react-app （开发 react 应用最好用的脚手架 create-react-app） 2、类似这样的脚手架，我扫了网络上比较多人用和关注的，一共发现了三个，它们分别是： react-boilerplate react-redux-starter-kit create-react-app 3、http://www.jianshu.com/p/5e6c620ff4d6 （Create-React-App创建antd-mobile开发环境） 4、https://www.cnblogs.com/ye-hcj/p/7191153.html （react.js 之 create-react-app 命令行工具系统讲解） 5、http://blog.csdn.net/cy5849203/article/details/78040257 （使用 create-react-app 构建 react应用程序 （react-scripts）） 6、https://www.cnblogs.com/wonyun/p/6030090.html （html-webpack-plugin详解

文章目录 5.指令学习 5.7.计算属性 5.8.watch 6.组件化 6.1.全局组件 6.2.组件的复用 6.3.局部组件 6.4.组件通信 6.4.1.props（父向子传递） 6.4.2.props验证 6.4.3.动态静态传递 6.4.4.子向父的通信：$emit 7.路由vue-router 7.1.场景模拟 7.1.1.编写父组件 7.1.2.编写登录及注册组件 7.1.3.在父组件中引用 7.1.5.问题 7.2.vue-router简介和安装 7.3.快速入门 5.指令学习 5.7.计算属性 在插值表达式中使用js表达式是非常方便的，而且也经常被用到。 但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值： data : { birthday : 1529032123201 // 毫秒值 } 我们在页面渲染，希望得到yyyy-MM-dd的样式： < h1 > 您的生日是：{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay() }} </ h1 > 虽然能得到结果，但是非常麻烦。 Vue中提供了计算属性，来替代复杂的表达式： var vm

实现效果： 实现方法： 在前端代码新增3处内容： 第一处：新增引用 import { duplicateCheck } from '@/api/api' 第二处：找到编码必填校验规则的前端代码,新增如下: {validator: this.validateCode} 第三处：直接新增此部分代码 validateCode(rule, value, callback){ let pattern = /^[a-z|A-Z][a-z|A-Z|\d|_|-]{0,}$/; if(!pattern.test(value)){ callback('编码必须以字母开头，可包含数字、下划线、横杠'); } else { var params = { tableName: "onl_cgreport_head", fieldName: "code", fieldVal: value, dataId: this.model.id }; duplicateCheck(params).then((res)=>{ if(res.success){ callback(); }else{ callback(res.message); } }) } }, 具体如下图展示： 来源： CSDN 作者： miss_74735 链接： https://blog.csdn.net/miss_74735/article

摘自： https://www.cnblogs.com/mrhelloworld/p/12388859.html 技术架构演变 　　 　　 　　随着互联网的发展，网站应用的规模不断扩大，常规的垂直应用架构已无法应对，分布式服务架构以及流动计算架构势在必行，亟需一个治理系统确保架构有条不紊的演进。 　　 　　 单一应用架构 当网站流量很小时，只需一个应用，将所有功能都部署在一起，以减少部署节点和成本。 此时，用于简化增删改查工作量的 数据访问框架(ORM) 是关键。 缺点：随着应用功能的增多，代码量越来越大，越来越难维护，那怎么解决代码一体化的问题？ 垂直应用架构 当访问量逐渐增大，单一应用增加机器带来的加速度越来越小，将应用拆成互不相干的几个应用，以提升效率。 此时，用于加速前端页面开发的 Web框架(MVC) 是关键。 缺点：垂直架构中相同逻辑代码需要不断的复制，不能复用。每个垂直模块都相当于一个独立的系统。 分布式服务架构 当垂直应用越来越多，应用之间交互不可避免，将核心业务抽取出来，作为独立的服务，逐渐形成稳定的服务中心，使前端应用能更快速的响应多变的市场需求。 此时，用于提高业务复用及整合的 分布式服务框架(RPC) 是关键。 缺点：服务越来越多，需要管理每个服务的地址，调用关系错综复杂，难以理清依赖关系，服务状态难以管理，无法根据服务情况动态管理。 流动计算架构

起因 一直想着要写一定深度的文章，然后觉得学习Vue是一个好的过程，本文将带你走进Vue的世界，支持国内框架！ 如果看完本文还不懂Vue是什么的小伙伴，可以随便打博主！（斜眼笑），前方高能，本文可能篇幅比较长，建议收藏在闲暇时间学习，也欢迎伙伴们讨论留言学习！ Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 提问！你真的懂 前端框架（framework ） 与 库（library） 怎么区别吗？ Library 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作 Framework 框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码 框架规定了自己的编程方式，是一套完整的解决方案 使用框架的时候，由框架控制一切，我们只需要按照规则写代码 主要区别 You call Library, Framework calls you 核心点：谁起到主导作用（控制反转） 框架中控制整个流程的是框架 使用库，由开发人员决定如何调用库中提供的方法（辅助） 好莱坞原则：Don’t call

简介 easyUI：是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。 中文官网 http://www.jeasyui.net/ 下载和安装 下载地址： http://www.jeasyui.net/download/ 解压后： 在项目中使用easyUI将相关内容拷贝到项目的根目录：先创建一个easyui文件夹，在创建一个js文件夹在easyui下面创建两个文件夹js和themes。 新建一个html文件，引入以下内容: 布局 边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法： north 区域可以用来显示网站的标语。 south 区域可以用来显示版权以及一些说明。 west 区域可以用来显示导航菜单。 east 区域可以用来显示一些推广的项目。 center 区域可以用来显示主要的内容。 < body class = "easyui-layout" > < div data-options = "region:'north