【极客时间】玩转Git三剑客笔记 第一章 Git基础1.1 课程综述版本变更管理 VCS的演化目录拷贝--> 集中式VCS（SVN） --> 分布式VCS（Git）Git优点：开源、性能好、存储优、方面备份、易于制定工作流程、支持离线操作1.2 安装Git安装地址：Git官网1.3 使用Git之前需要做的最小配置 最小配置 git config --global user.name 'your_name' git config --global user.email 'your_email@domain.com' config的三个作用域 git config --local 针对某个仓库（可缺省） git config --global 当前所有用的仓库 git config --system 系统所有登录用户 显示config的配置 git config --list --local 1.4 创建第一个仓库并配置local用户信息两种方式1、把已有的项目代码纳入Git管理 cd 项目代码所在的文件夹 git init 2、新建的项目直接用Git管理 cd 某个文件夹 git init your_project #会在当前路径下创建和项目名称同名的文件夹 cd your_project1.5 通过几次commit来认识工作区和暂存区 工作区 ==> 暂存区 ==> HEAD ==> 远端 add commit push/pull(fetch+merge) git add -u：添加文件的修改，文件的删除（只操作跟踪过的文件） git add . ：添加文件的修改，文件的新建 git add -A：添加文件的修改，文件的删除，文件的新建（全部文件） 工作中一般是用到 git add . 或者 git add -A（-all） 1.6 给文件重命名的简便方法 文件重命名： git mv oldName newName 大小写问题： git config core.ignorecase true1.7 通过git log查看版本演变历史ps： 对于git命令参数 如果单字母用-,如果单词使用-- git log --all 查看所有分支的历史 git log --all --graph 查看图形化的 log 地址 git log --oneline 查看单行的简洁历史 git log --oneline -n4 查看最近的四条简洁历史。 git log --oneline --all -n4 --graph 查看所有分支最近 4 条单行的图形化历史。 git help --web log 跳转到git log 的帮助文档网页1.8 gitk:通过图形界面工具来查看版本历史个人日常工作使用souceTree更多1.9 探秘.git目录 .git/ ├── HEAD # 指向当前分支的引用（如 `refs/heads/main`） ├── config # 仓库的本地配置（用户名、远程仓库等） ├── objects/ # 存储所有Git对象（提交、树、文件内容） │ ├── pack/ # 压缩后的对象包（优化存储） │ └── ... # 松散对象（未被压缩的单个对象） ├── refs/ # 存储引用（分支、标签、远程跟踪分支） │ ├── heads/ # 本地分支（如 `main`, `dev`） │ ├── tags/ # 标签（如 `v1.0.0`） │ └── remotes/ # 远程跟踪分支（如 `origin/main`） ├── index # 暂存区（Staging Area）的二进制表示 ├── hooks/ # 客户端/服务端钩子脚本（示例，默认未激活） ├── logs/ # 记录所有分支的提交历史（用于 `git reflog`） └── info/ # 全局排除文件配置（如 `.git/info/exclude`） git cat-file git cat-file -t 查看git 对象的类型 git cat-file -p 查看git 对象的内容 git cat-file -s 查看git 对象的大小1.10 commit、tree和blob三个对象之间的关系blob ==> tree ==> commit 享元模式：一种结构型设计模式，旨在通过共享对象来减少内存使用和提高性能，特别适用于存在大量相似对象的情况。享元模式的核心思想是将对象的内在状态（可共享的部分）与外在状态（不可共享的部分）分离，从而减少对象的数量。 1.11 小练习：数一数tree的个数可以简单的理解为commit是根节点，tree是子节点，blob是叶子节点，其中blob是可以共用的。1.12 分离头指针情况下的注意事项直接git checkout commitId会出现分离头指针的情况，这个时候提交的代码没有与分支关联起来，在切换分支时容易丢失代码（恢复比较麻烦）。应用场景：做测试时，可以用这个方法，不需要则直接丢弃，需要的话则创建新分支 git branch <新分支的名称> commitId1.13 进一步理解HEAD和branchHEAD总结：1、HEAD当和分支挂钩的时候，指向的是该分支的最新提交2、HEAD不和分支挂钩，而是指向某个commit,此时处于分离头指针的状态3、切换分支HEAD的状态:切换分支时，HEAD指向的时branch的最新提交4、HEAD指向branch的时候，指代的是某个具体的commit5、HEAD 代表当前分支最新的提交，HEAD^ 上一个commit，HEAD ^^：上上个commit，HEAD~N:前n个commit第二章 独自使用Git时的场景2.1 怎么删除不需要的分支 git branch -d branch_name 在删除分支前Git会判断在该分支上开发的功能是否被merge的其它分支 git branch -D branch_name2.2 怎么修改最新的commit的message git commit --amend 不只是修改最新commit的message 而是会创建一个将暂存区的内容生成一个commit，再将当前最新的commit替换成新生成的那一个 Linux下 git默认的文本编辑器是nano，很多快捷键不熟悉，执行下面的命令可以将git的文本编辑器改为我们熟悉的vim git config --global core.editor vim2.3 怎么修改老旧commit的message 变基操作 git rebase -i <commit> git rebase -i --root 修改根节点 -r,reword <commit> 使用提交，同时修改提交信息2.4 怎样把连续的多个commit整理成1个 git rebase -i <commit> -s,squash <commit> 使用提交，同时合并到之前的提交中2.5 怎样把间隔的几个commit整理成1个 git rebase -i <commit> -s,squash <commit> 使用提交，其他行加上-s commit id2.6 怎么比较暂存区和HEAD所含文件的差异 git diff --cached2.7 怎么比较工作区和暂存区所含文件的差异 git diff ps: git diff HEAD # 工作区 <===> HEAD git diff # 工作区 <===> 缓存区 git diff --cached # 缓存区 <===> HEAD2.8 如何让暂存区恢复和HEAD的一样 git reset HEAD git reset 有三个参数 --soft 只修改HEAD，暂存区、工作区不变 --hard HEAD、暂存区、工作区均修改 --mixed 默认参数，修改HEAD和暂存区，但工作区保持不变2.9 如何让工作区的文件恢复和暂存区一样 git checkout/git restore -- fileName2.10 怎样取消暂存区部分文件的更改 git reset HEAD -- fileName2.11 消除最近的几次提交 方法一： git rebase -i <commit> 改成 d 方法二： git reset--hard hash值 2.12 看看不同提交的指定文件的差异 git diff commit-id1 commit-id2 path-to-filename2.13 正确删除文件的方法 git rm file name2.14 开发中临时加塞了紧急任务怎么处理 git stash 把当前工作区的内容放入暂存区 git stash pop 把暂存区的内容恢复到工作区，且删除 git stash apply 把暂存区的内容恢复到工作区，且保留2.15 如何指定不需要Git管理的文件 通过.gitignore设置git不用管理文件或文件夹2.16 如何将Git仓库备份到本地 git clone xxx.git第三章 Git与GitHub的简单同步3.1 注册一个GitHub账号已注册 https://github.com/augenstern3263.2 配置公私钥https://github.com/settings/keys3.3 在GitHub上创建个人仓库无3.4 把本地仓库同步到GitHub无第四章 Git与多人单分支集成协作时的常见场景4.1 不同人修改了不同文件如何处理 不受影响，直接提交即可 git add git commit git pull(git fetch+merge) git push4.2 不同人修改了同文件的不同区域如何处理不会产生冲突，但提交前一样git pull拉一下远端代码，保持与远端一致4.3 不同人修改了同文件的同一区域如何处理会产生冲突，手动解决冲突后再进行提交操作4.4 同时变更了文件名和文件内容如何处理当多人修改同一文件的文件名和内容时，Git 会检测到冲突。处理步骤如下：拉取最新代码：先拉取远程仓库的最新代码git pull origin branch-name解决冲突：Git 会提示冲突，手动解决冲突后，将文件添加到暂存区并提交# 解决冲突后 git add <file> git commit -m "Resolved conflict in <file>"推送更改：将解决后的代码推送到远程仓库git push origin branch-name 4.5 把同一文件改成了不同的文件名如何处理拉取最新代码：先拉取远程仓库的最新代码git pull origin branch-name检查文件差异：检查两个文件的内容，决定保留哪个或合并内容。git diff fileA.txt fileB.txt解决冲突：Git 会提示冲突，手动解决冲突后，将文件添加到暂存区并提交假设保留文件A git add fileA.txt git rm fileB.txt推送更改：将解决后的代码推送到远程仓库git push origin branch-name 第五章 Git集成使用禁忌5.1 禁止向集成分支执行push -f操作 git push -f 强制同步远端和本地相同，导致远端修改的内容丢失 可以使用 git reflog 命令查找历史，然后利用 git reset --hard HAED@{n} 的方式恢复。 5.2 禁止向集成分支执行变更历史的操作个人向远端执行变更历史的操作，会导致抹除一些历史提交信息，影响该分支下其他开发者的

