mez_Blog的博客

important>行内样式，当然了，上面的，a，b，c，也肯定不如它，一旦给某一个元素样式中书写了!important，就以它的样式为准！看【元素、伪元素】的个数，谁多就是谁的优先级高，如果个数还是相同，就遵循后来者居上原则（就是谁最后写就按照谁的样式）。首先，一旦出现行内样式，不管你上面的a,b,c的个数有多少个，都以行内样式为准，除非行内样式有的没有设置。当第一位a的数量相同时，比如都有1个选择器，那么就看下一位b的个数【类，伪类，属性】，其中b表示：一个选择器中【类，伪类，属性】选择器的个数。

混入（mixins）定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin对象的钩子将在组件自身钩子之前调用。比如，数据对象在内部会进行浅合并（一层属性深度），在和组件的数据发生冲突时以组件数据优先。以下实例中，Vue实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

【代码】封装Ajax。

例如，我们从/a导航到一个相对路径b，如果没有配置append，则路径为/b，如果配置了，则为/a/b。设置replace属性的话，当点击时，会调用router.replace()而不是router.push()，导航后不会留下history记录。当被点击后，内部会立刻把to的值传到router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。to属性为目标地址，即要显示的内容。以下实例中我们将Vue-router加进来，然后配置组件和路由映射，再告诉vue-router在哪里渲染他们。

typescript是JavaScript的一个超集，就是说JavaScript的语法typescript全部支持，并且在JavaScript进行了扩充，并在JavaScript的基础上进行了变量、函数、返回值等类型限制。在ts文件里，我们将a加入了类型注解:string表示为变量a的类型为字符串类型，如果我们改成其他类型，在ts文件里面就会报错。这里需要注意，虽然在ts文件中出现了报错信息，但是我们如果要强制进行编译执行，还是会生成js文件的。在vscode的控制台进行编译，生成了js文件。

例如在v-my-directive.foo.bar中，修饰对象为{foo:true,bar:true}。例如在v-my-directive：foo中，arg为“foo”。除了默认设置的核心指令（v-model和v-show），Vue也允许注册自定义指令。value：传递给指令的值。beforeUNmount：当指令与在绑定元素父组件卸载之前时，只调用一次。updated：在包含组件的VNode及其子组件的VNode更新后调用。unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

但是有时我们可能向把值绑定到当前活动实例的一个动态属性上，这时可以用v-bind实现，此外，使用v-bind可以将输入值绑定到非字符串。v-model会忽略所有表单的value、checked、selected属性的初始值，使用的是data选项中声明的初始值。我们可以用v-model指令在表单、及等元素上创建双向数据绑定。这通常很有用，因为在type=“number”时HTML中输入的值也总是返回字符串类型。记得在多选时按住Ctrl键，要不然还是单选。

Vue.js为v-on提供了事件修饰符来处理DOM事件细节，如:event.preventDefault()或event.stopPropagation()。我们可以使用v-on指令来监听DOM事件，从而执行JavaScript代码。v-on可以接收一个定义的方法来调用。.self--只监听触发该元素的事件。.prevent--阻止默认事件。.middle--中间滚轮事件。.capture--阻止捕获。.once--只触发一次。.right--右键事件。.stop--阻止冒泡。.left--左键事件。

这样写只会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display:flex。注意：当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。当我们在带有单个根元素的自定义组件上使用class属性，这些class将被添加到该元素中。如果你的组件有多个根元素，你需要定义哪部分将接收这个类。我们可以在v-bind:style直接设置样式，可以简写:style。也可以直接绑定到一个样式对象。

同时使用多个类，并存在多个相同属性时，不管是class，还是：class，都会显示最后那个重复属性的定义。class与style是HTML元素的属性，用于设置元素的样式，我们可以用v-bind来设置样式属性。v-bind在处理class和style时，表达式除了可以使用字符串外，还可以是对象或数组。这和前面写css的顺序有关，如果同时设置为TRUE，后写的css会遮盖先写的css属性。此外，:class指令也可以与普通的class属性共存。当同时设置为TRUE的时候，后面的红色也会遮盖前面的颜色。

