学习笔记源自：绿叶

HTML指的是HTML4.01，XHTML是HTML的过渡版，HTML5是HTML的升级版。

W3C官方地址：https://www.w3.org/TR/html5/
MDN官方地址：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

新增速览

新增元素

新增属性

学习笔记源自：绿叶

CSS，指的是“Cascading Style Sheet（层叠样式表）”

常用属性速览

学习笔记源自：绿叶

常用标签速览

• Eslint：JavaScript代码检测, JavaScript代码风格检测, JavaScript代码自动格式化

• vue

• vetur: vue代码高亮，智能提示

• vue 2 snippets: 自动补全

• HTML CSS Support: 代码提示

• htmltagwrap：外面嵌套标签

• IntelliSense for CSS class names in HTML: 类名补全

• Auto Rename Tag: 同时更改头尾标签

• Path Autocomplete：路径补全

• Image preview： 图片预览

• JavaScript (ES6) code snippets: js代码提示

• Quokka.js ：观察js变量变化(这个太强了)

• EJS language support

  

模板引擎不属于特定技术领域，是为了使用户界面与业务数据（内容）分离而产生的，是跨领域跨平台的概念。严格的模板引擎的定义是，输入模板字符串+数据，得到渲染过的字符串（页面）。

后端服务器的资源是有限的，并且对数据的处理是随着用户数量的增加而叠加的，用户的每一次操作，页面渲染都是在消耗服务器资源，少量的用户操作或许不会导致服务器卡顿，但是当出现成千上万甚至更多的用户时，可能仅是网络请求就会让服务器无响应甚至宕机（参照春运）。而如果将页面的渲染放在用户端（前端），用户只有一个，几十毫秒的渲染时间跟请求延迟比起来根本算不上瓶颈，所以既可以提高用户的体验，同时也减轻了服务器的压力。

通常我们将渲染方法设计为render()，参数就是模板路径和数据。render()我们可以将其看成是一个约定接口，接受相同参数，最后返回HTML片段。这样的方法我们都视作实现了这个接口。
如：

形成模板技术的也就如下4个要素。
❑ 模板语言。
❑ 包含模板语言的模板文件。
❑ 拥有动态数据的数据对象。
❑ 模板引擎。

实现上，从正则替换的方式到拼写字符串直接输入，再到AST解析，存在各种输出页面内容的方式，但从定义上来说都是差不多的。

前端模板引擎分为两种，基于字符串的模板引擎和基于JavaScript的模板引擎。

模板引擎主要有以下几个步骤。
❑ 语法分解。提取出普通字符串和表达式，这个过程通常用正则表达式匹配出来
❑ 处理表达式。将标签表达式转换成普通的语言表达式。
❑ 生成待执行的语句。
❑ 与数据一起执行，生成最终字符串。

使用TORCHTEXT进行语言翻译

pip install scapy 之后发现语言包下不下来。官方语言库

手动下载 en_core_web_sm-2.2.5.tar.gz de_core_news_sm-2.2.5.tar.gz 但是github仍然下载受限

于是找到了网友分享的链接：

en_core_web_sm-2.2.5：下载 x9vc

因为最终要做的是中英文翻译，直接找了一个中文库：Chinese_models_for_SpaCy

进入存放目录 pip install en_core_web_sm-2.2.5.tar.gz 进行安装

1
2

>>>import spacy
>>>nlp = spacy.load("en_core_web_sm")

检测是否安装成功

为了方便使用本来想设置一下简写 spacy link en_core_web_sm en 但是spacy命令无法识别，可能要用管理员身份安装吧。但是因为用虚拟环境弄的，不想把路径弄坏了，就此作罢。

然而导入中文包时出错

ValueError: could not broadcast input array from shape (128) into shape (96)

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

为了在数据更新操作之后操作DOM，我们可以在数据变化之后立即使用Vue.nextTick(callback)；这样回调函数会在DOM更新完成后被调用，就可以拿到最新的DOM元素了。

