1.Vue系列
1.小道具
高级图形中使用的Props主要用于从父组件接收主面板数据。例如，hasScale用于传递一个布尔值，告诉panel组件当父组件调用panel组件时是否支持缩放。ProgressData用于接收渲染面板的数据。应该注意，父组件中的传输名称应该与子组件中的props中定义的名称一致。下面是关于道具在进阶图中的应用。
Props可以是从父组件接收数据的数组或对象。Props可以是一个简单的数组，也可以用一个对象来代替。对象允许您配置高级选项，如类型检测、自定义验证和设置默认值。支持配置属性类型:数据类型、默认设置默认值、是否必选、验证器自定义验证函数。
复制代码
道具:{
//支持缩放吗？
hasScale: {
类型:布尔型，
默认值:false
},
//类型:只读或编辑
类型:{
类型:字符串，
默认值:“”
},
//主面板数据
进度数据:{
类型:数组，
默认:函数{
return []
}
}
},
复制代码
2.$emit
$emit用于向上发送事件和传递参数，通常与props配合使用，达到父子组件通信的目的。在高级图中，change事件被分派给父组件，并传递了两个参数this.bodyWidth和this.list。请注意，父组件在接收事件时应该保持相同的名称。
观察:{
列表':{
深:真的，
处理程序{
this . body width = this . list . length * 392+60+' px '
//调度事件
这个。$emit
}
},
},
复制代码
复制代码
3.裁判员
在refvue中用来绑定组件，组件实例对象可以通过this.refs[绑定名称]或者this.refs[绑定名称]或者this.refs[绑定名称]或者this.refs .绑定名称获得，这个有时候非常有用。例如，当我们想调用一个组件中它的子组件的方法或属性时，我们可以这样调用它。
复制代码
4.看
它是watchvue中常用的API之一，watch用于监控数据，数据中的数据，道具中的数据。
观察观察实例上表达式或函数的计算结果的变化。回调函数获得的参数是新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用函数代替它们。
在高级图中，watch用于监视data中的面板数据列表和props中父组件传递的面板数据progressData。其中使用了深度属性，指示是否进行深度内部监控。根据官网的提示，数组不需要使用deep:true来监控数组内部值的变化。
观察:{
列表':{
深:真的，
处理程序{
this . body width = this . list . length * 392+60+' px '
这个。$emit
}
},
progressData ':
处理程序{
this.list = newVal
}
}
},
复制代码
5.计算
Computed是一个计算属性。对于任何复杂的逻辑，都应该使用计算属性。这是它的应用场景。虽然可以通过方法或观察来完成，但在处理复杂逻辑时，computed有更多的优势:计算属性是基于它们的响应依赖来缓存的。
Computed已经在高级图形的实现中多次使用。
6.创造
Created声明了一个周期性的钩子函数。如果想尽快得到接口数据，在这里做比较合适。
创建实例后，立即同步调用它。在这一步中，实例已经处理完了选项，也就是说已经配置了以下内容:数据拦截、求值属性、方法、事件/侦听器的回调函数。但是，挂载阶段还没有开始，$el属性还不可用。
在高级图中，你可以在已创建中得到可用的相关数据。
已创建{
//获取可用于关联的关联数据
// this.searchList
},
复制代码
7.安装好的
挂载是vue生命周期的一个钩子函数。此时，dom和el被新创建的vm替换。$el。我们可以在mounted中操作dom，这也是最早可以很好操作dom的钩子函数。
请注意，已安装并不保证所有子组件都已安装。如果您想等到整个视图呈现后再执行某些操作，
可以用vm。$nextTick内部安装。
在高级图中使用了挂载的钩子，其中做了两件事。第一个是监视文档上的单击事件。第二件事是调用init函数来初始化高级图形。
已安装{
//侦听click事件
document.addEventListener
//初始化高级图表
this.init
},
复制代码
8.销毁前
我们通常在beforeDestroy中做一些解除绑定和移除操作。在销毁实例之前发生BeforeDestroy。在这一步，实例仍然完全可用。请注意，在服务器端呈现期间，不会调用此挂钩。
在高级图中的beforeDestroy中所做的是移除点击监控。比如这里也可以去掉一些定时器，进行一些解绑定操作。
销毁前{
//在销毁实例之前移除单击侦听
document.removeEventListener
},
复制代码
9.指令v-if
v-if指令的应用场景可以是判断是否显示某个元素，一个条件判断指令。v-show是最常用的命令之一，也是经常提到的。他们都可以做同样的事情，所以他们经常被比较。他们应该在什么时候使用哪一个？
V-show通过改变css显示属性的值来实现切换效果。v-if是实条件渲染，初始值为真时会编译渲染，而v-show无论如何都会编译。简单的切换css属性v-if适合条件不经常变化的场景，因为他的切换会重新编译渲染，消耗很多钱。V-show适合切换频繁的场景，开销较低。
在高级图中，v-if命令用于确定是否支持缩放，即是否显示缩放工具栏，如下所示
10.迭代
用于在循环中生成一系列元素，这也是一个常用指令。如果您希望您的元素保持足够的独立性，那么应该注意key属性。
TIPS 1: V-for的默认行为是试图就地修改元素，而不是移动它们。要强制它对元素重新排序，
您需要使用一个特殊的属性键来提供排序提示。
小技巧2: v-if和v-for当它们在同一个节点时，v-for的优先级高于v-if，这意味着v-if会在每个v-for循环中重复运行。
当您只想渲染某些项目的节点时，这种优先级机制非常有用。如果没有，可能会造成不必要的消耗。
在高级图中，v-for遍历用于生成一系列梯形节点和文本行节点，它们构成了高级图的主面板，如下所示
11.v型装订
V-bind是最常用的，但通常我们用它的缩写“:”。其用途是动态地将一个或多个属性或组件属性绑定到表达式。
提示:修饰符:
。作为DOM属性绑定，而不是作为属性绑定。
。camel-将kebab-case属性名称转换为camelCase。
。sync语法sugar，它将被扩展到一个v-on监听器，用于更新父组件的绑定值。
例如，在高级图中，键、禁用和样式的动态绑定如下
12.绑定事件
V-on用于绑定事件。我们更常用它的缩写“@”，当与一些修饰语结合使用时，有时会非常有用。比如click.stop可以防止冒泡。
提示一些修饰语:
。调用stop-event.stopPropagation。
。prevent-调用事件. preventDefault..
。捕获-添加事件侦听器时使用捕获模式。
。self-只有当事件由侦听器绑定的元素本身触发时，才会触发回调。
。{ key code | key alias }-仅当事件由特定按键触发时，才会触发回调。
。native-监听组件根元素的本地事件。
。一次只触发一个回调。
。左键-仅在单击鼠标左键时触发。
。右键-仅在单击鼠标右键时触发。
。中键-仅在单击鼠标中键时触发。
。passive-在{passive: true}模式下添加侦听器。
Tips从2.4.0开始，v-on也支持无参数绑定事件/监听器键值对对象。请注意，使用object语法时，不支持任何修饰符。
高级图主要用于绑定事件，它与。停止以防止事件冒泡，如下所示。
13.虚拟html
V-html用于绑定html字符串，其作用是更新元素的innerHTML。
Tips1:在网站上动态渲染任意HTML是非常危险的，因为很容易引起XSS攻击。只在可信的内容上使用v-html，不要在用户提交的内容上使用。
Tips2:在单文件组件中，作用域样式不会在v-html内部应用，因为那部分html还没有被Vue的模板编译器处理。如果你想为v-html的内容设置CSS的作用域，你可以用CSS模块替换它，或者手动设置一个类似BEM的作用域策略，增加一个全局元素。
在高级图形开发中，可关联数据的标题与v-html绑定在一起，如下所示
复制代码
14.v型车
V-model可以用来绑定表单组件的值，实现双向绑定。有四种类型的元素可以使用v模型:
成分
提示:修饰符:
。懒惰——代替输入，监听变化事件。
。number-输入字符串被转换成一个有效的数字。
。trim-输入第一个和最后一个空网格过滤器。
当与修饰词结合使用时，它有时会非常有用。比如高级图中使用了v-model.trim，这样在输入链接文本时，会自动去掉开头和结尾的空网格。这不影响功能，但有时候会很奇妙。比如有些iOS手机在输入完成后，往往会自动在表单网页上带上空网格。我遇到的一个例子是输入。
写到这里，我其实也没想到一个高级的图会涉及这么多的技术点，所以平时积少成多，要养成学会写的习惯，多积累。多积累，有时能灵活地配套出更有力的出拳。vue可能涉及的技术点比较多，欢迎关注的同学在评论区指出。
2.Javascript和Html系列
15.addEventListener和removeEventListener
EventTarget.addEventListener方法在EventTarget上注册指定的侦听器，当对象触发指定的事件时，将执行指定的回调函数。事件目标可以是elements元素、文档和文档上的窗口或任何其他支持事件的对象。
AddEventListener的工作方式是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。
在高级图形开发中，addEventListener用于监听click事件，监听回调为clickListener，与Element.contains结合实现点击行为发生在menuPanel区域之外，关闭右键弹出菜单。如下所示:
已安装{
//侦听click事件
document.addEventListener
},
销毁前{
//移除监视器
document.removeEventListener
},
复制代码
单击监听器{
如果返回
如果返回
//在menuPanel区域外单击，关闭右键弹出的菜单。
// element.contains，有时候是非常有用的api。
如果){
this.showMenu = false
}
},
复制代码
16.keyup.enter.native
释放按键时触发keyup事件，释放回车键时触发keyup.enter函数。这通常用于登录、检索、表单提交和其他需要回车键来指示发送或确认的场景。
高级图表用于在释放Enter键时触发相关数据的检索。如下
复制代码
17.新日期
New Date是javascript的全局api，可以用来创建当前时间。在高级图形开发中，它是在生成uuid时用于获取当前时间的毫秒数。如下所示:
//获取当前时间的毫秒数
让d =新的日期
// console.log 1651127122490
复制代码
18.windows . performance . now
按照mozilla的说法:这个方法返回一个DOMHighResTimeStamp对象，代表从某个时刻到方法被调用的时刻的毫秒数。
9.数学。随机和数学地板
Math是javascript的全局api，Math.random的返回值是浮点伪随机数，取值范围为[0，1]。Math.floor用于向下舍入并返回一个整数。
20.字符串.替换
String.replace用于替换字符，但不改变原字符串，而是返回改变后的字符串。
提示:replace方法在部分或所有模式匹配被替换值替换后返回一个新字符串。
模式可以是字符串或正则表达式，替换值可以是字符串或每次匹配时调用的回调函数。如果pattern是一个字符串，则只替换第一个匹配项。
21.转换对象为字符串
方法返回表示对象的字符串，该对象可用于将数字转换为字符串。
22.Array.push、Array.map、Array.findIndex和Array.splice
Push可用于将数据项添加到数组中，在数组的末尾；Map可用于遍历数组；FindIndex可以用来查找符合条件的数据项；拼接可用于删除数组中的元素，或在特定位置添加元素。
这些数组方法用于高级图形开发。比如findIndex和push结合使用，避免重复添加数据。例如:
23.JSON.parse和JSON.stringify
JSON.parse也是我在存储中常用的，主要是为了保持数据的完整性和真实性。例如，int数不会被更改为string。在高级图形开发中，使用JSON.parse和JSON.stringify实现深度复制。深度拷贝后，拷贝前后两个数据将是完整独立的，一方的改变不会影响另一方。如下所示:
this.form.relation.push))
复制代码
24.窗口.打开
tips:tips:Window界面的打开方法是将指定的资源加载到指定名称的浏览器上下文中。如果没有指定名称，将打开一个新窗口，指定的资源将加载到该窗口的浏览器上下文中。
Window.open用于打开一个新窗口，以访问高级图开发中的详细信息页面。如下
25.MouseEvent.screenX和MouseEvent.screenY
ScreenX是MouseEvent的只读属性，它提供了鼠标在整个世界中的水平坐标。ScreenY提供了鼠标在整个世界的垂直坐标。
在高级图形的开发中，将鼠标的两个坐标与固定定位相结合，实现右键菜单的位置跟随鼠标的位置。如下所示:
26.本地存储
您可以以键-值对的形式将数据访问到localStorage，并且存储在localStorage中的数据可以永久存储，除非它被主动删除。
在高级图形开发中，它适用于缓存高级图形数据，如下所示:
localStorage.setItem
复制代码
**27.新的FormData和canvas.toBlob **
Canvas.toBlob可以将Canvas元素中的canvas内容转换成Blob形式。
FormData接口提供了一种构造表示表单数据的键/值对的方法，并且可以通过XMLHttpRequest.send方法轻松发送数据。如果提交时编码类型设置为“多部分/表单数据”，它将使用与表单相同的格式。
在高级图形开发中，新的FormData用于以blob格式组织数据和上传图片。如下所示:
28.event.currentTarget目标和开关
Event.currentTarget指向事件绑定的元素。请注意，Event.target指向由事件触发的元素。在高级图形开发中，巧妙地利用currentTarget获取事件绑定元素，进而获取元素的name属性值。为了区分不同元素的点击操作，进而进行不同的逻辑处理。
switch语句计算一个表达式，将表达式的值与case子句相匹配，并执行与情况相关联的语句。因为是条件分支语句，所以当相似条件的冗余度等于三个分支时，可以考虑使用switch进行条件判断和处理。虽然如果也能达到目的，此时切换可能看起来更清晰。
高级图表的用法如下:
3.css和scss
29.@mixin和@include
高级图的开发使用scss作为css预处理语言，其中使用了@mixin和@include。
@mixin指令允许我们定义一个可以在整个样式表中重用的样式。
@include指令可以将混合引入到文档中。
高级图表的用法如下:
@mixin cn-icon {
显示:内嵌-块；
宽度:# { $ w } px
高度:# { $ h } px
背景:url无重复中心；
背景尺寸:100% 100%；
}
复制代码
。图标-标题-主页{
@ include cn-icon；
右边距:10px
光标:指针；
}
复制代码
30.css浏览器兼容性写入前缀
提示:CSS是一个非标准属性。厂商在实现非标准的CSS属性时，一般都会加上前缀，甚至是以后要实现的标准。
当标准发布时，制造商将删除前缀。火狐:-Moz-，Chrome和Safari:-WebKit-，IE:-MS-，Opera:-o- O-。建议前面写私有属性，后面写标准属性，例如:
-WebKit-transform:rotate；
-moz-transform:旋转；
-ms-transform:旋转；
-o-transform:旋转；
变换:旋转；
复制代码
在高级图中，在transform中使用了兼容性写入，以更好地确保缩放功能的兼容性。如下所示:
。缩放比例{
变换:缩放；
-ms-transform:scale；
-WebKit-transform:scale；
}
复制代码
文章来源于《程序员的成长与指北针》，作者是凌。
