shopping car 总结

HTML:
1.input文本框中设置disable属性，则该文本框不能手动输入。

2.<a href="javascript:void(0)">定义了一个死链接，当用户链接时，void(0) 计算为0，但Javascript 上没有任何效果。
href="#"与href="javascript:void(0)"的区别：# 包含了一个位置信息，默认的锚是#top也就是网页的上端。

3.<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。disabled 属性规定禁用按钮。

CSS:
1.text-align：文档对齐可以继承自父元素

2.img/input属于行内替换元素,height/width/padding/margin均可用。效果等于块元素。
span属于行内非替换元素,height/width/padding-top/padding-bottom/margin-top/margin-bottom均无效果。只能用padding-left/padding-right和margin-left/margin-right改变宽度。

3.
:first-child 匹配的是其父元素的第一个子元素。可以说是结构上的第一个子元素，位置上必须是第一个。
:first-of-type 匹配的是其父元素下该类型的第一个元素，位置上可以不是第一个。

4./* 灵活布局 ，且子元素在交叉轴上（垂直方向）居中*/
display: flex;
align-items: center;

5.固定定位，相对于浏览器窗口的定位。
position: fixed;
top:50%; //相对于浏览器窗口的长宽的百分比
left:50%;

6.transform: translate(-50%, -50%); //CSS3中的移动元素，相对于它自身的长宽移动50%

7.
transition; //过渡
transform: scale(0.5); //缩放0.5倍

8.css3 animation 属性用于设置六个动画属性：
animation: name duration timing-function delay iteration-count direction;
使用@keyframes 规则，以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

9.text-indent 属性规定文本块中首行文本的缩进

10.box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

11.
:before 选择器在被选元素的内容前面插入内容（相当于插入一个span元素）。
:after 选择器在被选元素的内容后面插入内容（相当于插入一个span元素）。

12.弹性布局
em是相对长度单位。相对于当前对象内文本的字体尺寸，如果当前对象内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem（font size of the root element）是指相对于根元素的字体大小的单位。一般情况1rem=16px;
百分比是相对于父对象的宽度。

13.Chrome浏览器默认情况下的字体最小为12px
1）当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}
2）-webkit-text-size-adjust放在body上会导致页面缩放失效
3）body会继承定义在html的样式
4）用-webkit-text-size-adjust不要定义成可继承的或全局的

 

JS:
1.jQuery本身提供，通过.get(index)方法，得到相应的js对象
var v=$v.get(0); //js对象

jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的js对象。
var v=$v[0]; //js对象

2.toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

3.JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1，json返回的不是JSON字符串，故不能使用JSON.parse()，故报错。

4.JSON.stringify() 方法将一个JavaScript值(对象或者数组)转换为一个 JSON字符串。

5.parseInt(string) 这个函数的功能是从string的开头开始解析，返回一个整数

6.remove() 方法移除被选元素，包括所有文本和子节点。

7.indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
stringObject.indexOf(searchvalue,fromindex)

8.splice() 方法向从数组中添加/删除项目，然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)

9.slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)

 

VUE:
1.this.$http.get('data/cartData.json').then()

Vue与后端数据交互，使用this.$http.get('请求地址')来发送请求，then()方法异步执行。就是当then()前面的方法执行完之后再执行then()里面的方法，这样就不会发生获取不到数据的问题。

Vue中ajax中this默认指向对象是vue本身，当然你如果想在全局使用就要先把this作用域提升到全局

2.跨域问题

chrome异步加载本地json文件报错：cross origin request are only supported for HTTP

什么叫跨域？字面理解，跨是跨越，域是别的服务器，跨域就是到别的服务器上取东西。报错的意思应该就是chrome下，跨域请求只能通过这些协议标准实现：http、data、https、chrom-extension、chrom-extension-resource。只要协议、域名、或端口有任何一个不同，就会被当做是不同的域。
现在是右键直接打开html文件，使用的file协议。在vs code中安装Live Server插件，开启Server服务，并设置默认打开的浏览器。通过live server打开html文件，网址为http://127.0.0.1:8080/，所以支持跨域请求。

3.@input 输入文本改变时触发该事件

4.vue中如何指向事件源
通过在事件绑定的回调函数中传入&event参数，函数内e.target 是你当前点击的元素， e.currentTarget 是你绑定事件的元素。
可直接按照dom处理，如e.currentTarget.style.background="red";

5.vue2.0使用<transition name="move">来包裹动画元素，然后再css中添加move-enter、move-enter-active、move-enter-to、move-leave、move-leave-active、move-leave-to
来定义初始、中间和最终属性。

6.vue不支持直接使用hover事件，而是分别用mouseover和mouseout事件。

7.mounted中的函数式数据驱动？哪些数据变化就能重新执行该函数？

SVG:
1.<svg>创建一个SVG文档片段
SVG的<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。在<defs>元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>元素来引入它们。
SVG <symbol>元素用于定义可重复使用的符号。嵌入在<symbol>元素中的图形是不会被直接显示的，除非你使用<use>元素来引用它。
SVG <use>元素可以在SVG图像中多次重用一个预定义的SVG图形。

2.fill:#999; //给svg绘图填充颜色

3.svg元素中通过class设置标签样式无效，不支持jquery中addClass()、removeClass()方法