所谓“生命周期”，是指实例对象从构造函数开始执行（被创建）到被GC（Garbage Collection，垃圾回收）回收销毁的整个存在时期，在生命周期中被自动调用的函数叫作生命周期函数，也被形象地称为生命周期钩子函数。

可以利用不同时期的钩子函数去完成不同的操作。例如需要在某个时期去获取后台数据、在某个时期去更新数据等。利用生命周期钩子函数可以精准定位到某个时期去完成一些特定的事情。

1. beforeCreate：在实例开始初始化时同步调用，在组件实例刚被创建的时候增加一些loading事件。此时数据观测、事件等都尚未初始化。data不可见
2. created：在实例创建之后调用。此时已完成数据观测、属性和方法的运算，watch/event事件回调。但尚未开始DOM编译，即未挂载到document中。$el属性不可见
3. beforeMount：在mounted之前运行。相关render函数首次被调用
4. mounted：在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档。
5. beforeUpdate：在实例挂载之后，再次更新实例（如更新data）时会调用该方法，此时尚未更新DOM结构。
6. updated：在实例挂载之后，再次更新实例并更新完DOM结构后调用。注意监听的是DOM而不是数据。该钩子在服务器端渲染时不会被调用
7. beforeDestroy：在开始销毁实例时调用，此刻实例仍然有效。该钩子在服务器端渲染时不会被调用
8. destroyed：在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。该钩子在服务器端渲染时不会被调用
9. activated：需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法。
10. deactivated：需要配合动态组件keep-live属性使用。在动态组件初始化移出的过程中调用该方法。

当获取到后端数据后，我们会把它按照一定的规则加载到写好的模板中，输出成在浏览器中显示的HTML，这个过程就称之为渲染。而Vue.js是在前端（即浏览器内）进行的模板渲染。

早期的Web项目一般是在服务器端进行渲染，服务器进程从数据库获取数据后，利用后端模板引擎，甚至于直接在HTML模板中嵌入后端语言（例如JSP），将数据加载进来生成HTML，然后通过网络传输到用户的浏览器中，然后被浏览器解析成可见的页面。而前端渲染则是在浏览器里利用JS把数据和HTML模板进行组合。两种方式各有自己的优缺点，需要更具自己的业务场景来选择技术方案。

前端渲染的优点在于：
① 业务分离，后端只需要提供数据接口，前端在开发时也不需要部署对应的后端环境，通过一些代理服务器工具就能远程获取后端数据进行开发，能够提升开发效率。
② 计算量转移，原本需要后端渲染的任务转移给了前端，减轻了服务器的压力。

而后端渲染的优点在于：
① 对搜索引擎友好。
② 首页加载时间短，后端渲染加载完成后就直接显示HTML，但前端渲染在加载完成后还需要有段js渲染的时间。

Vue.js 2.0开始支持服务端渲染，从而让开发者在使用上有了更多的选择。

“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。

Vue中最重要的概念就是响应式数据，一方面指衍生数据和元数据之间的响应，通过数据链来实现；另一方面则是指视图与数据之间的绑定。

数据链

得益于数据链，在Vue中我们可以通过修改元数据的值来触发一系列数据的更新。当你修改数据起点时，所有存在在网上的节点值都将同步更新

衍生数据应该怎样实现从而保证其值只依赖于元数据而不允许被外界修改呢？

通过函数式编程，衍生数据也得以实现。函数式编程的核心是根据元数据生成新的衍生数据，提供唯一确定的输入，函数将返回唯一确定的输出，它并不会修改原有变量的值。这在运用JS闭包概念进行开发时尤为重要，在函数作用域内调用域外或全局的变量时并不会修改它们的值。实际上，函数式编程就是建立了一条数据流通的链路，开发者只需要关注输入和输出两端的内容就可以，这是封装复用的一种最佳实践