使用Promise完成多组件表单的验证 　　近期在项目中遇到一个表单需求，因为表单过多而且部分表单和其他表单可以通用，所以将表单拆成多个vue文件，但是又遇到表单验证的问题，最后用promise来完成多组件表单验证的需求。　　项目使用的是 ant-design-vue 这个UI库，他的验证表单组件使用 this.$refs.ruleForm.validate() 函数来完成表单的验证，我们可以在组件内在这个函数外面套一层 promise 函数。methods: { validate() { return new Promise((resolve, reject) => { this.$refs.ruleForm.validate(valid => { if (valid) { resolve('true') }else { reject(valid) } } }) } } 　　 在父组件中，我们使用 Promise.all 和 ref 来完成多组件的同时验证。<template> <div> <child-one ref="childOne"></child-one> <child-two ref="childTwo"></child-two> <a-button icon="check" type="primary" @click="submit">提 交</a-button> </div> </template> <script> import ChildOne from './ChildOne' import childTwo from './childTwo' export default { components: { ChildOne, childTwo }, methods: { submit() { const refArray = ['childOne', 'childTwo'] Promise.all(refArray.map(item => this.$refs[item].validate())).then(() => { // 提交的交互写在这里，只有在所有的组件中的表单验证通过后，才会执行这里面的请求交互 }) } } } </script>

npm切换淘宝镜像 　　npm的默认源是国外的，在日常下载中可能下载速度会较慢，我们可以将默认源切换到国内来加快下载速度。　　1、查看当前npm所有配置：npm config list　　2、查看npm当前默认源：npm config get registry　　3、设置淘宝镜像：npm config set registry https://registry.npmmirror.com/　　4、设置官方镜像：npm config set registry https://registry.npmjs.org　　5、单次下载使用：npm --registry=http://registry.npmmirror.com install

Vue2 sync 修饰符的使用 　　在自己封装的组件中我们希望传入子组件的一些属性可以完成双向绑定的效果，我们就可以使用 sync 修饰符来完成这个需求。父组件：<template> <child :title.sync="childTitle"></child> </template> <script> import child from './child' export default { data() { return { childTitle: 'fatherData' } }, components:{ child } } </script> 子组件：<template> <div> <div>{{ title }}</div> <button @click="changeTitle">点击改变title</button> </div> </template> <script> export default { props: ['title'] methods: { changeTitle() { this.$emit('update:title', 'childChange') } } } </script> 　　这样我们就可以完成类似于双向绑定的修改了，他和双向绑定的不同是：双向绑定 v-model 他在一个组件中只能存在一个，sync 修饰符在一个组件中可以存在多个。实现方式的不同：v-model=value 是 @input + value 来完成的，但是 :value.sync 是通过 @update:value 来实现。// v-model <child v-model="value"></child> <child :value="value" @input="val => value = val"></child> <!-- v-model 是给子组件绑定了 value 属性，子组件内部更改 value 的时候，必须通过 $emit 派发一个 input 事件，并携最新的值 v-model 会自动监听 input 事件，把接收到的最新的值同步赋值到 v-model 绑定的变量上 --> // .sync <child :value.sync="value"></child> <child :value="value" @update:value="val => value = val"></child> <!-- sync 其实就是一个update的时间监听，将获取到的值赋值给value -->

阿里云SSL免费证书申请与部署 免费SSL证书申请　　这里以阿里云为例，首先我们先进入阿里云的域名控制台，点击域名列表中的管理按钮，进入到域名的基本信息页面，点击开启SSL证书。　　进入SSL证书界面后，点击免费证书，然后点击立即购买按钮，每个人每年可以免费领取20个免费证书。在领取到免费证书后就可以点击创建证书来创建自己的SSL证书了，创建后点击证书申请，输入你要绑定的域名然后提交审核，等待审核完成后便就拥有属于自己的证书了。　　在审核完成后我们需要将证书下载下来，根据自己的服务器类型来下载对应的证书，我是Nginx的服务器所以选择pem格式下载了。下载下来的文件有key和pem两个格式。部署SSL证书（以宝塔为例）　　在我们下载证书完成后，登陆我们自己的宝塔，选择网站找到需要部署SSL证书的网站点击设置，然后选择SSL，点击其他证书，在秘钥（key），证书格式（pem）中分别将刚刚下载好的证书中对应格式的文件复制进去点击保存即可，将上面强制HTTPS打开。

CSS中display:none，visibility:hidden，opacity：0的区别 相同点1、三者都可以隐藏元素不同点占据空间1、display：none，隐藏之后是不占据空间的，而且它和它所有的子元素都会被隐藏。2、visibility：hidden ，隐藏之后是会占据空间。3、opacity：0，则是让元素变透明，也是会占据空间。子元素是否继承1、display：none，不会被继承因为都被隐藏了。2、visibility：hidden ，会被子元素继承，但是可以通过设置visibility：visible来让子元素显示。3、opacity：0，会被子元素继承。事件1、display：none，无法触发事件。2、visibility：hidden ，无法触发事件。3、opacity：0，仍会触发事件。动画1、display：none，不在生效。2、visibility：hidden ，不在生效。3、opacity：0，仍会生效。回流和重绘1、display：none，产生回流和重绘。2、visibility：hidden ，只会引起页面重绘。3、opacity：0，只会引起页面重绘。