前端组件

vue router 路由 什么是前端渲染，什么是后端渲染 后端路由 由后端服务器html+css+java动态绑定数据并渲染好一个页面，直接发送到前端。 优点是有利于seo优化，缺点html和数据逻辑混在一起，难以维护 前后端分离 随着Ajax出现，后端只负责数据，前端去静态服务器请求html+css+js，然后调用api接口再进行数据处理进行渲染 前端路由SPA阶段 在前后端分离的基础上加了一层前端路由。 前端去静态服务器请求html+css+js（全部资源），资源分成多个组件，点击一个url显示一个组件，页面进行不整体刷新。 前端路由的作用就是管理url和对应组件的映射关系 前端路由规则 URL的hash URL的hash也就是锚点(#), 本质上是改变window.location的href属性. location.hash = 'aaa' HTML5中history模式： 1. pushState 把url push进去，类似栈结构，遵循先入后出 history.pushState({},'','home') 2. back 返回前一页面 history.back() 3. forward 前进下一页面 history.forward() 4. replaceState 替换url，不会保留历史记录 history.replaceState({},'','home') 5

为什么会有 Vuex 这个东西 ？ 现代前端框架主要解决的是 事件 -> 状态 -> UI 将传统前端在两个过程的代码剥离出来，变得更加容易维护； vue的声明式渲染，解决了 状态 和 UI 的同步问题，从而使我们不需要由于状态发生改变去写大量的命令式改变 dom 的代码。 而类似于 vuex 这类状态管理的库，则解决了 事件 -> 状态 这个过程的维护问题。这类库所做的事情就是管理从 事件源映射到状态变化 这个过程(将这个映射过程 从视图组件中剥离出来 ，组织好这一部分的代码，在组件外部进行状态的管理) 具体表现就是一个全局的数据中心 store 配置，每个组件进行更新的时候就通知数据中心，数据中心改变后，再去触发每个调用它的组件进行更新(这种更新是响应式的)；几个核心概念就是 mutations 里的方法可以直接 mutate store 中的状态，并且 mutation 过程必须同步的，需要通过 commit 去触发；而 actions 则允许异步的操作，通过 commit 去触发 mutation ，达到间接修改 store 的目的， action 本身需要通过 disptch 去触发。 Vuex与全局对象的区别 其实， vuex 与全局对象有一定的共同之处，那就是状态会被全局共享，无论是嵌套多少组件… 每一个 Vuex 应用的核心就是 store（仓库）。“store

Bootstrap是 推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态 CSS 语言Less写成。 Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。 Bootstrap英文参考手册，参考地址: http://getbootstrap.com/ Bootstrap中文参考手册，参考地址: http://v3.bootcss.com/ 主题： http://bootswatch.com/ 来源： https://www.cnblogs.com/liangxiaojie/p/3483907.html

（一）Bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。 官方网址是： http://twitter.github.io/bootstrap/ 最新文件下载： http://twitter.github.io/bootstrap/assets/bootstrap.zip ，下载下来的压缩包中，有一个doc目录，事实上就是官方网站的大部分页面了，是一个很好的范例。 后面的文章大部分内容是从官方网站翻译或者网络搜索而来

解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏） 进入2019年，大前端技术生态似乎进入到了一个相对稳定的环境，React在2013年发布至今已经6年时间了，Vue 1.0在2015年发布，至今也有4年时间了。 整个业界在前端框架不断迭代中，也寻找到了许多突破方向，例如跨平台中的RN、Flutter，服务端GraphQL、Serverless，前端和客户端的融合越来越紧密，前端在Node和Electron的加持下，也扩展了自己的版图到服务端和桌面。 同时，随着前端开发越来越复杂，整个前端研发也经历了人工化->工具化->工程化->智能化的演变。目前各个大厂在工程化实践不断迭代，出现了许多Low/No Code等前端智能化解决方案，工程化实践也深入到研发的各个环节，不断提升前端研发的标准化能力。而且，随着机器学习的加入，各类UI2Code的解决方案也开始出现，前端研发进入了一个完全不同的时代。 随着端上能力的不断增强，现在在端上做的事情越来越多。首先，数据可视化方向，各类图表、地图、3D等等数据可视化的尝试变得越来越多。其次，伴随着人工智能的加持，在端上的人工智能应用也变的普及，减少了服务端的交互，提高了系统的实时响应能力。最后，随着Webassembly等技术的应用，有可能将前端运行能力再提升一个档次，可以进行更为复杂的端上计算。 为了了解当前前端的发展趋势

雅虎给出了 优化网站加载速度 的34条法则（包括Yslow规则22条） 详细说明，下载转发 ponytail 的译文（来自帕兰映像）。 1.Minimize HTTP Requests 减少HTTP请求 图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。 2.Use a Content Delivery Network 利用CDN技术 CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。 3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存 浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。 4.Gzip Components Gzip压缩 Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力

Django组件：分页器 目录结构： urls.py from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path(r"index/",views.index) ] models.py from django.db import models # Create your models here. class Book(models.Model): title = models.CharField(max_length=32) price = models.DecimalField(decimal_places=2,max_digits=8) views.py from django.shortcuts import render # Create your views here. from app01.models import Book # 导入分页器 from django.core.paginator import Paginator,EmptyPage def index(request): """ # 批量插入数据 # for i in range(100)

