Vue 学习笔记（三）条件渲染
条件渲染语句
v-if、v-else-if、v-else、v-show、v-for。
一、条件判断语句
v-if、v-else-if、v-else。
v-if
v-if指令用于条件性地渲染一块内容。
这块内容只有当指令的表达式返回true值的时候被渲染。
1<h1 v-if="awesome">Vue is awesome!</h1>
v-else
与v-if联合使用。
123456<div v-if="Math.random() > 0.5"> Now you see me</div><div v-else> Now you don't</div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
123456789101112<div v-if=" ...
Vue 学习笔记（二）Vue生命周期
基本内容和图解
VUE生命周期共分为八个阶段：
创建前/后、载入前/后、更新前/后、销毁前/后。
创建前/后 :
在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。
在created阶段，vue实例的数据data有了，el还没有
载入前/后：
在beforeMount阶段，vue实例的$el和data都初始化了,但还没有挂载之前都是虚拟的demo阶段,data.message还未替换。
在mounted阶段,vue实例挂载完后,data.message成功渲染.
更新前/后：
当data变化时,户触发beforeUpdate和update方法。
销毁前/后：
在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经结束了事件监听以及和dom的绑定，但是dom结构依然存在。
面试题1、什么是vue生命周期？vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。 ...
Vue 学习笔记（一）MVVM模式
一、什么是MVVM
MVVM是一种架构设计模式，是一种简化用户界面的事件驱动编程方式。
MVVM源自于MVC模式。
MVVM的核心是ViewModel层：
该层向上与视图层进行双向数据绑定；
向下与Model层通过接口请求进行数据交互。
二、MVVM的优点和好处
MVVM模式和MVC模式一样，主要目的是分离视图和模型。
低耦合、可复用、独立开发、可测试。
三、MVVM的组成部分
视图层：用户界面，主要是HTML、CSS、Template；
ViewModel：JavaScript、Runtime、Compiler（核心枢纽）；
Model：指数据模型，泛指后端进行各种业务逻辑处理和数据操控，主要围绕数据库系统展开。
ViewModel所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的。
比如页面的这一块展示什么，那一块展示什么这些都属于视图状态；
页面加载进来发生什么。点击这一块发生什么，这一块滚动时发生什么都属于视图行为。
开发者只需要处理和维护ViewModel，更新数据视图就会自动得到响应更新，真正实现事件驱动。
View ...
CSS学习笔记（十三）结构与布局
自适应内部元素
关键字：min-content
将解析为这个容器内部最大的不可断行元素的宽度
把 figure 设置为恰当的宽度，并让它水平居中。
1234figure { width: min-content; margin: auto;}
精确控制表格列宽
对于不固定的内容，表格布局很难预测。
table-layout属性：
默认值是 auto，其行为模式被称作自动表格布局算法。
接受另外一个值fixed，这个值的行为要明显可控一些。它把更多的控制权交给了网页开发者。
1234table { table-layout: fixed; width: 100%;}
根据兄弟元素的数量来设置样式
在某些场景下，我们需要根据兄弟元素的总数来为它们设置样式。
对于只有一个列表项的特殊场景来说，解决方案显然就是 :only-child。
:only-child 等效于 :first-child:last-child。123li:only-child { /* 只有一个列表项时的样式 */} ...
CSS学习笔记（十二）用户体验（一）
二十九、选用合适的鼠标光标
鼠标指针的用途不仅在于显示鼠标在屏幕上的位置，还可以告诉用户当前可以执行什么动作。
1、提示禁用状态
提示某个控件因为某些原因而变得无法交互（即控件已被禁用），用这个光标就再合适不过。
123:disabled, [disabled], [aria-disabled="true"] { cursor: not-allowed;}
2、隐藏鼠标光标1234video { cursor: url(transparent.gif); cursor: none;}
三十、扩大可点击区域
针对按钮或者选择框扩大可点击区域，提高用户体验感。
使用内嵌投影+外边框实现。
12345button { border: 10px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; background-clip: padding-box;}
box-shadow 可以同时指 ...
CSS学习笔记（十一）字体排印（二）
二十三、调整tab的宽度问题提出
由于tab导致文本间间隙过大进而影响视觉效果。
解决方案
tab-size属性：
接受一个数字（表示字符数）或者一个长度值。
通常希望把它设置为 4（表示 4 个字符的宽度）或2。123pre { tab-size: 2;}
视觉效果对比：
二十四、连字问题提出
由于字形间的相互影响，导致字形模糊不清。
解决方案
font-variant-ligatures属性：
该属性专门用来控制连字效果的开启和关闭。
如果要启用所有可能的连字，需要同时指定这三个标识符。
如果要把 font-variant-ligatures 属性复位为初始值，应该使用 normal 而不是 none。
12345div{ font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;}
二十五、华丽的&符号
通过@font-face规则实现基本的字体嵌入。
无 ...
CSS学习笔记（十）字体排印（一）
二十、连字符断行
在对文本进行两端对齐处理时，需要调整单词的间距，此时会出现“单词孤岛”现象。这个结果不仅看起来很糟糕，而且损伤了可读性。
123a { text-align: justify;}
解决方案：
hyphens属性：接受三个值none、manual、auto。
默认值为manual。
123a { hyphens: auto;}
二十一、插入换行
由于<dt>、<dd>都是块级元素，当我们需要指定其在一行时会造成困难，如下所示：
我们需要创建以下格式列表：
应用如下代码和样式，会得到这样的效果。
12345678<dl> <dt>Name:</dt> <dd>Lea Verou</dd> <dt>Email:</dt> <dd>lea@verou.me</dd> <dt>Location:</dt> < ...
CSS学习笔记（九）视觉效果
十五、单侧投影
使用 box-shadow 的方法是，指定三个长度值和一个颜色值：
123div{ box-shadow: 2px 3px 4px rgba(0,0,0,.5);}
box-shadow绘制原理：
以选定的元素a为准，在相同的位置处绘制尺寸相同的元素b（a，b颜色不同）；
将元素b进行移动，移动大小由参数决定（第一二个参数）；
使用高斯模糊算法进行模糊处理（第三个参数决定）；
模糊后的元素b与元素a交集的部分会被切除掉。
如何只在元素的一侧设置投影。
box-shadow的第四个长度参数，这个参数会根据你指定的值去扩大或缩小投影的尺寸
123div{ box-shadow: 0 5px 4px -4px black;}
邻边投影
如何在元素的两条边上设置投影。
扩张半径应该设为模糊半径相反值的一半。
两个偏移量它们的值需要大于或等于模糊半径的一半。
123div{ box-shadow: 3px 3px 6px -3px black;}
双侧投影
将投影设置在元素的两 ...
CSS学习笔记（八）形状（四）
十三、梯形标签页
在 CSS 中用 3D 旋转来模拟出这个效果。
123div{ transform: perspective(.5em) rotateX(5deg);}
对元素使用了 3D 变形之后，其内部的变形效应是“不可逆转”的。
所以唯一可行的途径就是把变形效果作用在伪元素上。
12345678910111213141516.tab { position: relative; display: inline-block; padding: .5em 1em .35em; color: white;}.tab::before { content: ''; /* 用伪元素来生成一个矩形 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: scaleY(1.3) perspective(.5 ...
CSS学习笔记（七）形状（三）
十二、切角效果
使用渐变来达到目的。
一个角使用一层渐变，两个角使用两层渐变，以此类推。
12345div{ background: #58a; background: linear-gradient(-45deg, transparent 15px, #58a 0);}
左下角和右下角的切角效果。
12345678div{ background: #58a; background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left; background-size: 50% 100%; background-repeat: no-repeat;}
四个角都切。
12345678910div{ background: #58a; background: ...