CTF竞赛学习（入门） 起因本来凑数参加江苏金融监管局的金融业网络安全竞赛，但莫名其妙就进了决赛，可我们三个人纯门外汉，啥也不懂，公司领导为了不让决赛成绩太难看，请到了外面的某安全公司给我们培训CTF，当然一天速成，学到的东西估计也很入门偏概念，这里简单做个记录。CTF竞赛指南CTF简介CTF（Capture The Flag，夺旗赛）是一种流行于网络安全技术人员之间的一种信息安全技术竞赛。其前身是传统黑客之间网络技术比拼的游戏，以代替之前黑客们通过互相发起真实攻击进行技术比拼的方式。起源于1996年第四届DEFCON。现在已成为全球范围网络安全圈流行的竞赛形式。通常CTF分为三种赛制：解题赛（Jeopardy）、攻防赛（Attack-Defence）和混合赛竞赛模式基本分为解题模式、攻防模式和混合模式。大多题目的内容基本包括web安全，密码学、逆向、二进制安全编程类题目等国内外有很多CTF比赛。解题赛是线上赛通常采取的赛制，题目通常分为多个类型，如Web，Forensic（取证），Crypto（密码学），Binary（二进制）等。团队或个人可以通过解题获得一串具有一定格式的字符串，也就是flag。将flag提交到竞赛平台可以获得积分。题目的难度越大，分值就越高。当比赛结束后，得分最高者胜出。攻防赛是另一种有趣的赛制，常见于线下决赛。攻防赛中，每个队伍都会被分配一台主机或虚拟机，称为gamebox，队员可以通过网络连接到gamebox。而所有队伍的gamebox通过内网连接在一起。每个队伍的gamebox上都运行着多个相同的服务。参赛队伍需要挖掘服务的漏洞，然后攻击其他队伍的服务来获取flag，并提交给计分服务器来获取积分。与此同时，参赛队伍还需要修补自身服务中的漏洞来防止丢分。攻防赛不仅考验了参赛选手的技术水平，还考验了参赛者的体力，因为通常参赛者需要连续混合赛可能采取解题赛和攻防赛的混合模式，也可能是其他形式。WebOWASP基于web渗透测试选用到的手段，OWASP(开放式Web应用程序安全项目)所给出的web危险Top10基本上涵盖 了大部分，其中包含注入漏洞、中断身份认证、敏感数据泄露、xxe、中断访问控制、安全配置错误、xss、反 序列化、使用含有已知漏洞的组件、不足的记录和监控漏洞。注入漏洞失效的身份认证敏感数据泄露XXE失效的访问控制安全配置错误XXS不安全的反序列化使用含有已知漏洞的组件不足的日志记录和监控CSRFCSRF(Cross Site Request Forgery) 是指跨站请求伪造，是一种挟制终端用户在当前已登录的Web应用程 序上执行非本意的操作的攻击方法。攻击者只要借助少许的社会工程诡计，例如通过电子邮件或者是聊天软件发送的链接，受害者一旦点击链接，攻击者就能迫使受害者的浏览器在已经登录过的网站上去执行特定操作。CSRF攻击原理用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发 送请求到网站A；用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站 A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请 求，导致来自网站B的恶意代码被执行。SSRFSSRF(Server-Side Request Forgery: 服务器端请求伪造)：是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下，SSRF攻击的目标是外网无法访问的内部系统。正是因为它是由服务端发起的，所以它能够请求与它相连而与外网隔离的内部系统。危险函数：fsockopen()file_get_contents()curl_exec()信息泄露信息泄露漏洞是由于web服务器没有正确处理一些特殊请求或者系统管理员对于应用设置及操作不规范，泄露服务器或者应用的敏感信息，如用户名，密码、源代码、服务器信息、配置信息、物理路径信息利用等。 该类信息的泄露容易造成恶意人员的利用，为达到进一步的攻击系统打下基础。目录遍历目录遍历漏洞是攻击者向web服务器发送请求，通过在url中或者在有特殊意义的目录中附加”../“、或者附 加”../“的一些变形（如“..”或“..//”甚至其编码），或类似的跨父目录字符串，完成目录跳转，读取操 作系统各个目录下的敏感文件。导致攻击者能够访问未授权的目录，以及能够在未授权的web服务器的根目录外执行命令文件上传文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行。这里上传的文件可以是木马，病毒， 恶意脚本或者WebShell等。这种攻击方式是最为直接和有效的，部分文件上传漏洞的利用技术门槛非常的低，对于攻击者来说很容易实施。任意文件查看与下载一些网站由于业务需求，往往需要提供文件查看或文件下载功能，但若对用户查看或下载的文件不做限制， 则恶意用户就能够查看或下载任意敏感文件，这就是文件查看与下载漏洞。越权访问顾名思义，这类漏洞是指应用在检查授权（Authorization）时存在纰漏，使得攻击者可以利用一些方式绕 过权限检查，访问或者操作到原本无权访问的代码或内容。水平越权：获取水平层级的权限，比如其他用户的权限信息垂直越权：获取垂直层级的权限，比如说普通用户获取admin权限命令执行没有针对代码中可执行的特殊函数入口做过滤，导致客户端可以提交恶意构造语句提交，并交由服务器端执 行。命令注入攻击中WEB服务器没有过滤类似system(),eval()，exec()等函数是该漏洞攻击成功的最主要原因。Crypto之前的密码学笔记CTF-CryptoMisc信息隐写信息隐写技术（隐写术），也称为信息伪装技术，是一门近年来蓬勃发展，已逐渐的在信息安全领域受到关注的学科。它是将某一机密信息秘密隐藏于另一公开的信息（载体）中，然后通过公开信道传输来传递机密信息。第三方难以从公开信息中判断机密信息是否存在，实现隐秘通信或隐蔽标识，保证机密信息的安全与唯一。文件隐写格式类型文件头标识文件尾标识jpeg/jpgFFD8FFD9gif47 49 46 38 39(37) 61 png89 50 4E 47 0D 0A 1A 0A00 00 00 00 49 45 4E 44 AE 42 60 82bmp42 4D（B M） tiff4D 4D 00 2A / 49 49 2A 00 压缩包破解zip/rar爆破Windows下的神器 ARCHPR：暴力枚举，跑字典，明文攻击明文攻击是一种较为高效的攻击手段，大致原理是当你不知道一个zip的密码，但是你有zip中的一个已知文件（文件大小要大于12Byte）或者已经通过其他手段知道zip加密文件中的某些内容时，因为同一个zip压缩包里的所有文件都是使用同一个加密密钥来加密的，所以可以用已知文件来找加密密钥，利用密钥来解锁其他加密文件。CRC32碰撞CRC 本身是「冗余校验码」的意思，CRC32则表示会产生一个32bit(8位十六进制数)的校验值。由于CRC32产生校验值时源数据块的每一个 bit (位)有一位发生了变化，也会得到不同的CRC32值。CRC32校验码出现在很多文件中比如png文件，同样zip中也有CRC32 校验码。值得注意的是zip中的CRC32是未加密文件的校验值。这也就导致了基于CRC32的攻击手法。文件内内容很少(一般比赛中大多为4字节左右)加密的密码很长我们不去爆破压缩包的密码，而是直接去直接爆破源文件的内容(一般都是可见的字符串)，从而获取有效信息zip伪加密其实不是真的加密，只是修改了加密位数据包分析数据包分析，通常也被称为数据包嗅探或协议分析，指的是捕获和解析网络上在线传输数据的过程。数据包分析过程通常由数据包嗅探器来执行。而数据包嗅探器则是一种用来在网络媒介上捕获原始传输数据的工具。目前市面上有着多种类型的数据包嗅探器，包括免费的和商业的。每个软件的设计目标都会有一些差异。流行的数据包分析软件包括tcpdump、Wireshark等。Reverse逆向分析主要是将二进制机器码进行反汇编得到汇编代码，在汇编代码的基础上，进行功能分析。经过反编译生成的汇编代码中缺失了源代码中的符号、数据结构等信息，因此需要尽可能地通过逆向分析还原以上信息，以便分析程序原有逻辑和功能。逆向分析主要包括静态和动态分析。Pwn利用程序中的漏洞改变程序本来的执行流程Pwn在黑客俚语中代表着攻破，获得权限，由"own"这个词引申而来。在CTF比赛中它代表着溢出类的题目，常见的类型有整数溢出、栈溢出、堆溢出等。主要考察参赛选手对漏洞的利用能力。所需知识：C、OD+IDA、数据结构、操作系统。AWD对抗模式：AWD（attack with defence）攻防兼备模式，AWD模式是一个非常有意思的模式，你需要在一场比赛里扮演攻击方和防守方，攻击成功得分，失守也会扣除相应的分数。在比赛中，评分的关键点是flag，通过漏洞攻击敌方得到flag，可以获取相应的分数；反之，失守flag会被扣除相应的分数。从而模拟现实的网络攻击防御，以此提高选手的网络攻防能力。常见加固方法信息收集密码修改网站备份数据库备份后门查杀可疑服务和端口关闭源码审计漏洞验证漏洞修复文件监控WAF部署