vue项目的创建 方法1: cmd中执行 vue ui vue会创建一个socket,方便快捷 方法2: 命令行建立 vue create v-proj //创建项目名为v-proj的项目文件 >>>default (bable,eslint) //默认 manually select features //自定义 (*)bable //把es6语法解析为es5语法(防止沙雕浏览器无法解析es6) TypeScript //js编程还是ts编程 Progressive Web App(PWA) Support //前端优化组件,需要大量配置 (*)Router //前台路由 (*)Vuex //仓库 ,相当于全局的单例,每次页面刷新,重新加载仓库,为移动端准备,因为移动端不刷新 CSS Pre-processors //css预编译器 less sass两个语法来进行css逻辑编译时,先将他们预编译为css语法 Linter/Formatter //格式化代码,只有按照这个标准书写才不会报错 Unit Testing // 测试 E2E Testing // 测试 >>> Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y /

字符串补充 """ 1）双引号： "前缀" + 变量 + "后缀" 2）单引号： '前缀' + 变量 + '后缀' 3）反引号： `前缀${变量}后缀` 注：在反引号中可以用 ${} 来包裹变量，实现字符串拼接 """ 实例成员：计算属性 """ /** 计算属性： * 1）其实就是vue中的方法属性，方法名可以作为属性来使用，属性值为方法的返回值 * 2）在computed中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出写逻辑的地方 * 3）方法属性，自带监听机制，在方法属性中出现的变量，都会被监听，一旦有任何被监听的变量值发生更新， * 方法属性都会被调用更新方法属性的值 * 4）方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会被调用一次 * 案例：计算器 * 方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算 */ """ <div id="app"> <!-- type="number"表示只能写数字 --> <input type="number" v-model="num1" max="100" min="0"> + <input type="number" v-model="num2" max="100" min="0"> = <button>{{ sum }}</button> </div>

目录 一、Vue简介 1、数据驱动视图 2、MVVM架构 3、快速体验 二、Vue指令 2.0 属性指令事件指令简写 2.1 v-once 指令 只渲染一次 2.2 v-if，v-else-if,v-else 条件指令 2.3 v-show 和 v-if 的隐藏指令区别 2.4 v-cloak 斗篷指令 2.5 v-bind 属性指令 2.6 v-on 事件指令 2.7 v-model 表单指令 2.8 v-for 循环指令 2.9 v-text 文本指令 2.10 v-html 指令 2.11 样式绑定 2.12 key 绑定 三、补充内容 splice增删改万能方法 1、 数组的7个方法 2、数组和对象的遍历 3、改变数组或对象内容的方法 4、vue中的属性 5、前台数据库 四、鼠标事件 五、键盘事件 六、JS对象补充 一、Vue简介 什么是数据 1、数据驱动视图 Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。 Vue.js是一款轻量级的、以数据驱动构建web界面的前端JS框架 ，它在架构设计上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心， 它是一个Vue的实例，而这个实例又作用于页面上的某个HTML元素 。