Vue
-
什么是MVVM？
-
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
-
组件之间的传值？
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用？
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用？
-
Vue 的 nextTick 的原理是什么？
-
Vuex 有哪几种属性?
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
font-size: 16px;
color: gray;
text-decoration: none; /* 清除链接默认的下划线*/
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
「6. 结构(位置)伪类选择器（CSS3)」
-
:first-child :选取属于其父元素的首个子元素的指定选择器
-
:last-child :选取属于其父元素的最后一个子元素的指定选择器
-
:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
-
:nth-of-type(n)： 简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。
-
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
nth-child介绍
nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。
使用它的时候需要注意几点：
-
第n个子元素的计数是从1开始，不是从0开始的
-
选择表达式中的字母n代表≥0的整数
它有3种常见用法
-
直接指明n的值：span:nth-child(1)
-
用even/odd分别代表偶数 / 奇数：span:nth-child(even)
-
借助n自定义选择范围：
-
nth-child(2n)/nth-child(2n + 1)：偶数 / 奇数
-
nth-child(n + 3)：第3个开始到最后
进阶用法
上面的用法中的第三部分，一般都是使用n，而有时候也会用到-n，比如选取前2个元素就是：nth-child(-n + 2)。
为什么是这样呢？其实运算：-n + 2 ≥ 0，就可以推出n ≤ 2。 由此，结合两者自动取交集，我们就可以限制选择某一范围。
比如选择第6个到第9个，就是：:nth-child(-n+9):nth-child(n+6) 注意：不是nth-child(2 - n)，-n要写在一起！ 真正理解“子元素”的含义 还是nth-child选择器，那么下面这段代码的样式是什么呢？
1
2
3
答案是：1是黑色的，2和3都是红色的。
因为<span>2</span>是其父节点的第2个（偶数）子元素,<span>3</span>是其父节点的第2个子元素，第一个是<div></div>
所以辨别是否匹配的关键是：找到父元素，然后再计算在父元素中的位置。
nth-of-type与nth-child的区别
nth-of-child：
它的属性就是按照所有类型标签的所谓整体队列进行排序筛选，也就是说不论你是h1，span还是p标签，使用这个属性你要遵循在DOM树中的顺序来进行操作。
nth-of-type:
简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。就是按照类型来计算，碰到一个同类型就加1。
「7. 目标伪类选择器(CSS3)」
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
:target {
color: red;
font-size: 30px;
}
「8. 复合选择器总结」
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| :-- | :-- | :-- | :-- | :-- |
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
| 选择器 | 含义 |
| — | — |
| E[attr] | 存在attr属性即可 |
| E[attr|=val] | 选择attr属性的值是 val 或值以 val- 开头的元素 |
| E[attr=val] | 属性值完全等于val |
| E[attr^=val] | 属性值里面包含val字符并且在“开始”位置 |
| E[attr$=val] | 属性值里面包含val字符并且在“结束”位置 |
| E[attr*=val] | 属性值里面包含val字符并且在“任意”位置 |
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[classKaTeX parse error: Expected '}', got 'EOF' at end of input: …er] { /* class=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
存在和值（Presence and value）属性选择器节
这些属性选择器尝试匹配精确的属性值：
-
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
-
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
-
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
让我们看一个特别的例子，下面是它的的HTML代码：
我的食谱配料: Poulet basquaise
- Tomatoes
- Onions
- Garlic
- Red pepper
- Chicken
- Bacon bits
- Olive oil
- White wine
和一个简单的样式表：
/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
[data-vegetable] {
color: green
}
/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
[data-vegetable=“liquid”] {
background-color: goldenrod;
}
/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，
即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */
[data-vegetable~=“spicy”] {
color: red;
}
伪元素选择器（CSS3)
E::first-letter
文本的第一个单词或字（如中文、日文、韩文等）
E::first-line
文本第一行；
Vue
-
什么是MVVM？
-
mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
-
组件之间的传值？
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用？
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用？
-
Vue 的 nextTick 的原理是什么？
-
Vuex 有哪几种属性?
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