异步数据的加载Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。我们可以通过watch来响应数据的变化。以下实例我们使用axios库。异步加载中使用watch。

我们可以用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。vm.reversedMessage依赖于vm.message，在vm.message发生改变时，vm.reversedMessage也会更新。可以说使用computed性能会更好，但是如果不希望缓存，我们可以使用methods属性。计算属性在处理一些复杂逻辑时是很有用的。这样就能正常显示了。

比如，如果你使用一个像webpack这样的构建系统，全局注册所有的组件意味着即使你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。全局注册的组件可以在随后创建的app示例模板中使用，也包括实例组件树中的所有子组件的模板中。为了定值prop的验证方式，我们可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。上面的示例中我们的组件都是通过component全局祖册的。

不自动将item注入到组件里的原因是，这会使得组件与v-for的运作紧密结合。v-for指令需要以site in sites形式的特殊语法，sites是源数据数组并且site是数组元素迭代的别名。我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。下面的script里面的内容相当于声明，在上面的HTML中可以不用，并不影响代码执行。这里的命名并不是固定的，但是比较规范的写法是左边为键key,右边为值value。v-for/v-if联合使用。

例子都不再换的，中间又添加了v-else-if项而已，这里只是seen不满足的情况，也就是不会有seen2,seen3.那我们来把对应的seen2或seen3设置为TRUE，那么其他的都是false喽。注意：当我们使用v-else时，都是放在最后一项用的，不要弄错v-else和v-else-if的顺序。编程这玩意就是要试着举一反三，同样的例子，我们再来看v-else-if,感觉和js或大部分的编程语言类似，只是前面多了v-而已。条件判断使用v-if指令，指令的表达式返回true时才会显示.

Swiper是一个免费且好用的轮播库，首先，我们进入中文swiper网进行下载。该实例使用Ajax调用图例来用swiper库显示在移动端或PC端。如果想理解某个参数的意义和具体用法，可以查看API文档。使用的时候想要哪种轮播效果可以查看官网的演示效果。我们直接查看网页源码，就能知道它是怎样实现的。下载到本地进行使用即可。

并且构建cssom树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的css选择器，执行速度越慢。HTML5现在已经不是SGML（标准通用标记语言）的子集，主要是关于图像，位置，存储，多任务等功能的增加。纯表现的元素：basefont，big，center，font，s，strike，tt，u。方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。段落用p标签，标题用h系列标签，边栏用aside标签，主要内容用main标签。

{{}}标签的内容将会被替代为对应组件实例中message属性的值，如果message属性的值发生了改变，{{}} 标签内容也会更新。如果不想改变标签的内容，可以通过使用v-once指令执行一次性地插值，当数据改变是，插值的内容不会更新。以上代码中如果isButtonDisabled的值是null或undefined，则disabled 属性甚至不会被包含在渲染出来的元素中。Vue的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

因为我们是用空白项目测试的，但是实际中还是要修改一下index.html中引入的css和JavaScript路径，因为是绝对路径，所以我们要改成相对路径。一个应用需要被挂载到一个dom元素中，以上代码使用mount('#hello-vue')将Vue应用HelloVueApp挂载到中。-p, --present《presentName》：忽略提示符并使用已保存的或远程的预设选项。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

("div#intro .head") id="intro" 的 元素中的所有 class="head" 的元素。$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性。还是把另外的方式贴出来吧。$("p.intro") 所有 class="intro" 的 元素。$("p.intro")选取所有class="intro"的元素。$("p#demo")选取所有id="demo"的元素。

4.时效限制：每个cookie都有时效，默认的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁，但是我们也可以在存储的时候手动设置cookie的过期时间。3.读取有域名限制：不可跨域读取，只能由来自写入cookie的同一域名可进行读取。简单的将就是，那个服务器发给你的cookie，只有哪个服务器有权利读取。5.路径限制：存cookie时候可以指定路径，只允许子路径读取外层cookie，外层不能读取内层。数量限制（一般浏览器，限制大概在50条左右）2.单条存储有大小限制4KB左右。

