苏凉.py的博客

与reactive函数一样，watch同样在vue3中也是一个暴露出来的函数。在setup中直接调用即可；watch可以接收三个参数：第一个参数：要监听的数据第二个参数：回调函数，接收两个参数，一个为监听的数据的新值，一个为旧值。第三个函数：配置是否进行立即监听/深度监听。

且该promise对象的状态为pending，then方法为一个同步操作，then中的函数参数为异步操作。在该操作中，如果promise对象的状态不改变则不会执行then方法中的函数。总结：promise的状态用来判断then方法执行成功或是失败的函数，promise的结果则是作为实参传递给then方法的函数参数的形参。如上图我们就可以看到then方法的返回值仍然为一个promise对象，且在刚生成该对象时的状态为pending。promise的结果是通过传递resolve/reject的参数来获得的。

v-if配合template标签来使用，template不显示在也买你中，可与v-if来使用控制一整个模块的显示和隐藏。备注:使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。3.可遍历:数组、对象、字符串（用的很少)、指定次数（用的很少)特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。//阻止vue在启动时生成生产提示。适用于:切换频率较高的场景。v-if="表达式"1.用于展示列表数据。...

/获取按钮和divletbtn=document.getElementById('bt1');//给按钮绑定单击响应函数btn.addEventListener('click',()=>{//一项一项修改box.style.height=300+'px';});实际上，当我们使用这种方法时，浏览器会对其样式进行一次又一次的渲染。即渲染多次之后得到最后样式，那么，如何只让浏览器渲染一次就得到该效果呢？下面我们就一起来看看如何操作吧。="".........

我们可以利用它的一些方法，将json转换为js对象，也可以将js对象转换为json。将一个json字符串作为参数，可以将对于json字符串转换为js对象。将一个js对象作为参数，可以将对于js对象转换为json。该方法具有返回值，返回的是一个字符串（String）。该方法具有返回值，返回的是一个对象（object）。在js中为我们提供了一个工具类JSON。就是一个json对象。...............

/案例一namereturn{nextvaluefalse};index++;}else{return{valuetrue}};}};//案例二num['xiaoming','gala','xiaohu','wei','breath'],//自定义迭代器[Symbol.iterator](){return{next()=>{valuefalse};}else{return{

箭头函数，模块化字符串，简化对象写法

ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript,是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性let关键字与var关键字一样是用于声明变量的，只不过与var有以下不同之处：在es6中let关键字不允许重复声明变量，如下图所示就会报错：块级作用域使用let在代码块中声明变量时，只在代码块中生效。不存在变量提升使用var关键字定义一个变量时，可以在定义变量之前输出该变量，数据类型为未定义，但使用let关键字定义变量时，不允许

当触发我们的事件函数时，事件函数其实会接收到一个event对象。当我们在我们的事件函数中执行event.stopPropagation()方法，那么事件冒泡到此就结束了。并不是所有类型的事件都支持事件冒泡。事件冒泡只会触发相同类型的事件函数。阻止冒泡事件有两种方法，其中一个为属性，另一个为方法。设置或返回事件是否应该向上层级进行传播。防止事件在事件流中进一步传播。实例：为3个互为父子的对象绑定单击响应函数。给box阻止冒泡：委派事件当我们有一堆子标签有相同的事件时，可以通过遍历子标签为其添加事件，但

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如:鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向…案例：当鼠标移动时返回鼠标当前坐标常见的鼠标事件属性和方法大家可以挨个去试试。参考文档：HTML DOM 事件...

在上几期都是说通过DOM来操作元素。现在我们具体说一下怎样操作CSS样式，无非就是修改样式和查找样式。html：css：javascript：注意：css样式名中有号，在js中是不合规范的，比如这里的,在js中需要用驼峰命名法表示，即来表示。修改其他属性也是如此。我们通过这种方式实际上是对内联样式进行修改，而内联样式的优先级是大于样式表的样式的，因此，此方法会直接覆盖掉样式表的样式。javascript：直接获取样式值。缺点：这种方法只能获取到css的内联样式，获取不到样式表中的样式。如图：此方

DOM增删改！！

在上几期我们说了DOM查询的操作，下面我们来一起看看DOM的增删改。将新的子节点添加到指定节点

获取body标签有两种方法，以下两种方法都等效。document.getElementsByTagName(‘body’)[0]获取html根标签获取html标签同样有两种方法，以下两种方法都等效。document.getElementsByTagName(‘html’)[0]获取所有元素获取当前页面下的所有元素标签。注意：查询class属性标签时，查询结果是一个类数组对象。获取页面中的divdocument.querySelector需要一个选择器的字符串作为参数，可以根据一个CS

通过上期【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）再接一个全选小练习。代码：

DOM查询！

DOM简介以及两个DOM查询案例详解！

