一、JSON.stringify()
JSON.stringify()将对象转化为json字符
JSON.parse(JSON.stringify())将json字符串解析为js对象
遍历数组
二、元素选择器
.seat:nth-child(8n+1){ margin-left: 10px; }
maxPage = Math.ceil(data.length / 5);//ceil 向上取整
//请求数据
axios.get('./js/carlist.json')
.then(res=>{
}
//给上一个class移除/添加属性
prev.classList.remove('disabled')
this.classList.add('disabled')
三、document.querySelector
使用getElementByld()来获取带有id的元素对象
var element = document.getElementById('id')
// 获取body元素
let body = document.querySelector("body");
console.log(body)
// 获取id为container的元素,只会获取第一个
let container = document.querySelector("#container");
console.log(container)
// 获取class中包含btn的元素,只会获取第一个
let btn = document.querySelector(".btn");
console.log(btn);
// 获取container直接子类class中包含btn的元素,只会获取第一个
let containerBtn = document.querySelector("#container>.btn");
console.log(containerBtn);
var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
(baseElement.querySelector("div span").innerHTML);
.querySelector与getElementBy等的区别
document.getElementBy
获取的是动态集合
用法:
document.getElementsByTagName('p');//标签名字,如<p>,<div>
document.getElementById('p1');//元素id
document.getElementsByClassName('text');//类名字
document.querySelector
获取的是静态集合
用法:
//匹配指定 CSS 选择器元素,可以匹配多个,用,隔开
document.querySelector('.text'); //方法返回类名为text的第一个子元素 。
document.querySelectorAll('.text'); //方法返回类名为text的所有元素 。
document.querySelector('#list').innerHTML;
由于querySelector是按css规范来实现的,所以它传入的字符串中第一个字符不能是数字.
query选择符选出来的元素及元素数组是静态的,而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组,不会随着文档操作而改变.在使用的时候getElement这种方法性能比较好,query选择符则比较方便
四、gap是元素之间的间隔
gap 是一个提议的属性,将用于 CSS 网格和 flexbox。
CSS 网格间隙 在CSS 网格中,可以使用 grid-gap属性轻松地在列和行之间添加间距。 它是行间距和列间距的简写。
gap:1rem;
五、position:sticky
六、cursor:pointer
animation
animation 属性用来指定一组或多组动画,每组之间用逗号相隔。
CSS animation 属性是
animation-name,
animation-duration,
animation-timing-function,
animation-delay,
animation-iteration-count,
animation-direction,动画播放的方向
animation-fill-mode ,确定动画在执行之前和之后这两个阶段应用的样式
animation-play-state,确定动画是否正在播放
属性的一个简写属性形式。
七、toRef
toRef(操作对象, 对象属性)
ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,
首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数据的交互。ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,不会影响到源数据,但是视图层上的数据会被更新。
但是 toRefs 函数的本质是引用,也就是说,toRef 函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成视图层数据的更新。