大数据技术入门学习（简单概念） 前言最近公司上了数据中台（实际就是阿里的DataWorks私有化部署），给我们做了几次培训，这里把一些简单的概念列一下，对数据引擎有个初步的认识，重要的实操部分因为涉及到公司平台敏感信息，故不做截图演示。采用阿里的DataWorks大数据开发治理平台，基于MaxCompute/EMR/MC-Hologres等大数据计算引擎，提供专业高效、安全可靠的一站式大数据开发与治理平台，实现数据集成、数据开发、数据治理等一系列功能。离线数仓-MaxCompute一、定义MaxCompute（ODPS）是适用于数据分析场景的企业级SaaS（Software as a Service）模式云数据仓库，致力于批量处理结构化数据的存储和计算，提供海量数据仓库的解决方案及分析建模服务。二、优势集成性：支持跨平台数据整合及多组件兼容计算方面：支持大量、复杂批处理存储方面：海量数据存储（PB-EB）,支持弹性扩容三、限制不支持OLTP联机事务处理不支持交互式查询，任务执行延迟较大不持索引，Delete、Update操作受限四、与常见数据库对比MaxCompute技术架构定位与使用场景：MaxCompute，主要服务于批量结构化数据的存储和计算，应用于海量数据仓库建设，不支持事务； MySQL、Oracle等数据库，主打多维分析场景，支持事务；MaxCompute是列式存储，不支持Delete、Update等操作；Hologres是行式、列式存储，Oracle、MySQL是行式存储，可 以对单条数据进行删除、修改等操作；MaxCompute不支持索引、主键约束，无自增字段；Hologres、Oracle、MySQL可以设置约束，以及自增字段；MaxCompute是基于MapReduce进行数据的查询，速度相较于Hologres、Oracle、MySQL来说比较慢。MaxCompute在SQL语法上学习成本均比较低，SQL操作类似于Oracle、MySQL数据库。MaxCompute中的内建函数可兼容Hologres、Oracle、MySQL中的函数，部分存在写法的差异。如时间戳字段的月份、分 钟、小时函数一致，但在取系统日期的时候，MaxCompute可用getdate、 current_timestamp，Hologres中支持 current_timestamp，oracle中支持systimestamp、current_timestamp，MySQL中支持now等一站式实时数仓引擎-Hologres一、定义支持海量数据实时写入、实时更新。实时分析，支持PB级数据多维分析（OLAP）与即席分析（Ad Hoc Analysis是一种数据分析方法，它允许用户根据自己的特定需求和问题，即时地对数据进行查询、分析和探索。与预定义的报告或仪表板不同，即席分析提供了更大的灵活性，使用户能够深入挖掘数据，发现新的见解，并回答那些在分析开始时可能未预料到的问题），支持低延迟的在线数据服务（Serving）,与MaxCompute、Flink、DataWorks深度融合，提供在线一体化全栈数仓解决方案。二、优势：支持准实时快速数据写入及更新；支持OLAP多维分析查询；存算分离架构，支持动态按需扩容三、限制：稳定性上：目前官称99.9%，不如Oracle、OB等数据库稳定；功能上：OLAP分析型数据引擎，无事务保障机制，无触发器机制、无字段级联约束；应用场景上：主打多维分析场景，不建议使用在联机事务处理场景， 查询响应有一定延迟大数据集成调度平台-DataWorks一、定义基于MaxCompute、Hologres、EMR、AnalyticDB、CDP等大数据引擎，为数据仓库、湖仓一体等解决方案提供统一的全链路大数据集成调度平台。二、优势集成性方面：一站式的数据工厂，集数据开发、分析、任务发布、 调度以及运维管理于一体监控管理方面：（1) 完备的数据质量监控体系； （2) 智能的监控告警； （3) 多租户的数据安全管理机制三、限制：调度时效性方面：涉及DataWorks槽位资源及MC资源队列排队 两级调度，对高频调度支持有限，一般建议小时级别以上调度频率数据节点依赖等原因，生产发布手工配置依赖四、模块计算存储引擎模块：MaxCompute、Hologress、OSS数据集成模块：组件全量/增量同步、实时同步数据开发模块：1）离线/实时任务：集成多种组件，支持一站式任务开发； 2）一站式的调度、监控、运维和告警

