web基础

1、display:inline-block; 这段代码其实就是将原来的块元素转化为一个块内元素，从而能够控制高度、宽度等特性。这段代码用于设置元素的显示方式。之所以要这样进行转换，原因是：只有块元素才可以设置width和height，行内元素是无法设置width和height的。

2、大家一定要搞清楚，背景图片跟普通图片（即img标签）是不同的东西！width和height这两个属性只能用来定义img标签图片的大小，是不能用于控制背景图片的大小。

3、浮动的盒子可以直接给大小，无需进行转换

4、当父元素的高度未定义时，它的高度将由其内容决定。浮动元素会从正常的文档流中脱离，并且不会对父元素的高度产生影响。因此，无论你如何设置浮动子元素的 margin 值，它们都不会影响到父元素的布局。

这是因为浮动元素被视为一种”非替代性元素”，它们不占据文档流中的空间位置。相反，它们会漂浮在普通流的上层，并且允许其他元素在其周围进行布局。

要解决这个问题，你可以尝试以下方法之一：

清除浮动：在父元素的 CSS 样式中添加一个额外的属性 overflow: auto 或 overflow: hidden，这将触发 BFC（块级格式化上下文），使父元素包裹浮动子元素。

5、 当用浮动去处理元素的位置不够时，将父元素的宽度搞大一些就可以了

6、text-align是让文字在页面中居中（包括文字内容、行内块、行内元素都可以居中对齐 ）

7、可以用display：inline-block将相应的块元素转化为行内元素来进行内容的居中

8、document.write()这个方法本身就是用来输出一个字符串的。

9、Javascript中的加法运算符有一点需要注意的是：其字符串 + 数字 = 字符串。

10、在实际开发中，如果想要将数字转换为字符串来用，我们很少使用toString()方法，而更多使用隐式类型转换的方式（也就是直接跟一个字符串相加）就行了。

11、实际上，JavaScript中的转义字符很多，但是我们只需要记住上面3种就可以了。此外还需要特别说明一下，对于字符串的换行，有以下2种情况。

  • （1）如果是在document.write()中换行，则应该用：

  • （2）如果是在alert()中换行，则应该用：\n

12、’\n’是转义字符，一般用于对话框文本的换行。alert如果用的话，就无法实现了。

13、Javascript中函数的调用可以在a链接中进行调用

14、在JavaScript中，我们可以使用split()方法把一个字符串分割成一个数组，这个数组存放的是原来字符串的所有字符片段。有多少个片段，数组元素个数就是多少。

15、str.split(“”)（无空格）是一个带有0个字符的字符串，也叫空字符串。

16、实际上，split()方法有两个参数：第1个参数表示分割符；第2个参数表示获取分割之后截取的前n个元素。不过第2个参数我们很少用，了解一下即可。

17、在JavaScript中，我们可以使用new关键字来创建一个数组。创建数组，常见的有两种形式：一种是“完整形式”；另外一种是“简写形式”。

18、在实际开发中，我们更倾向于使用简写形式来创建一个数组：

var arr = [];                //创建一个空数组
var arr = ["HTML","CSS", "JavaScript"];   //创建一个包含3个元素的数组

19、其实一个数组是可以存储“不同数据类型”的数据的，只不过我们极少那样做。一般情况下，都是用数组来存储“相同数据类型”的数据，所以这样理解就可以了。

20、有人会问，像上面这个例子，我们也可以使用arr[2]=”JavaScript”以及arr[3]=”jQuery”来在数组结尾来添加新的元素，这是不是意味着push()没太多存在的意义呢？其实不是这样的。当我们不知道数组有多少个元素的时候，我们就没法用下标这种方式来给数组添加新元素。此时，push()方法就相当有用了，因为它不需要知道你有多少个元素，它的目的就是在你数组的最后面添加新元素。

21、注意，getElementById()方法中的id是不需要加上井号（#）的，如果你写成getElementById(”#div1”)就是错的。

22、getElementsByTagName()方法中“elements”是一个复数，写的时候别漏掉了“s”。这是因为getElementsByTagName()获取的是多个元素（即集合），而getElementById()获取的仅仅是一个元素。

23、事实上，这是不一样的。document.getElementsByTagName(“li”)获取的是“整个HTML页面”所有的li元素，而oUl.getElementsByTagName(“li”)获取的仅仅是“id为list的ul元素”下所有li元素。

24、记住，类数组只能用到两点：length属性；下标形式。

25、oLi[i].innerHTML ——进行插入处理

26、在多年以前的JavaScript开发中，查找元素是开发人员遇到的最头疼的问题。遥想当年，“程序猿”们一边擦着眼泪，一边憧憬着：“要是JavaScript也有一套类似于CSS选择器的东西，我宁愿不要女朋友！”然而这个梦想现在已经实现了，而大家却反悔了！——这里的CSS选择器指的是querySelector()和querySelectorAll()

27、getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。

getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

28、A.appendChild(B)表示把B插入到A内部中去，也就是使得B成为A的子节点。

29、在DOM中，每一个元素节点都被看成是一个对象。既然是对象，我们就可以像给对象属性赋值那样，给元素的属性进行赋值。例如想给添加一个id属性，就可以这样写：oInput.id = “submit”。想要添加一个type属性，就可以这样写：oInput.type=“button”，以此类推。

