<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[一句话介绍不了]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ZRN0919</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ZRN0919]]></copyright><item><title><![CDATA[vue3.x 实现简单的弹幕功能]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/124733755</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/124733755</guid><author>ZRN0919</author><pubDate>Thu, 12 May 2022 16:19:55 +0800</pubDate><description><![CDATA[思路

定时器定时创建dom元素,
在创建dom的同时添加动画结束监听函数,动画执行完销毁
动画用animation dom创建后自动执行

代码

js部分

 // 创建弹幕dom对象
    createBarrage(item) {
      const barrageContent = this.$refs.barrageContent //获取span的父元素
      const barrageSpan = document.createElement("span") //创建span d]]></description><category></category></item><item><title><![CDATA[vue3.x之路由传参(params和query)]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/123494769</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/123494769</guid><author>ZRN0919</author><pubDate>Tue, 15 Mar 2022 09:52:49 +0800</pubDate><description><![CDATA[为了便于后期维护,路由跳转以点击事件的形式绑定在methods中
父路由配置
toSonRouter() {
      this.$router.push({
        name: "xxx",//配置路由时加一个name的属性值来代替path
        params: {
          keyWord: this.$data.xxx,//将一个本地变量赋给keyWord传给子路由
        },
      });
    },

子路由接受数据
//以如下形式接收,注意是$ro]]></description><category></category></item><item><title><![CDATA[vue3.x之全局配置axios以及使用get post请求]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/123494405</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/123494405</guid><author>ZRN0919</author><pubDate>Tue, 15 Mar 2022 09:46:25 +0800</pubDate><description><![CDATA[全局配置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.]]></description><category></category></item><item><title><![CDATA[filter_drop shadow更改图片颜色]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/123446319</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/123446319</guid><author>ZRN0919</author><pubDate>Sat, 12 Mar 2022 16:53:16 +0800</pubDate><description><![CDATA[filter:drop-shadow的属性值以及更改图片颜色的原理
dropshadow相当于一个盒子的投影 我们可以通过改变投影的颜色变相改变图片的颜色,原理就是将图片本身移出盒子之外 再将图片的投影移回来
//属性值
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

代码部分
//html部分
&lt;div class="img_box"&gt;
	&lt;img /&gt;
&lt;/div&gt;
//css样式
.img_box {
  width: 53px;]]></description><category></category></item><item><title><![CDATA[css如何让图片自然布满盒子且不出现变形]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/123361983</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/123361983</guid><author>ZRN0919</author><pubDate>Tue, 08 Mar 2022 20:38:18 +0800</pubDate><description><![CDATA[html部分:
&lt;div clas="box"&gt;
	&lt;img src = "xxx" /&gt;
&lt;/div&gt;

css样式
            width: 400px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px soli]]></description><category></category></item><item><title><![CDATA[HTML之video标签]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/121705207</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/121705207</guid><author>ZRN0919</author><pubDate>Fri, 03 Dec 2021 19:04:45 +0800</pubDate><description><![CDATA[遇到的问题
1、video标签的使用
2、video的属性及属性值
3、video边框无法去除的问题
解决后的代码
详情请看注释
&lt;template&gt;
  &lt;div&gt;
      &lt;!-- video标签为双标签，其中的source中写入属性 src 即视频地址 --&gt;
      &lt;!-- 1、preload 为预加载 默认auto 表示尽快加载
      2、loop 循环播放
      3、autoplay 自动播放
      4、poster 封面 未]]></description><category></category></item><item><title><![CDATA[vue3.0点击事件之scrollTo滚动]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/121683916</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/121683916</guid><author>ZRN0919</author><pubDate>Thu, 02 Dec 2021 18:55:48 +0800</pubDate><description><![CDATA[具体语法及注释如下
&lt;template&gt;
  &lt;div&gt;
    &lt;!-- @ == v-on 事件类型为click  scroll为自己定义的事件名字 --&gt;
    &lt;button @click="scroll"&gt;按钮&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: "yanshi",
  methods: {
    // 没]]></description><category></category></item><item><title><![CDATA[css：input button常用属性以及将button嵌入到input中]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/121508276</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/121508276</guid><author>ZRN0919</author><pubDate>Wed, 24 Nov 2021 09:39:59 +0800</pubDate><description><![CDATA[1、鼠标经过button变成小手
//css属性
cursor:pointer;

2、清除button默认边框
border: none;

3、清除input默认边框
 outline: 0;

4、设置input中的默认值以及更改其中的样式
//输入框中的默认值
&lt;input type="text" placeholder="请输入XXX"&gt;
/* 修改palaceholder样式 */
::-webkit-input-placeholder {
  color: rgb(173, 123]]></description><category></category></item><item><title><![CDATA[vue3：v-for与props联合使用渲染列表]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/121445338</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/121445338</guid><author>ZRN0919</author><pubDate>Sat, 20 Nov 2021 21:05:01 +0800</pubDate><description><![CDATA[v-for与props联合使用思路1、子组件的封装2、子组件的调用3、父组件数据的传输
思路
封装一个带有v-for的组件 需要用时只需要调用并实现动态渲染  优点是节约代码 使代码结构更加简洁
1、子组件的封装
&lt;template&gt;
  &lt;ul&gt;
&lt;!-- v-for的基本格式，item：自己定义的单个项目的名字 list：自己定义的数组的名字 --&gt;
    &lt;li v-for="item in list" :key="item"&gt;{{ item.name]]></description><category></category></item><item><title><![CDATA[vue3：data 如何动态绑定图片src]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/121443516</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/121443516</guid><author>ZRN0919</author><pubDate>Sat, 20 Nov 2021 18:38:57 +0800</pubDate><description><![CDATA[1、给img src绑定一个变量：
 &lt;img :src="imgPath" /&gt;

2、 require路径：
&lt;script&gt;
export default {
  data() {
    return {
        imaPath: require('.././xxx/xxx/xxx.png'),
    };
  },
};
&lt;/script&gt;

//记录成长，仅此，仅此而已。

...]]></description><category></category></item><item><title><![CDATA[Vue3：组件的封装、注册以及使用]]></title><link>https://blog.youkuaiyun.com/ZRN0919/article/details/121432625</link><guid>https://blog.youkuaiyun.com/ZRN0919/article/details/121432625</guid><author>ZRN0919</author><pubDate>Fri, 19 Nov 2021 23:35:50 +0800</pubDate><description><![CDATA[vue组件的使用
组件的封装
组件的注册
组件的使用
组件的封装

]]></description><category></category></item></channel></rss>