在js中使用对象表示时间直接使用构造函数创建一个时间对象，则返回的是当前代码执行的时间。创建一个自定义时间对象要创建一个自定义时间对象时，需要在构造函数中传递一个时间字符串做为参数。日期格式为：Date方法getDate() 获取天返回当前Date对象中的一个月的第几天。getDay() 获取周几返回当前Date对象中的星期几。注意：当时间为周日时返回0。即1-6表示周一到周六，0表示周日。getMonth() 获取月份返回当前Date对象中的月份。注意：返回月份时返回的数在0-11

在调用函数时，浏览器每次都会传递进两个隐含的参数:在调用函数时，我们所传递的实参都会在arguments中保存可以用来获取实参的长度我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦arguments[0]表示第一个实参arguments[1]表示第二个实参…它里边有一个属性叫做,这个属性对应一个函数对象，就是当前正在指向的函数的对象。......

改变this指向的三个方法

上节我们说到遍历数组的方法，使用for循环进行遍历，其实在js中还有另外l两种方法可以将我们的数组更快的遍历出来，那就是方法和方法。下面我们一起看看如何使用吧。forEach()方法需要一个函数作为参数第一个参数 - 当前正在遍历的元素第二个参数 - 当前正在遍历的元素的索引第三个参数 - 正在遍历的数组同样的map方法和forEach方法一样，需要用到一个函数作为参数。该函数作为回调函数，同样该回调函数中传递三个参数。第一个参数 - 当前正在遍历的元素第二个参数 - 当前正在遍历的元素的索引

使用检查数组对象时返回。1.直接添加2.按照索引添加(将元素添加到哪个位置)这里值得注意的是，如果按照索引添加元素，数组的长度是按照的添加的最大索引来计算的。读取数组元素是一个返回值，需要变量去接收或者直接输出。1.直接读取，即读取整个数组内的元素。2.读取数组中的某个元素。3.当读取一个不存在的元素时，返回undefined。length属性可以设置/返回数组长度。补充小技巧：可以利用length属性向数组的最后一个位置添加元素。 方法用于连接两个或多个数组。 方法用于把数组中的所有元素转换一个字符串

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以设置flex的基本概念如下图所示，采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。比如box它的所有子元素自动成为容器成员，称为Flex项目（flex item）比如box1，box2和box3，简称”项目”。示例：未设置flex布局时，呈竖直排列。设置flex布局后，默认沿主轴方向排列。flex容器有6个属性

2.使用new关键字3.使用工厂模式4.使用构造函数运行结果：

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。我们所创建的每一个函数，解析器都会向函数中添加一个属性，这个属性对应着一个对象，这个对象就是我们所谓的原型对象在如下图所示中，创建一个构造函数Person，这个构造函数中有一个隐含的属性prototype，这个属性指向的对象就是原型对象，它的内存地址假设为0x123，则该构造函数对应的prototype属性则指向这个内存地址，随后通过构造函数创建一个实例per，我们可以使用来访问构造函数中的原型对象，在该实例中添加

JavaScript 构造函数(Constructor)也称为构造器、类型函数,功能类似对象模板,一个构造函数可以生成任意多个实例,实例对象具有相同的属性、行为特征,但不相等。使用构造函数可以创建不同类的对象。构造函数就是一个普通的函数。创建方式和昔通函数没有区别,不同的是构造函数习惯上首字母大写构造函数和普通函数的区别就是调用方式的不同三种形式this的指向情况。使用同一个构造函数创建的对象,我们称为一类对象，也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象,称为是该类的实例。就上述而言Ob

工厂模式是另外一种关注对象创建概念的创建模式。它的领域中同其它模式的不同之处在于它并没有明确要求我们使用一个构造器。取而代之，一个工厂能提供一个创建对象的公共接口，我们可以在其中指定我们希望被创建的工厂对象的类型。当被应用到下面的场景中时，工厂模式特别有用：当被应用到错误的问题类型上时，这一模式会给应用程序引入大量不必要的复杂性，除非为创建对象提供一个接口是我们编写的库或者框架的一个设计上目标，否则我会建议使用明确的构造器，以避免不必要的开销。由于对象的创建过程被高效的抽象在一个接口后面的事实，这也会给依赖

解析器在调用函数每次都会向函数内部传递一个隐含的参数,这个隐含的参数就是this.this指向的是一个对象,这个对象我们称为函数执行的上下文对象。根据函数的调用方式的不同,this会指向不同的对象以函数的形式调用时,this永远都是window以方法的形式调用时,this就是调用方法的那个对象...