30、在操作动态DOM时，设置元素class用的是className而不是class，这是初学者最容易忽略的地方。

31、HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。

32、文本框中浏览器会自动的给相应节点加上value属性的

33、getElementsByName()只限用于表单元素，它获取的也是一个元素集合，也就是类数组。

34、在JavaScript中，我们可以使用getAttribute()方法来获取元素的某个属性的值。

35、在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性来添加的。

36、上面已经把CSS属性操作介绍得差不多了，不过还剩下最后一个问题，那就是：获取CSS属性值，不可以用obj.style.attr或obj.style.cssText吗？为什么一定要用getComputedStyle()呢？对于这个疑问，我们可以先用例子试一下嘛。

37、当我们点击按钮后，会发现对话框的内容是空的，也就是没有获取成功。为什么呢？其实我们都知道，obj.style.attr只可以获取元素style属性中设置的CSS属性，对于内部样式或者外部样式，它是没办法获取的。请看下面例子。

38、使用style对象来设置样式时，为什么我们不能使用background-color这种写法，而必须使用backgroundColor”这种骆驼峰型写法呢？

大家别忘了，在obj.style.backgroundColor中，backgroundColor其实也是一个变量，变量中是不允许出现中划线的，因为中划线在JavaScript中是减号的意思。

39、在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

40、在JavaScript中，onbeforeunload表示离开页面之前触发的一个事件。

41、在前面的学习中，如果想要给元素添加一个事件，我们都是通过操作HTML属性的方式来实现，这种方式其实也叫“事件处理器”。

从上面也可以看出来了，事件处理器是没办法为一个元素添加多个相同事件的。

我们可以使用事件监听器这种方式来为同一个元素添加多个相同的事件，而这一点是事件处理器做不到的。

42、如果想要为一个元素添加多个相同的事件，该如何实现呢？这就需要用到另外一种添加事件的方式了，那就是——事件监听器。

43、在JavaScript中，我们可以使用removeEventListener()方法为元素解绑（或解除）某个事件。解绑事件与绑定事件是相反的操作。

对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。

44、在JavaScript中，我们可以通过event对象来获取一个事件的详细信息。这里只是介绍一下常用的属性，更深入的内容我们在JavaScript进阶中再详细讲解。其中event对象常用属性如表所示

45、几乎所有的初学者（包括当年的我）都会有一个疑问：“这个e是什么？为什么写个e.type就可以获取到事件的类型呢？”

实际上，每次调用一个事件的时候，JavaScript都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。一般来说，event对象是作为事件函数的第1个参数传入的。

46、之前接触过不少初学者，很多人都容易搞混这两个写法，如写成setTimeout(alertMes(), 2000)或者setTimeout(“alertMes”, 2000)，我们一定要注意这一点。一般情况下，我们只需要掌握setTimeout(alertMes, 2000)这一种写法就可以了，原因有2个：一是这种写法性能更高；二是可以避免两种写法造成记忆混乱。

47、从上一章中我们知道，document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。事实上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，然后我们就可以通过document对象来操作页面中所有的元素了。

ECMAScricpt6

1、注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。

2、上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

Vuex

1、vuex中state数据的修改只能通过mutations来进行修改，其步骤是：一：定义mutations对象，对象中存放修改state的方法，然后组件中提交调用mutations：this.$store.commit(“addCount”)

2、this.$store.commit(“addCount”)带参数的形式是：this.$store.commit(“addCount”,参数)

3、actions，用于处理异步操作

4、在Vue.js中，this.$route.params是一个对象，它包含了当前路由的参数。当你在路由路径中定义了动态参数时，比如/user/:userId，你可以通过this.$route.params.userId来访问userId这个参数的值。

举个例子，如果你的路由路径是/user/123，那this.$route.params.userId的值就是123。

你可以在Vue组件使用this.$route.params来获取路由参数，并根据参数的进行相应的操作。

Vue3小兔鲜

1、ref的使用：

// 1、导入ref函数

<script>

import {ref} from 'vue'
//2、执行函数 传入参数[简单类型 + 对象类型] 变量接收
const count = ref(0)
const setCount = ()=>{
  // 脚本区域修改ref产生的的响应式对象数据 必须通过.value属性
  count.value++
}
</script>

<template>
  <div>
   <button @click="setCount">{{ count }}</button>
  </div>
</template>

2、watch的使用：

ref对象不用加.value

3、路由参数变化的时候，可以把分类数据接口重新发送（以下这样做的缘由其实就是route.params.id并不是与路由实时同步的，存在滞后性，所以要用to来实时的接收对象，并给发送请求数据的函数进行to传参）

onBeforeRouteUpdate((to)=>{

  console.log(to)  // 这里的to其实就是一个对象了，你会发现to就是最新请求到的路由路径

})

4、路由缓存问题产生的原因是什么？

路由只有参数变化时，会复用组件实例

5、模板字符串

模板字符串其实就是允许嵌入表达式的字符串（可以使用多行字符串和字符串插值功能）

6、vue中的可选链

根据黑马的演示是/category/sub/${goods.categories?.[0].id}，在这个例子中，只有当good.categories有值才可以进行后续的路由的拼接