网易云项目总结

《虚化背景》

 《文字显示不下用点号代替的css方法》

 

 《在vue3中如何拿到dom元素》

我这里以audio标签为例子：

 像vue2中一样，打上ref标记

但是vue3中没有this无法拿到this.$refs

 vue3中是通过myaudio=ref(null),myaudio是我打上标记的名称

myaudio.value是

最后一定要记得：

 才有如下：

 

 然后可以调用audio上的属性，方法了

附加audio标签的用法：https://blog.csdn.net/Lei2021_type/article/details/124156999

《实现加载页面加载时的显示动画效果》

 

 《vue中动态绑定class样式》

博客地址：https://blog.csdn.net/qq_44998582/article/details/122354665

https://blog.csdn.net/u012320487/article/details/121806858

 

 

 

 《css3实现旋转动画效果》

 《关于v-model的一点知识》

v-model一般是用在input标签中，绑定value用的

正像v-bind,v-on一样，他们是v-bind:class="...",其可以简写成:class="..."

v-on:click="...."

v-model也是这样的用法：v-model:value="",但是v-model本身默认绑定value，则可以简写

v-model="...",直接不要value

《关于input type="range"》

 

 

 

 value其实是控制加载进度条到哪里的

《项目中使用Vue3的感悟》

computed其时可以用在很多地方，

其一个很好的作用是可以使数据动态：

 

 可以直接使用在setup(){}的return中

注意一下：computed中用get与set时的写法：

一般是...=computed(()=>{})
这里是...=computed({ get(){},set(value){}

})

 

 computed还可以使用在reactive({})中，可以使其中的属性不断变化，从而可以用watch()来做点事

《reactive中的注意》

比如我这里：Display：store.state.isPlay;

如果我在reactive中这样写

即使我一会我改变store.state.isPlay，我用watch其监视DisPlay是没有反应的

要像上面图片中那样写才改变store.state.isPlay，DisPlay才跟着改变

或者在外面直接thisDmusic.DisPlay=...这样改变才行

《watch 的使用》

 

 

 在watch中监视reactive中有多个属性中的属性时，一定要写成（）=>属性，才行

+注意一下销毁定时器的方法：clearInterval()