CTF-Crypto 密码学（Cryptography）一般可分为古典密码学和现代密码学。一般来说，密码设计者的基本想法是确保密码框架的。保密性完整性可用性不可否认性其中，前三者又称为 CIA 三元组。古典加密古典密码是指在现代密码学发展之前使用的一类加密方法。它们通常基于简单的数学原理和替换、重排、置换等操作来对明文进行加密。置换学习视频 杨兰娟：古典密码-置换密码把明文中的字母重新排列，字母本身不变，但其位置改变了，这样编成的密码称为置换密码。栅栏技术：按照对角线顺序写出明文，并以行的顺序读出明文：meet after the toga party 栅栏数：2 m e a t r h t g p r y e t f e t e o a a t 密文： MEATRHTGPRYETFETEOAAT列置换：将明文按照行填写在一个矩形中，密文则是以预定的顺序按列读取生成明文：shesellsseashellsbytheseashore 密钥：351642 矩阵 3 5 1 6 4 2 s h e s e l l s s e a s h e l l s b y t h e s e a s h o r e 按照密钥顺序读取列，则为ESLHH LSBEE SLHYA EASSR HSETS SELEO周期置换：将明文串P按照固定长度m分组，然后对每组中的子串按照1,2,...m的某个置换重新排列得到密文。加密密钥（置换）K= 1 2 3 4 5 6 3 5 1 6 4 2 明文：shesellsseashellsbytheseashore 分块：shesel lsseas hellsb ythese ashore 根据函数f重新排列 以shesel为例 s->3 h—>5 e->1 s->6 e->4 l->2 最终顺序为ELSEHS,其他块也按照这个方法重新排列多次列置换：将列置换得到的密文再进行1次或多次列置换，方法与列置换一致替换学习视频 杨兰娟：古典密码-替换密码替换密码是将明文字符替换成其他字母、数字或符号。凯撒密码：将字母向后偏移3位，如果是移13位则为ROT13加密a->Db->E...x->Ay->Bz->C明文：attack 密文：DWWDFN维吉尼亚密码：基于串的替换密码，密钥是由多于一个的字符串所组成的串Ci = (Pi+ki mod m) mod 26明文：T H E B U T C H E R 密钥：B I G B I G B I G B 序号： 19 7 4 1 20 19 2 7 4 17 1 8 6 1 8 6 1 8 6 1 密文：UPKCCZDPKS弗纳姆密码：假定消息是长为n的比特串，密钥也是长为n的比特串m=b1b2...bn∈{0,1}nk =k1k2...kn∈u{0,1}n加密： Ci = Pi⨁Ki解密： Pi = Ci⨁KiPlayfair密码：1854 年由英国人查尔斯·惠斯通发明，基本算法如下：选取一串英文字母，除去重复出现的字母，将剩下的字母逐个逐个加入 5 × 5 的矩阵内，剩下的空间由未加入的英文字母依 a-z 的顺序加入。注意，将 q 去除，或将 i 和 j 视作同一字。将要加密的明文分成两个一组。若组内的字母相同，将 X（或 Q）加到该组的第一个字母后，重新分组。若剩下一个字，也加入 X 。在每组中，找出两个字母在矩阵中的地方。若两个字母不同行也不同列，在矩阵中找出另外两个字母（第一个字母对应行优先使这四个字母成为一个长方形的四个角。若两个字母同行，取这两个字母右方的字母（若字母在最右方则取最左方的字母）若两个字母同列，取这两个字母下方的字母（若字母在最下方则取最上方的字母）。新找到的两个字母就是原本的两个字母加密的结果。密钥：telegram 矩阵： T E L G R A M B C D F H I/J K N O P Q S U V W X Y Z 明文：NEXT TIME 分组：NE XT TI ME 画矩阵： NE--> HR XT--> VL TI--> LF ME--> HM希尔密码：希尔密码（Hill）使用每个字母在字母表中的顺序作为其对应的数字，即A=0，B=1，C=2 等，然后将明文转化为 n 维向量，跟一个 n × n 的矩阵相乘，再将得出的结果模 26。注意用作加密的矩阵（即密匙）在 $\mathbb{Z}^n_{26}$（我的markdown不支持latex） 必须是可逆的，否则就不可能解码。只有矩阵的行列式和26互质，才是可逆的。明文：ACT 矩阵： 0 2 19 密钥： 6 24 1 13 16 10 20 17 15 计算行列式发现不为0，可逆 明文矩阵乘密钥矩阵mod26得到密文矩阵 15 14 7 所以对应的密文为POH还有其他类型密码，这里简单列举一下，就不详细介绍了。培根密码：用5位二进制表示，A代表0，B代表1曲路密码：是一种换位密码，需要事先双方约定密钥（也就是曲路路径）列移位加密：一种比较简单，易于实现的换位密码，通过一个简单的规则将明文打乱混合成密文01248密码：该密码又称为云影密码，使用 0，1，2，4，8 这几个数字，其中 0 用来表示间隔，其他数字以加法可以表示出 如：28=10，124=7，18=9，再用 1->26 表示 A->Z。可以看出该密码有以下特点：只有 0，1，2，4，8JSFuck：JSFuck 可以只用 6 个字符 []()!+ 来编写 JavaScript 程序。[][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()BrainFuck：是一种极小化的计算机语言++++++++++[>+++++++>++++++++++>+++>+<<<<-] >++.>+.+++++++..+++.>++.<<+++++++++++++++. >.+++.------.--------.>+.>.猪圈密码：一种以格子为基础的简单替代式密码舞动的小人密码：这种密码出自于福尔摩斯探案集。每一个跳舞的小人实际上对应的是英文二十六个字母中的一个，而小人手中的旗子则表明该字母是单词的最后一个字母，如果仅仅是一个单词而不是句子，或者是句子中最后的一个单词，则单词中最后一个字母不必举旗。键盘密码：这种有很多种，举一个最简单的，观察自己的电脑键盘，给出密文ESXF，得到明文D，因为ESXF围住了D现代加密对称加密DES：DES全称为Data Encryption Standard，是典型的块加密，其基本信息如下：1、使用64位密钥中的56位，剩余的8位要么丢弃，要么作为奇偶校验位2、输入64位3、输出64位4、明文经过16轮迭代得到密文AES：AES全称为Advanced Encryption Standard，是典型的块加密，被设计来取代DES。其基本信息如下：分组长度和密钥长度均可变，可以有以下几种数值：128比特192比特256比特经过N轮加密后得到密文，轮数依赖于密钥长度：128比特密钥对应10轮192比特密钥对应12轮256比特密钥对应14轮非对称加密RSA：RSA算法的具体描述如下：1、选择两个大素数p和q，计算N=p*q。2、计算φ(N)=(p-1)*(q-1)。3、选择一个整数e，1<e<φ(N)，且e与φ(N)互质。4、计算d，使得e*d=1 mod φ(N)。5、将N和e作为公钥，N和d作为私钥。加密数据时，将明文转换为整数M，计算C=M^e mod N。解密数据时，将密文转换为整数C，计算M=C^d mod N。哈希函数MD5：MD5的输入输出如下： 输入： 任意长的消息，512比特长的分组。 输出： 160比特的消息摘要。SHA1：SHA1的输入输出如下： 输入： 任意长的消息，分为 512 比特长的分组。首先在消息右侧补比特 1，然后再补若干个比特 0，直到消息的比特长度满足对 512 取模后余数是 448，使其与 448 模 512 同余。输出： 160 比特的消息摘要。

从零开始的Vue学习 从零开始的Vue学习前言​ 这个笔记参考了官方文档和多篇文章，虽然是自己一个字一个字手打的，但还是算是转载，并非原创。分享这个笔记的作用一是监督自己，二是希望帮助到和我一样在学习vue的小伙伴。虽说是Vue学习，其实也包含了一些别的前端的东西。​ 同时，我自己照着教程写的程序源码也会在下面分享出来。​ 静心学习，无限进步！​ 学习笔记含代码：https://github.com/Xiaohufight/vue-learning​ 其他在做的vue练手项目：​ https://github.com/Xiaohufight/my-vue-template​ https://github.com/Xiaohufight/my-admin-template学习日志2021-5-06今天无聊翻看github，发现关注的一位大佬上传了自己的prettier配置文件，我就很好奇这个prettier是个啥东东。看了一些文章博客，了解到prettier是一个 Opinionated 的代码格式化工具，具体可以看这一篇文章Prettier看这一篇就行了。我之前自己写的代码是不用ESLint的，因为觉得坑太多了，不如不用。但是，今天也打算之后的项目还是要用用prettier和ESLint的，团队开发，代码风格和规范要做好。2021-4-28~29因为毕设的事情，距离上次学习Vue已经过去十几天了，这俩天主要学习了如何实现侧边导航栏和面包屑，导航栏参考了Vue 实现左边导航栏且右边显示具体内容（element-ui），面包屑和标签切换参考了 作者"@雨点的名字"的 Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能顺便放一下他的github源码，创作不易，欢迎star https://github.com/yudiandemingzi/mall-manage-system2021-4-15今天主要在本地运行了这个项目vue-admin-webapp(就前面正确姿势开发vue后台管理系统中最终实现的项目)，由于作者并没有提供接口，所以在本地运行项目时顺便学习了如何写接口（easy-mock)，掌握了一些写法，但我没有用过mock，如果是用过mock的话，上手easy-mock应该会很容易。不管怎么样，今天收获也是挺多的。2021-4-13还在看vue实现后台管理系统，学习了正确姿势开发vue后台管理系统，自己基础还是很薄弱的，没有看完；重点看了阮神的JSON Web Token入门教程，收获很多。关于之前的手摸手系列之后也要看看，但感觉还需要一些前置基础，就此搁置一下（才不是又菜又懒呢）。2021-4-7学习了Vue的动态路由相关知识，看的这篇文章Vue动态菜单(路由)的实现方案，文章讲得比较好理解，也成功实现了，但离真正项目中的还有差距，太简单了。2021-4-2今天看了很多教程想要实现登录权限问题，都说很简单，但是我就是看不懂，后来看到一篇vue登录并保持登录状态，虽然和自己想要的功能还有差距，但是也算是学习到了，了解了一些vuex。这种方法实现很简单，理解起来也不是很难。代码在vue-login里，主要遇到了两个坑:1、main.js里router.beforeEach()和router.afterEach()要放在Vue对象前面；2、store/index.js 里import vue 和 vuex 时 前后大小写要注意；2021-4-1看了教程的基础篇和登录权限篇，感觉不理解和不了解的东西还有很多（我怎么这么菜啊）;后来又看了阮一峰大神的flex布局语法篇，不难理解，关键在于熟练掌握使用。最后自己用vue+element写了一些页面，虽然简单，但是也算复习了一下。愚人节快乐啊！？2021-3-31看了 花裤衩大佬的开源项目vue-element-admin，佩服的五体投地，推荐去跑跑那个程序，顺便点个star，收藏以后可能用得到。另外，大佬还更新一些教程，写得很好，在项目的README.md里有相关的链接。我这里贴一下,估计后面的很多天里都会看这个了。注意：这教程是2017年的，如有问题请看源码手摸手，带你用 vue 撸后台 系列一(基础篇)手摸手，带你用 vue 撸后台 系列二(登录权限篇)手摸手，带你用 vue 撸后台 系列三 (实战篇)手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)手摸手，带你用vue撸后台 系列五(v4.0新版本)手摸手，带你封装一个 vue component手摸手，带你优雅的使用 icon手摸手，带你用合理的姿势使用 webpack4（上）手摸手，带你用合理的姿势使用 webpack4（下）2021-3-301、学习了BEM思想（CSS命名规范）2、实现了第一个vue+element-ui的项目portal-vue（虽然很简单）2021-3-291、第一次用vue-cli初始化一个项目，并npm run dev运行成功2、修改了一些配置，并看运行结果3、认识一下项目的结构2021-3-29前1、大概看到了cn.vuejs.org教程《深入了解组件前》前2、基本实现了cn.vuejs.org上的例子，在html里写的，共10个lesson.html 参考链接:1、我们为什么要用Vue,它解决了什么问题,如何使用它https://blog.csdn.net/wxl1555/article/details/799648182、Vue教程https://cn.vuejs.org/3、Vue教程--使用官方脚手架构建实例（上篇）https://gitee.com/janking/Infinite-f2e/issues/IDQHW4、初学vue+elementui搭建前台项目教程https://blog.csdn.net/qq_42957424/article/details/1073399935、BEM思想(命名规范)https://blog.csdn.net/eunice_sytin/article/details/833413816、手摸手，带你用vue撸后台 系列一（基础篇）https://juejin.cn/post/6844903476661583880一些概念1、什么是DOMDocument Object Model文档对象模型2、什么是Vue一套构建用户界面的渐进式框架自底向上 增量开发设计响应式的数据绑定3、单页应用程序(SPA)一个页面就是应用,也可以是子应用,交互处理非常多,且页面中的内容根据用户的操作动态变化开始入门1、介绍引入方式<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者<!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统（1）声明式渲染app1、app2（2）条件与循环app3、app4提供一个强大的过渡效果系统v-for 绑定数组的数据来渲染一个项目的列表（3）处理用户输入app5、app6v-on 指令添加一个event listenerv-model 表单输入和应用状态之间的双向绑定（4）组件化应用构建在Vue里,一个组件的本质是一个拥有预定义选项的一个Vue实例app7、app8"prop" 类似于一个自定义attributev-bind 指令将待办项传到循环输出的每个组件中虽然Vue内部没有使用自定义元素,不过在应用使用自定义元素、或以自定义元素形式发布时,依然有很好的互操作性。2、Vue实例（1）创建一个Vue的实例Vue的设计受MVVM模型,在文档中经常使用vm这个变量名表示Vue实例当创建一个Vue实例时,可以传入一个选项对象一个Vue应用由一个new Vue创建的根Vue实例,以及可选的嵌套的、可复用的组件树组成（2）数据与方法当一个Vue实例被创建时,它将data对象中所有的property加入到Vue的响应式系统中,当这些property的值发生改变时,视图将会产生“响应”,即匹配更新为新的值如果晚些时候需要一个property,但是一开始它为空或不存在,可以设置一些初始值data:{ newTodoText:'', visitCount:0, hideCompleteTodos:false, todos:[], error:null }使用Object.freeze(),阻止修改现有的property,这也意味着响应系统无法再追踪变化除了数据property,Vue的实例还暴露了一些有用的实例property与方法,前缀为$,以便与用户定义的property区分开来（3）实例生命周期钩子Vue被创建时经历的初始化过程,设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等,同时在这个过程中也会运行一些叫做生命周期钩子的函数,让我们可以在不同阶段添加自己代码的机会比如有created、mounted、updated、destroyed其中生命周期钩子的this上下文指向调用它的Vue实例注意:不要在选项property或者回调上使用箭头函数,因为箭头函数没有this（4）生命周期示图3、模板语法Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析（1）插值文本数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本差值<span>Message:{{msg}}</span>通过v-once指令,执行一次性地插值,当数据改变时,插值处的内容不会更新<span v-once>这个将不会改变:{{msg}}</span>原始HTML双大括号会将数据解释为普通文本,而非HTML代码,为了输出真正的HTML,需要使用v-html指令:<p>Using mustaches:{{rawHtml}}</p> <p>Using v-html directive:<span v-html="rawHtml"></span></p>属性Mustache语法不能作用在HTML attribute上,遇到这种情况应该使用v-bind指令<div v-bind:id="dynamicId"></div>ht<button v-bind:disabled="isButtonDisabled">Button</button>使用Javascript表达式Vue.js都提供了完全的JavaScript表达式支持{{number+1}} {{ok?'Yes':'No'}} {{message.split('').reverse().join('')}} <div v-bind:id="'list-'+id"></div>这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析,有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效<!--这是语句,不是表达式--> {{var a=1}} <!--流控制也不会生效,请使用三元表达式--> {{ if(ok){return message} }}模板表达式都应放在沙盒中,只能访问全局变量的一个白名单,如Math和Date不应该在模板表达式中试图访问用户定义的全局变量（2）指令指令是带有v-前缀的特殊attribute,指令attribute的值预期是单个JavaScript表达式(v-for是例外情况)指令的职责是,当表达式的值改变时,将对其产生的连带影响,响应式地作用域DOMv-if指令将根据表达式中值的真假来插入/移除元素参数一些指令能够接受一个"参数",在指令名称之后以冒号表示v-bind 响应式地更新HTML attributev-on 用于监听DOMevent动态参数<a v-bind:[attributeName]="url">...</a><a v-on:[eventName]="doSomething">...</a>对动态参数的值的约束动态参数预期会求出一个字符串,异常情况下为null,这个特殊的null值可以被显性地用于移除绑定，任何其他非字符串类型的值都会触发一个警告对动态参数表达式的约束动态参数表达式有一些语法约束,因为某些字符,空格和引号,放在HTML attribute名里是无效的<a v-bind:['foo'+bar]="value">...</a>在DOM中使用模板时，还需要避免使用大写字母来命名键名,浏览器会会强制把attribute名全部改为小写修饰符修饰符是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定例如.prevent修饰符告诉v-on指令对于触发的event调用event.preventDefault()<form v-on:sumbit.prevent="obSubmit">...</form>（3）缩写v-前缀作为一种视觉提示,用来识别模板中Vue特定的attribute。当在使用Vue.js现有标签添加动态行为时,v-前缀很有帮助对于经常使用的指令比较繁琐,同时在构建Vue管理所有模板的SPA,v-前缀也没有那么重要了v-bind 缩写<!--完整语法--> <a v-bind:href="url">...</a> <!--缩写--> <a :href="url">...</a> <!--动态参数的缩写(2.6.0+)--> <a :[key]="url">...</a>v-on 缩写<!--完整语法--> <a v-on:click="doSomething">...</a> <!--缩写--> <a @click="doSomething">...</a> <!--动态参数的缩写(2.6.0+)--> <a @[event]="doSomethind">...</a>4、计算属性和侦听器（1）计算属性模板内的表达式非常便利,但是放入太多的逻辑会让模板过重且难以维护例如<div id="example"> {{message.split('').reverse().join('')}} </div>计算属性缓存vs方法我们可以在表达式中调用方法来达到同样的效果,与前面的区别是,这里是定义了一个方法,而不是一个属性计算属性是基于它们的响应式依赖进行缓存的,只要message还没有改变,就不需要再次执行函数计算属性vs侦听属性Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性计算属性的setter计算属性默认只有getter,但是现在也可以提供一个setter（2）侦听器自定义的侦听器,在数据变化时执行异步或者开销较大的操作时,最有效5、Class与Style绑定（1）绑定HTML Class对象语法可以传给v-bind:class一个对象,以动态地切换class:<div v-bind:class="{active:isActive}"></div>上面的语法表示active这个class存在与否取决于数据propertyisActive的truthiness可以在对象中传入更多字段来动态切换多个class,此外v-bind:class指令也可以与普通的class attribute共存绑定的数据对象不一定内联定义在模板中可以绑定一个返回对象的计算属性数组语法把一个数组传给v-bind:class,以应用一个class列表用在组件上当在一个自定义组件上使用classproperty时,这些class将被添加到该组件的根元素上面,这个元素上已经存在的class不会被覆盖（2）绑定内联样式对象语法v-bind:style的语法十分直观,看着像CSS,但实际上是一个JavaScript对象命名可以用驼峰式或者短横线分隔<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}></div>"data:{ activeColor:'red', fontSize:30 }直接绑定到一个样式对象通常更好,这会让模板更清晰,同样可以结合返回对象的计算属性数组语法v-bind:style的数组语法可以把多个样式对象应用到同一个元素上<div v-bind:style="[baseStyles,overridingStyles]"></div>自动添加前缀当v-bind:style使用需要添加的浏览器引擎前缀的CSS property时,如transform,Vue.js会自动侦测并添加相应的前缀多重值从2.3.0起,可以为style绑定中的property提供一个包含多个值的数组,常用于提供多个带前缀的值<div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>这样写只会渲染数组中最后一个被浏览器支持的值,在本例中,如果浏览器支持不带浏览器前缀的flexbox,那么就只会渲染display:flex6、条件渲染（1）v-ifv-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值的时候被渲染，也可以通过v-else添加一个“else块”在<template>元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素，此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含<template>元素。v-else和v-else-if相当于 "else块"和"else-if块"。用key管理可复用的元素。（2）v-show只是简单地切换元素的CSS property display，不支持<template>元素，也不支持v-else。（3）v-if vs v-showv-if是"真正"的条件渲染，因为它会确保在切换过程中条件块内的event listener和子组件适当地被销毁和重建。v-if也是惰性的，如果在初始渲染时条件为假，则什么也不做，一直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多，不管初始条件是什么，元素总是被渲染，并且只是简单地基于CSS进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。（4）v-if与v-for一起使用不推荐同时使用v-if和v-for，正常情况下，v-for比v-if有更高的优先级。7、列表渲染（1）用v-for把一个数组对应为一组元素v-for指令基于一个数组来渲染一个列表，指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item是被迭代的数组元素的别名。v-for块中，我们可以访问所有父作用域的property。v-for还支持一个可选的第二个参数，即当前项的索引。（2）在v-for里使用对象可以用v-for来遍历一个对象的property可以提供第二个的参数为property名称（也就是键名）可以用第三个参数作为索引在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下都一致（3）维护状态当Vue正在更新使用v-for渲染元素列表时，它默认使用"就地更新"的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或者临时DOM状态（例如：表单输入值）的列表渲染输出。（4）数组更新检测变更方法Vue将被侦听的数组的变更方法进行了包裹，所以它们也会触发视图更新push()pop()shift()unshift()splice()sort()reverse()替换数组filter()、concat()、slice()不会变更原始数组，而总是返回一个新数组（5）显示过滤/排序后的结果可以创建一个计算属性来返回过滤或者排序后的数组（6）在v-for里使用值范围v-for也接受整数，在这种情况下，会把模板重复对应的次数（7）在<template>上使用v-for利用带有<v-for>的<template>来循环渲染一段包含多个元素的内容（8）v-for与v-if一同使用v-for优先级更高，如果想有条件地跳过循环的执行，可以将v-if置于外层元素或者(<template>)上（9）在组件上使用v-for<my-component v-for="item in items" :key="item.id"></my-component>在2.2.0+ 组件使用v-for时，key是必须的任何数据不会自动传递到组件里，因为组件有自己独立的作用域，为了把迭代数据传递到组件里，使用prop:<my-componet v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component> 不自动将item注入到组件里的原因是，这会使组件与v-for的运作紧密耦合。8、event处理（1）监听event可以用v-on指令监听DOMevent，并在触发时运行一些JavaScipt代码（2）event处理方法许多event处理逻辑会更为复杂，所以v-on可以接受一个需要调用的方法名称（3）内联处理器中的方法在内联JavaScript语句中调用方法有时需要在内联语句处理器中访问原始DOMevent，可以用特殊变量$event<button v-on:click="warn('Form cannot be submitted yet.',$event)"> </button>}//... methonds:{ warn: function (message,event){ if(event){ event.preventDefault() } alert(message) } }（4）event修饰符在event处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管可以在方法中轻松实现这点，但是更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOMevent细节。Vue.js 为v-on提供了event修饰符.stop.prevent.capture.self.once.passive<!--阻止单击event继续传播--> <a v-on:click.stop="doThis"></a> <!--提交event不再重载页面--> <form v-on:submit.prevent="onSubmit"></form> <!--修饰符可以串联--> <a v-on:click.sop.prevent="doThat"></a> <!--只有修饰符--> <form v-on:submit.prevent></form> <!--添加event listener时使用event捕获模式--> <!--即内部元素触发的event先在此处理，然后才交由内部元素进行处理--> <div v-on:click.capture="doThis">...</div> <!--只当在event.target是当前元素自身时触发处理函数--> <!--即event不是从内部元素触发的--> <div v-on:click.self="doThat">...</div>使用修饰符时，顺序很重要；相应的代码会以相同的顺序产生。v-on:click.prevent.self会阻止所有的点击v-on:click.self.prevent只会阻止对元素自身的点击2.1.4新增<!--点击event将只会触发一次--> <a v-on:click.once = "doThis"></a>2.3.0新增Vue还对应addEventListener中的passive选项提供了.passive修饰符<!--滚动event的默认行为(即滚动行为)将会立即触发--> <!--而不会等待`onScroll`完成--> <!--这其中包含`event.preventDefault()`的情况--> <div v-on:scroll.passive="onScroll">...</div>这个.passive修饰符尤其能够提升移动端的性能不要把.passive和.prevent一起使用，因为prevent将会被忽略，同时浏览器可能会向你展示一个警告，.passive会告诉浏览器不想阻止时间的默认行为（5）按键修饰符在监听键盘event时，经常需要检查详细的按键。Vue允许为v-on在监听键盘event时添加按键修饰符<!--只有在key是Enter时调用vm.submit()--> <input v-on:keyup.enter="submit">可以直接将KeyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符<input v-on:keyup.page-down="onPageDown">处理函数只会在$event.key等于PageDown时被调用（6）系统修饰键可以使用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘event的 listener.ctrl.alt.shift.meta<!--Alt + C--> <input v-on:keyup.alt.67="clear"> <!--Ctrl + Click--> <div v-on:click.ctrl="doSomething">Do something</div>.exact修饰符2.5.0新增.exact 修饰符允许你控制由精确的系统修饰符组合触发的event<!--即使Alt或Shift被一同按下时也会触发--> <button v-on:click.ctrl = "onClick">A</button> <!--有且只有Ctrl被按下的时候才触发--> <button v-on:click.crtl.exact="onCtrlClick">A</button> <!--没有任何系统修饰符被按下的时候才触发--> <button v-on:click.exact="onClick">A</button>鼠标按钮修饰符2.2.0新增.left.right.middle这些修饰符会限制处理函数，仅响应特定的鼠标按钮（7）为什么在HTML中监听event违背了关注点分离，但是因为所有的Vue.jsevent处理方法和表达式都严格绑定在当前视图的ViewModel上，不会导致任何维护上的困难。实际上，使用v-on有几个好处。1、扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法2、无须在JavaScript里手动绑定event，ViewModel代码时非常纯粹的逻辑，和DOM完全解耦，更易于测试3、当一个ViewModel被销毁时，所有的event处理器都会自动被删除，无须担心清理9、表单输入绑定（1）基础用法可以使用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的value、checked、selected attribute的初始值而总是将Vue实例的数据作为数据来源，应该通过JavaScript在组件的data选项中声明初始值v-model在内部为不同的输入元素使用不同的property并抛出不同的事件text和textarea 元素使用valueproperty和input事件checkbox和radio使用checkedproperty和change事件select字段将value作为prop并将change作为事件（2）值绑定对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）<!--当选中时，`picked` 为字符串"a"--> <input type="radio" v-model="picked" value="a"> <!--`toggle`为true或者false--> <input type="checkedbox" v-model="toggle"> <!--当选中第一个选项时，`selected`为字符串"abc"--> <select v-model="selected"> <option value="abc">ABC</option> </select>复选框<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" >单选按钮<input type="radio" v-model="pick" v-bind:value="a">选择框的选项<select v-model="selected"> <!--内联对象字面量--> <option v-bind:value="{number:123}">123</option> </select>（3）修饰符.lazy在默认情况下，v-model在每次input事件触发后将输入框的值雨数据进行同步。可以添加lazy修饰符，从而转为在change事件之后进行同步：<!--在"change"时而非"input"时更新--> <input v-model.lazy="msg">.number如果想自动将用户的输入值转化为数值类型，可以给v-model添加number修饰符：<input v-model.number="age" type="number">.trim<input v-model.trim="msg">（4）在组件上使用v-modelVue 的组件系统允许创建具有完全自定义行为且可复用的输入组件,这些输入组件甚至可以和 v-model 一起使用10、组件基础（1）基本示例因为组件是可复用的Vue实例，所以它们与new Vue接受相同的选项，比如data、computed、watch、methods以及生命周期钩子等（除el）（2）组件的复用data必须是一个函数，不能直接提供一个对象，取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝（3）组件的组织两种组件注册类型：全局注册和局部注册Vue.component全局注册Vue.component('my-component-name',{ //...options... })（4）通过Prop向子组件传递数据Prop是可以在组件上注册的一些自定义attribute，当一个值传递给一个prop attribute的时候，它就变成了那个组件实例的一个property。（5）单个根元素每个组件必须只有一个根元素（6）监听子组件event有的时候用一个事件抛出一个特定的值非常有用，用$emit的第二个参数来提供这个值。在组件上使用v-model自定义事件也可以用于创建支持v-model的自定义输入组件<input v-model="searchText">等价于：<input v-bind:value="searchText" v-on:input="searchText=$event.target.value" >当用在组件上时，v-model则会这样<custom-input v-bind:value="searchText" v-on:input="searchText=$event" ></custom-input>为了让其正常工作，这个组件内的<input>必须：将其value attribute绑定到一个名叫value的prop上在其input事件被触发时，将新的值通过自定的input事件抛出写成代码之后是这样的：Vue.component('custom-input',{ props:['value'], template:` <input v-bind:value="value" v-on:input="$emit('input',$event.target.value)" > ` })现在v-model就应该可以在这个组件上完美地工作下来了（7）通过插槽分发内容Vue自定义的<slot>元素让这变得非常简单Vue.component('alert-box',{ template:` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div> ` })（8）动态组件在不同组件之间进行动态切换非常有用可以通过Vue的<component>元素加一个特殊的is attribute来实现<!--组件会在`currentTabComponent`改变时改变--> <component v-bind:is="currentTabComponent"></component><currentTabComponent>可以包括已注册组件的名字或者一个组件的选项对象（9）解析DOM模板时的注意事项有些HTML元素(比如<ul> <ol> <table> select)对于哪些元素可以出现在其内部有严格限制的，而有些元素(比如<li> <tr> <option>)只能出现在其他某些特定的元素内部<table> <blog-post-row></blog-post-row> </table>这个自定义组件会被作为无效内容提升到外部，并导致最终的渲染结果出错，特殊的is attribute给了一个变通的方法<table> <tr is="blog-post-row"></tr> </table>需要注意的是 如果从以下的来源使用模板的话，这条限制是不存在的：字符串（例如：template:'...'）单文件组件（.vue）<script type="text/x-template">实战练习1、前置安装（1）安装node（2）安装vue-clinpm install --global vue-cli（3）安装element-uinpm install --global element-ui2、初始化并运行vue init webpack 项目名称跟着提示和需求配置好项目，其中eslint可以选择standard或者nonecd 项目名称 npm run dev3、认识项目结构| - build （运行文件夹，dev/prod运行时需要用到的相关文件，含webpack配置） | - config （配置文件夹，比如说dev/prod两种对应的不同接口等设置） | - dist （打包生成的部署文件夹，一开始没有的，跑命令npm run build之后可见） | - node_modules | - src （项目代码）   | - assets （资源文件夹，为了区分static，这里存自己的资源）   | - components （页面文件夹）   | - router （路由文件夹）   | - App.vue （vue主文件）   | - main.js （入口文件，webpack配置的entrance） | - static （资源文件夹，为了区分assets，这里存第三方的资源） | - .babelrc （转码规则配置） | - .editorconfig （代码规范配置） | - .eslintignore （eslint检查忽略配置） | - .eslintrc.js （eslint配置文件） | - .gitignore （git忽略配置） | - .postcssrc.js （postcss的load的config，文件里有对应的github地址） | - index.html （html主页面） | - package.json | - README.md4、一个具体的例子在能运行初始项目的基础上进行修改，制作一个登陆界面（1）修改main.js文件添加代码，导入element-uiimport ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)（2）在src下创建文件夹views(用于存放页面文件)，并在views下创建login文件夹，在login里创建文件Login.vue<template> <div> <!--flex弹性盒子模型，justify-content：主抽 --> <div style="display: flex;justify-content: center;margin-top: 150px"> <el-card style="width: 400px"> <div slot="header" class="clearfix"> <span>登录</span> </div> <table> <tr> <td>用户名</td> <td> <el-input v-model="user.username" placeholder="请输入用户名"></el-input> </td> </tr> <tr> <td>密码</td> <td> <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input> <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法--> </td> </tr> <tr> <!-- 占两行--> <td colspan="2"> <!-- 点击事件的两种不同的写法v-on:click和 @click--> <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>--> <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button> </td> </tr> </table> </el-card> </div> </div> </template> <script> export default { /* name: 'Login', */ data () { return { user: { username: '测试', password: '123456789' } } }, methods: { doLogin () { alert(JSON.stringify(this.user)) } } } </script> <style scoped> </style>（3）修改index.js文件添加代码：import Login from '@/views/login/Login'部分代码修改为：export default new Router({ mode:'history', routes: [ { path: '/index', name: 'HelloWorld', component: HelloWorld }, { path: '/', name: 'Login', component: Login } ] })如果界面打开页面空白，请检查路由是否写错了或者有冲突。补充：1、BEM思想(命名规范)BEM: 块(block)、元素(element)、修饰符(modifier).block{} //块 .block__element{} //元素 .block--modifier{} //修饰符其中块也可以使用单个连字符来界定.site-search{} //块 .site-search__field{} //元素 .site-search--full{} //修饰符块：一个独立的，可以复用而不依赖其他组件的部分元素：属于块的某个部分修饰符：用于修饰块或者元素，体现出外形行为状态等特征要求：保证各个部分只有一级B__E--M,同时修饰符需要和对应的块或者元素一起使用，避免单独使用