函数（）在JavaScript中有三种方法来创建函数其中第一种方法在实际使用中并不常用。创建函数之后需调用函数才可执行函数体内的代码。函数的调用：使用new关键字创建一个函数，将要封装的功能（代码）以字符串的形式传递给封装函数，在调用函数时，封装的功能（代码）会按照顺序执行。用函数声明显而易见的要简便许多，小括号中的形参视情况而写，语句写在中括号内。与构造函数不同的是不需要以字符串的形式写入。函数表达式和函数声明的方式创建函数的方法相似，不同的是用函数表达式创建函数是将一个匿名函数赋值给一个变量，同时在语

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。在上一节我们说到JavaScript中有许多数据类型，有基本数据类型和引用数据类型，在这里我可以理解为只要不是基本数据类型，都属于对象。由ES标准中定义的对象,在任何的ES的实现中都可以使用。由刀S的运行环境提供的对象,目前来讲主要指由浏览器提供的对象比如BOM，DOM有开发人员自己创建的对象。直接创建操作对象中的属性添加和修改属性删除一个属性查找对象属性值使用这种形式去操作属性，更加的灵.........

display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。下面我们来看看display的属性有哪些吧。比如：b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea等。内联元素特点：和其他元素都在一行上；宽高只与内

JS中的程序是从上到下一行一行执行的，通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行。使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行。注意：在条件表达式中判断为true才会执行后面的语句。含有多个条件表达式时用与运算符连接。语法一：语法二：语法三：判断三数大小。在javascript中可以用prompt函数来输入内容，调用此函数，会在浏览器中弹出一个输入框输入内容。默认输入为字符串！！！效果：switch. …case

🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）🐳博客主页：苏凉.py的博客🌐系列专栏：web前端基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录字面量变量声明,赋值变量标识符JavaScript数据类型字面量一些不可以改变的值，可以直接使用。但不建议使用。一般赋值给变量后引用。变量可以改变的值。变量可以用来保存字面量,而且变量的值是可以任意改变的，变量更加方便我们使用，所以在开发中..

🐚作者简介：苏凉（专注于网络爬虫，数据分析）🐳博客主页：苏凉.py的博客🌐系列专栏：web前端基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录JavaScript简介起源简史时间表实现JavaScript的特点JavaScript的输出提示框输出alert页面输出document.write控制台输出console.logJavaScript的书写位置写在标签属性中（不推荐）写在script标签中Java..

🐚作者简介：苏凉（专注于网络爬虫，数据分析）🐳博客主页：苏凉.py的博客🌐系列专栏：web前端基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录css边框属性css边框样式边框宽度圆角边框css所有边框属性css边框属性css的border属性允许您指定元素边框的样式、宽度和颜色。css边框样式border-style 属性指定要显示的边框类型。可以同时设置一到四个值（顺序为上边框、右边框、下边框和左..

🐚作者简介：苏凉（专注于网络爬虫，数据分析）🐳博客主页：苏凉.py的博客🌐系列专栏：web前端基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录前言css伪类选择器:active:link和:visited:hover伪类选择器合集css伪元素选择器伪元素合集::after和::before::first-letter::first-line::selection小结前言上期给大家讲了css的一些选择器的..

🐚作者简介：苏凉（专注于网络爬虫，数据分析）🐳博客主页：苏凉.py的博客🌐系列专栏：web前端基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录写在前面什么是csscss语法css选择器css-元素选择器css-id选择器(#)css-类选择器(.)css-通用选择器(*)css-分组选择器css-组合器选择器后代选择器（空格）子选择器（>）相邻兄弟选择器（+）通用兄弟选择器（~）css-伪类选择器cs..

🐚作者简介：苏凉（专注于网络爬虫，数据分析）🐳博客主页：苏凉.py的博客🌐系列专栏：web前端基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录写在前面HTML表单form元素action属性method属性（get/post）get注意事项post注意事项target属性autocomplete 属性fieldset组合表单数据input元素常见输入类型number类型输入限制date类型color类型ra..

🐚作者简介：苏凉（专注于网络爬虫，数据分析）🐳博客主页：苏凉.py的博客🌐系列专栏：web前端基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录（一）🍁HTML图像🔥1.图像标签img和源属性src🔥2.替换文本属性（alt）🔥3.在HTML页面中添加背景图🔥4.排列图片🔥5.设置图片链接（二）🍁HTML表格🔥1.带边框表格的创建🔥2.设置表格背景，以及单元格背景🔥3.设置表头🔥4.跨行或者跨列（一）🍁HT..

🐚作者简介：苏凉（专注于网络爬虫，数据分析）🐳博客主页：苏凉.py的博客🌐系列专栏：web前端基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录🔖（一）HTML简介🔉1.什么是HTML？🔉2.HTML标签🔉3.HTML文档🔖（二）HTML四个基础标签🔉1.HTML标题🔉2.HTML段落🔉3.HTML链接🔉4.HTML图像🔖（一）HTML简介🔉1.什么是HTML？HTML 指的是超文本标记语言 (Hyp..