因为JSON语法由JavaScript对象标记法衍生而来，所以很少需要其他额外的软件来处理JavaScript中的JSON。在对衍生数组的JSON使用JSON.parse()后，此方法将返回JavaScript数组，而不是JavaScript对象。为什么使用JSON：因为JSON格式仅仅是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式。因此，如果以JSON格式从服务器接收数据，那么可以像JavaScript对象一样使用它。在JSON中，键必须是字符串，由双引号包围。

当设置为FALSE，表示同步请求，此时在onload代码执行完毕后才会执行console.log("123")。当设置为TRUE，表示异步请求，此时会先执行console.log("123")，然后执行onload。put 偏向更新（全部修改，覆盖数据）{name:"mez",age:12}下面我们就使用JSON文件简单用JSON-server模拟服务器端。patch 偏向部分修改(传递哪部分就修改哪部分)下载完毕后，双击默认点点点就可以安装。我们就可以看到我们写的JSON文件内容。get 偏向获取数据。

string（例如："hello"）、number(例如：3.2555)、Boolean（例如：TRUE）、null、undefined。对x的任何改变都将改变person，因为x和person是相同的对象。注意：键是一个对象（object），不是一个字符串（string）但是您无法改变3.14的值。JavaScript对象是易变的：他们通过引用来寻址，而非值。所有JavaScript值，除了原始值，都是对象。原始值是一成不变的（他们是硬编码的，因此不能改变）（3）定义对象构造器，然后创建构造类型的对象。

2.{}可以省略，只有一句代码的时候（只有返回值）（1）const定义的是常量，let定义的是变量。1.（）可以省略，但是在只有一个形参参数的情况下。（3）let是块级作用域，而var的作用域更广。（1）let不能在未定义前使用，var可以。（2）let不能重复定义，var可以。const也和var有这三点的不同。箭头函数this是父级作用域的。4.箭头函数没有this，const和let的区别。第一种：call（）第二种：apply（）第三种：bind（）let和var的区别。

现模拟win11的右项选项卡。

该方法不支持IE(6,7,8)低版本浏览器，对应的IE浏览器使用obox.currentStyle.backgroundColor。对于所有样式的万能方法（但是不能给样式赋值）操作元素样式【行内】（可以进行读写操作）

当是rotateZ时，若旋转角度为正，如图所示，为视觉界面方向的顺时针旋转。当是rotateZ时，若旋转角度为负，如图所示，为视觉界面方向的逆时针旋转。当是rotateX时，若旋转角度为正，如图所示，为竖直方向的逆时针旋转。当是rotateX时，若旋转角度为负，如图所示，为竖直方向的顺时针旋转。当是rotateY时，若旋转角度为正，如图所示，为水平方向的逆时针旋转。当是rotateY时，若旋转角度为负，如图所示，为水平方向的顺时针旋转。scaleZ()在使用时必须加上景深。

translateX(-100%)里面的100%是相对于自身的100%animation拆分成单一属性。用animation做轮播图示例。让动画停留在最后状态。

rotateX，rotateY为三维轴中的X轴和Y轴进行旋转。面试题：为什么用translate而不用left。translate支持在GPU上独立渲染。正值为顺时针旋转，负值为逆时针旋转。

注意：并不是所有的属性都能实现过渡效果的，除了display:none/block;::before,::after均属于伪元素。动画过渡（高度变化，持续时间，动画效果，延迟）观察多个值（所有属性，持续时间，动画效果）

怪异盒模型不会因为元素设置了边距，padding，margin，border而扩大整体元素的大小，而是进行内缩，整体元素大小并不会改变。在有滚动条时，vw占满整个窗口，包括滚动条的空间；而100%是除了滚动条外，占满剩余的空间。rem:相对单位，相对于根元素（HTML）字体大小, div width:10rem；to left/to right 还可以两两组合：例如左上，右下，左下，右上。em:相对单位，相对于父元素的字体大小。100vw是屏幕的宽，100vh是屏幕的高。-moz-是火狐浏览器。

【代码】HTML5学习笔记(1.0)