前端学习记录周1基础知识CSS盒模型所有的HTML元素都可以看做是盒子。在CSS中，术语“盒子模型”用于设计和布局。CSS盒子模型本质上是一个盒子，封装了周围的HTML元素。它包括：边距、边框、填充和实际内容。margin-边界外的区域被清空，外边距透明。Border-围绕填充和内容外部的边框。Padding-清除内容周围的区域，填充是透明的。内容-框的内容，显示文本和图像。CSS3增加了box-sizing；border-box：计算padding的宽度和border的宽度。html5标签模板：用于在运行时通过JavaScript实例化内容的容器。header：定义页面或部分的标题。它通常包括徽标、页面标题和导航目录。footer：定义页面或章节的页脚。它通常包含版权信息、法律信息的链接以及反馈建议的地址。aside：定义与页面内容不太相关的内容——如果删除，剩余的内容仍然有意义。section：定义文档中的一个部分。nav：定义仅包含导航链接的部分。audio：定义音频内容（属性：autoplay，controls，loop，muted，preload）video：定义视频（属性同上）-JavaScript数据类型和数据结构JavaScript是弱类型语言，有6种基本类型BoolObjectStringNullUndefinedNumber*可以通过判断typeof数据类型，数组和null属于Object*Object，属于引用类型，有constructor、hasOwnProperty、isPropertyOf、propertyIsEnumerable等方法。对象的属性Data属性：包含一个数据值的位置，可以读写包含Configurable、Enumerable、Writable、Value4个特性Accessor属性：不包含数据value可以包含getter和setter函数，可读写会分别触发这两个方法，包括Configurable、Enumerable、get、set属性，使用defineProperty()修改默认属性。访问器属性不能直接定义，只能调用应该使用的方法。对象创建工厂模式构造函数原型模式构造函数：functionPerson(name,age,job){this.name=name;这个。年龄=年龄；这个。工作=工作；this.sayName=function(){控制台。日志（这个。名称）；}}letperson1=newPerson("name",20,"job");原型模式：functionPerson(){}Person.prototype.name="name";Person.prototype.age=20;Person.prototype.job="工作";Person.prototype.sayName=function(){console.log(this.name);}让person1=newPerson();JavaScript常用的字符串操作substring()–返回字符串的子串。传入的参数是开始位置和结束位置。substr()-返回字符串的子字符串。传入的参数是起始位置和编号。replace()–用于查找与正则表达式匹配的字符串，并将匹配的字符串替换为新字符串。slice()–提取字符串的一部分并返回一个新字符串。split()–通过将字符串分成子字符串，将字符串变成字符串数组。length–返回字符串的长度，所谓字符串的长度是指它包含的字符数。toLowerCase()–将整个字符串转换为小写。toUpperCase()–将整个字符串转换为大写。concat()–组合两个或多个字符的文本，返回一个新字符串。indexOf()–返回字符串中子字符串第一次出现的索引。如果没有匹配项，则返回-1。charAt()–返回指定位置的字符。match()–检查字符串是否匹配正则表达式JavaScript常用的数组操作-concat-合并数组-push、pop-分别增删元素、栈形式-unshift、shift-增删元素、队列形式-reverse-reverse-sort()-排序，arr.sort(function(a,b){returna-b;}输入比较函数-slice,splice-delete，参数为起始位置和编号，slice不改变原Elementgroup，返回一个新的数组，splice会改变元素组，并返回删除的数组。-substring，substr-截取数组，类似于上面string中的两个方法。JavaScript模块化是为了不阻塞代码的污染整个世界，更好的利用别人的代码所以有JavaScript模块化的需求可以使用立即执行函数varparams='test';varmodule=(function(params){varmod=function(){//...};返回{mod:mod};})(params);external不能直接访问模块内部的变量。传入外部变量后，内部改变其值不会影响全局。closure的一些新特性border-radius:border圆角box-sizing:border-box,content-boxbox-shadow:shadowbackground-sizebackground-origin:背景显示区域,content-box,padding-boxorborder-boxtext-shadow:文字阴影word-wrap:文字强制换行@font-face:fonttransform:2D,3D转换ratate,translate,scale,skewtransition:excessiveanimation:animation@keyframes:创建动画规则vue基本常用指令v-if,v-else-if,v-elsev-showv-on缩写@v-bindv-modelv-forv-htmlv-textfeatureref:在元素上添加这个属性，而不是原生JavaScript获取dom操作this.$refs.name在bindingLinkedstylesandclasses下面的写法涉及到所有的样式和类名的绑定方法，样式就不详细解释了：style="[item.a,item.b]":style="{width:item.value+'px'}":style="{color:activeColor,fontSize:fontSize+'px'}":style="item.titlefont":style="a<0?'color:red':'color:black'":style="item.choosetype==3?{width:ul_width+'px'}:''"Class:class="{a:item.x==1}":class="[b,{a:item.x==1}]":class="{a:item.x==1,b:item.x==2}"
