学习笔记
主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等
HTML/CSS
**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分
**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式
HTML5 /CSS3
**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性
**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型
JavaScript
**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串
开源分享：docs.qq.com/doc/DSmRnRG…
不使用 template
<TableList #header="attrList">
<TableHeader v-bind="attrList" />
简单、直截了当，令人赞叹不已。
5、将局部和全局的 style 混合在一起
通常情况下，在处理样式时，我们希望它们只在当前组件内起作用
<style scoped>
.content {
background: green;
}
不过，如果需要的话，也可以添加一个非作用域样式块来添加全局样式
/* 全局 */ .content p { font-size: 12px; }<style scoped>
/* 在该组件内有效 */
.content {
background: green;
}
需要注意，全局样式是危险的，难以追踪。但有时，它们是一个完美的逃生舱口，正是你所需要的。
6、重写子组件的样式
Scoped CSS 在保持内容整洁方面非常棒，而且不会将样式引入应用的其他组件中。但有时我们需要覆盖一个子组件的样式，并跳出这个作用域。
Vue 有一个 deep 选择器可以完成以上功能
<style scoped>
.my-content >>> .child-component {
font-size: 16px;
}
注意：如果你使用像 LESS 这样的 CSS 预处理器，你可能需要使用 /deep/ 来代替
.my-content /deep/ .child-component { font-size: 16px; }7、如何在 Vue 之外创建一个具有响应性的变量
如果你从 Vue 之外得到一个变量，让它具有反应性是很好的。这样，我们就可以在 computed props、watch 和其他任何地方使用它，它的工作方式就像 Vue 中的任何其他状态一样。
如果我们使用的选项 API，需要的只是将其放在组件的数据部分中
const externalVariable = getValue();
export default {
data() {
return {
reactiveVariable: externalVariable,
};
}
};
如果使用 Vue3 的组合 API，可以直接使用 ref 或 reactive
import { ref } from 'vue';
// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable); //使用ref使其具有响应性
使用 reactive 代替
import { reactive } from 'vue';
// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
// reactive 只对对象和数组起作用
const anotherReactiveVariable = reactive(externalVariable);
如果你还在使用 Vue2，你可以使用 observable 而不是 reactive 来实现完全相同的结果
import Vue from 'vue'
// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
const anotherReactiveVariable = Vue.observable(externalVariable);
8、v-for 中的解构
你是否在v-for 中使用解构？
// users: [{name:'leo',id:'1'},{name:'lion',id:'2'}]
v-for="{ name, id } in users"
:key="id"
{{ name }}
更广为人知的是，可以通过使用这样的元组从 v-for 中取出索引
<li v-for="(movie, index) in [
'Lion King',
'Frozen',
'The Princess Bride'
]">
{{ index + 1 }} => {{ movie }}
当使用一个对象时，可以这样使用 key
<li v-for="(value, key) in {
name: 'Lion King',
released: 2019,
director: 'Jon Favreau',
}">
{{ key }}: {{ value }}
也可以将这两种方法结合起来，获取 key 以及属性的 index
<li v-for="(value, key, index) in {
name: 'Lion King',
released: 2019,
director: 'Jon Favreau',
}">
{{ index + 1 }} => {{ key }}: {{ value }}
9、在指定范围内循环
v-for 允许我们遍历数组，也允许我们遍历一个范围
渲染结果
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
这里有个注意点，当我们使用 v-for 遍历一个范围时，它将从 1 开始，以我们指定的数字结束。
10、窃取 prop 类型
我们从一个子组件中复制 prop 类型，只是为了在一个父组件中使用它们。但是往往偷取这些 prop 类型要比仅仅复制它们好得多，什么意思？
举个例子，我们在某个组件中使用了一个 List 组件
为了让它正常工作，我们需要添加正确的 prop 类型，从 List 组件复制
import List from './List';
export default {
components: { List },
props: {
listType: {
type: String,
required: true,
},
listSize: {
type: String,
default: 'medium',
validator: size => [
'small',
'medium',
'large',
'x-large'
].includes(size),
},
listName: {
type: String,
default: 'list',
},
title: {
type: String,
required: true,
},
},
};
看下来，有没有觉得很麻烦？
当 List 组件的 prop 类型被更新时，我们肯定会忘记返回这个组件并更新它们。随着时间的推移，当该组件的 prop 类型开始偏离 List 组件中的 prop 类型时，就会引入错误。
因此，这就是为什么我们要窃取组件的 prop 类型，具体如下
import List from './List';
export default {
components: { List },
props: {
...List.props, // 窃取List的prop，不需要再重复累赘地一一列出
title: {
type: String,
required: true,
},
},
};
这样是不是简便了很多？
除了在上面的例子中，我们把 List 加在每个 prop 名称的开头。所以我们必须做一些额外的工作来实现这一点
import List from './List';
const listProps = {};
Object.entries(List.props).forEach((key, val) => {
listProps[list${key.toUpperCase()}] = val;
});
export default {
components: { List },
props: {
...listProps,
title: {
type: String,
required: true,
},
},
};
现在，如果 List 组件中的 prop 类型被修改，我们的组件将保持最新状态。但是，如果一个 prop 类型从 List 组件中被添加或删除了呢？为了应对这些情况，我们可以使用 v-bind 和一个计算的 prop 来保持动态。
11、检测元素外部(或内部)的单击
当我们需要检测一个点击是发生在一个特定元素 el 的内部还是外部，通常使用的方法
window.addEventListener('click', e => {
// 获取被点击的元素
const currtentEl = e.target;
// 检测在el元素的内部还是外部
if (el.contains(currtentEl)) {
// 在el里面点击了
} else {
// 在el外面点击了
}
});
12、从组件外部调用一个方法
我们可以从一个组件的外部通过给它一个 ref 用来调用一个方法
// 在该组件调用子组件的方法
this.$refs.child.method();
通常情况下，我们使用 props 和 events 在组件之间进行交流。props 被下发到子组件中，而 events 被上发到父组件中
// Child.vue
export default {
props: ['trigger'],
watch: {
shouldCallMethod(newVal) {
if (newVal) {
// Call the method when the trigger is set to true
this.method();
}
}
}
}
这可以正常工作，但只能在第一次调用时使用。如果您需要多次触发此操作，则必须进行清理并重置状态。逻辑如下
-
父组件将 true 传递给触发器 prop
-
Watch 被触发，然后 Child 组件调用该方法
-
子组件发出一个事件，告诉父组件该方法已被成功触发
-
Parent 组件将 trigger 重置为 false，所以我们可以从头再来一次
相反，如果我们在子组件上设置一个 ref，我们可以直接调用该方法（如最开始的方式），我们打破了 “props down, events up” 的规则，我们打破了封装，但是这样做更清晰，更容易理解。
13、监听数组和对象
有时候使用 watcher 不能正确触发，很多情况下是因为我们试图监听数组或对象，但没有将 deep 设置为 true
export default {
name: 'namesChange',
props: {
names: {
type: Array,
required: true,
},
},
watch: {
names: {
// 这将让 Vue 知道要在数组内部寻找，如不添加，则不能进行深度监听
deep: true,
handler(newVal,oldVal)
console.log('The list of names has changed!');
}
}
}
}
在vue3中使用
watch(
names,
(newVal,oldVal) => {
console.log('The list of names has changed!');
},
{
deep: true,
}
);
14、template 标签的另一个用途
template 标签可以在模板中的任何地方使用，以更好地组织代码。有时它来简化 v-if 逻辑，有时也用 v-for。如下，我们有几个元素都使用同一个 v-if 条件
