- 博客(11)
- 收藏
- 关注
RSS订阅原创 vue3.x 实现简单的弹幕功能
思路定时器定时创建dom元素,在创建dom的同时添加动画结束监听函数,动画执行完销毁动画用animation dom创建后自动执行代码js部分 // 创建弹幕dom对象 createBarrage(item) { const barrageContent = this.$refs.barrageContent //获取span的父元素 const barrageSpan = document.createElement("span") //创建span d
2022-05-12 16:19:55
1552
1
原创 vue3.x之路由传参(params和query)
为了便于后期维护,路由跳转以点击事件的形式绑定在methods中父路由配置toSonRouter() { this.$router.push({ name: "xxx",//配置路由时加一个name的属性值来代替path params: { keyWord: this.$data.xxx,//将一个本地变量赋给keyWord传给子路由 }, }); },子路由接受数据//以如下形式接收,注意是$ro
2022-03-15 09:52:49
608
原创 vue3.x之全局配置axios以及使用get post请求
全局配置axios安装npm install axios --save在main.js中全局配置//引入import axios from 'axios';//全局挂载const app = createApp(App);app.config.globalProperties.$http = axios;//这里的$http就可以代替axios出现了//配置根目录,(防止代码冗余axios.defaults.baseURL = 'api根目录';//注意后续使用app时要用 app.
2022-03-15 09:46:25
930
原创 filter_drop shadow更改图片颜色
filter:drop-shadow的属性值以及更改图片颜色的原理dropshadow相当于一个盒子的投影 我们可以通过改变投影的颜色变相改变图片的颜色,原理就是将图片本身移出盒子之外 再将图片的投影移回来//属性值filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);代码部分//html部分<div class="img_box"> <img /></div>//css样式.img_box { width: 53px;
2022-03-12 16:53:16
784
原创 css如何让图片自然布满盒子且不出现变形
html部分:<div clas="box"> <img src = "xxx" /></div>css样式 width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; border: 1px soli
2022-03-08 20:38:18
6019
原创 HTML之video标签
遇到的问题1、video标签的使用2、video的属性及属性值3、video边框无法去除的问题解决后的代码详情请看注释<template> <div> <!-- video标签为双标签，其中的source中写入属性 src 即视频地址 --> <!-- 1、preload 为预加载 默认auto 表示尽快加载 2、loop 循环播放 3、autoplay 自动播放 4、poster 封面 未
2021-12-03 19:04:45
5987
原创 vue3.0点击事件之scrollTo滚动
具体语法及注释如下<template> <div> <!-- @ == v-on 事件类型为click scroll为自己定义的事件名字 --> <button @click="scroll">按钮</button> </div></template><script>export default { name: "yanshi", methods: { // 没
2021-12-02 18:55:48
3738
2
原创 css：input button常用属性以及将button嵌入到input中
1、鼠标经过button变成小手//css属性cursor:pointer;2、清除button默认边框border: none;3、清除input默认边框 outline: 0;4、设置input中的默认值以及更改其中的样式//输入框中的默认值<input type="text" placeholder="请输入XXX">/* 修改palaceholder样式 */::-webkit-input-placeholder { color: rgb(173, 123
2021-11-24 09:39:59
5841
1
原创 vue3：v-for与props联合使用渲染列表
v-for与props联合使用思路1、子组件的封装2、子组件的调用3、父组件数据的传输思路封装一个带有v-for的组件 需要用时只需要调用并实现动态渲染 优点是节约代码 使代码结构更加简洁1、子组件的封装<template> <ul><!-- v-for的基本格式，item：自己定义的单个项目的名字 list：自己定义的数组的名字 --> <li v-for="item in list" :key="item">{{ item.name
2021-11-20 21:05:01
1622
原创 vue3：data 如何动态绑定图片src
1、给img src绑定一个变量： <img :src="imgPath" />2、 require路径：<script>export default { data() { return { imaPath: require('.././xxx/xxx/xxx.png'), }; },};</script>//记录成长，仅此，仅此而已。...
2021-11-20 18:38:57
1711
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人