不熟悉的知识点
知识点1:
rem的作用:rem适合于移动端适配和制作全屏效果,例如设计图的宽度与屏幕宽度进行适配。页面以及页面内容随屏幕宽度变化而变化。
如何设置rem:1rem的大小是等于html下的font-size,所以可以通过设置这个css属性告诉浏览器rem的大小
在哪里设置Rem.js: 一般在public文件夹下,擦黄健一个rem文件夹子,配置js文件
html{
font-size:10px;//所以1rem=10px
}
.div{
width:50rem;/*width:500px;*/
height:50rem;/*height:500px;*/
}
例子如下:
// 这个文件的功能是做rem适配,是我们页面的大小可以随着窗口的大小变化自适应
function remSize(){
// 首先获取窗口的大小
let deviceWide=document.documentElement.clientWidth;
// 如果窗口的大小,大于750px,则令其等于750
if(deviceWide>750){
deviceWide=750;
}
if(deviceWide<320){
deviceWide=320;
}
// 通过设置根节点的fontSize来控制rem的大小,这里控制1rem=100px;
document.documentElement.style.fontSize=(deviceWide/3.75)+"px";
// 设置根节点的字体大小,这里设置为30px,注意我们这里的获取的是整数,所以要加上"rem"
document.body.style.fontSize=0.16+"rem";
}
remSize();
// 当窗口大小再次变化时我们再次调整rem的大小
window.onresize=function(){
remSize();
}
这里顺便介绍一下vw vh:
1,vw、vh 的含义
(1)vw、vh 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗大小来决定的,单位 1,代表类似于 1%。
视窗是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
(2)具体描述如下:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
知识点2: 同步异步函数,这个已经补充再js查漏补缺中了
知识点3: 如何获取屏幕的大小:
// 首先获取窗口的大小,注意获取的是整数
let deviceWide=document.documentElement.clientWidth;
// 设置根节点的字体大小,这里设置为30px,注意我们这里的获取的是整数
//所以要加上"rem"
document.body.style.fontSize=0.3+"rem";
知识点4: 如何监视浏览器的大小变化
window.onresize=function(){}
知识点5: vue3中路由的变化,这部分知识点已经补充到快速上手vue3哪里
知识点6: 生命周期钩子onMounted与asncy,await实现请求后端数据
// 使用生命周期钩子函数来发送axios请求
onMounted(async()=>{
let res=await axios.get("http://localhost:3000/banner?type=1");
// 一定要记住在set中使用ref代理的数据是一定要使用.value
arr.value=res.data.banners;
})
知识点5: 获取本地图片的方法
// 首先这里为什么使用ref代理数组,因为我要监视的是arr所保存的地址
let arr=ref([
// 要想获取图片的地址必须要使用require函数
{pic:require("/前端开发学习/vue3 网易云项目/vue_test/src/assets/img/1.webp")},
{pic:require("/前端开发学习/vue3 网易云项目/vue_test/src/assets/img/2.webp")},
{pic:require("/前端开发学习/vue3 网易云项目/vue_test/src/assets/img/3.webp")}
])
知识点7: 为组件绑定原生事件的方法?因为vue3移除了.nativa,所以绑定原生事件可以直接v-on:click()
<swiper-slide v-for="item in gdlist " :key="item.id" v-on:click="toexact(item.id)">
知识点8: css控制显示的文本的多少
知识点9: 使用audios 显示控件
<audio controls="controls" :src="`https://music.163.com/song/media/outer/url?id=${store.state.tracks[0].id}.mp3 `"></audio>
知识点10: 控制同一个地方不同组件的显示可以使用v-if与v-else
知识点11: html标签 - marquee></marquee可以实现多种滚动效果,无需js控制。使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在marquee></marquee内部输入要滚动的内容即可
知识点12: vue中标签中内联样式的使用
1、直接在元素上通过:style的形式,书写样式对象
<h1 :style="{'color':'red','font-weight':200}">你会freestyle吗?</h1>
内联样式结合模版字面量的使用:
<LYJ :music="tracks[curindex]" :style="{'display':`${showbg?'none':'block'}`}" @click="changeshow"></LYJ>
**知识点13:**为标签绑定类的对象写法,其中的active是类名,通过boolean控制类是否生效
知识点14: 我们必须知道当父组件给子组件传递函数是两组件是公用一个函数
知识点15: 为什么需要使用async 来同步异步函数
知识点16: 如何在router中使用store?直接在router中导入store然后直接使用即可
知识点17: 为单个组件配置路由守卫时,直接在该组件的路由配置中加入beforeEnter即可
知识点18: 取消谷歌浏览器的自动填充
知识点19: 设置cookie值,浏览器set-cookie显示有内容,但没写入cookie(刷新没有cookie)
知识点20: 要善于利用我们的后台管理,network中可以看到我们发出的请求,以及服务器返回的信息,而qpplication中可以看到可以看到我浏览器做出的一些改变例如cookier,localStore问题
知识点21:
知识点22: 如何设置默认2级路由,将path设置为1级路由的跳转地址,然后将组件设置为你想要的默认组件即可
知识点23: 重定向:的意思是,当用户访问/a时,URL 将会被替换成/b,然后匹配路由为/b,又因为/是项目的跟路径所以,下面的可以设置默认路由
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
知识点:16
没见过的技术
技术1: 如何使用网易云的后端接口?
1:首先经项目下载到电脑本地
使用git 下载:
如果下面的地址不行,就直接取github找到http地址下载即可:
$ git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git
$ npm install
2.使用node.js运行该项目:
可以将项目拉到vscode 中运行项目
$ node app.js
其他的按照官方文档即可使用
技术2: 使用阿里图标时css样式时没有那个颜色的,svg样式才会显示颜色
技术3: 在使用swiper是会发生不可避免的错误,原因是模版中引入的文件的地址发生了错误,具体如何修改这个错误看看收藏
首先如何解决这个错误?
错误如下:
具体为什么错?我们在导入下面的插件的时候路径发生了错误,所以导致vue无法找到相关的文件
如何修改这个错误?
我们打开node_modules文件夹,找到swiper文件夹,找到所有文件的正确路径即可
技术4: 如何使用swiper,domes中里面有各种例子,可以直接哪过来使用,不过他是没有css样式的,需要我们自己设置宽高,它是通过引入各种功能插件来实现各种功能
技术5: 封装axios请求,我们可以建立在src下一个专门的js文件,用来管理各种请求函数,然后再暴露相应的函数即可这样,比较方便管理,如果需要修改url直接到该问价按下修改即可
技术6: 使用阿里图标库时,如果往项目中加入了新的图标记得更新连接
技术7: 当我们的相对路径层级过深,是可以使用@(代表项目根路径)
技术8: 如何通过操作dom节点操作audios标签播放和暂停,我们想要了解一个dom节点的属性时,可以使用数组的结构来结构ref获取的对象
例如:可以通过play()方法控制其播放,通过pause()暂停
技术:
技术:
技术: