<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[coco_2233的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/coco_2233</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; coco_2233]]></copyright><item><title><![CDATA[canvas转换图片格式]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/144298024</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/144298024</guid><author>coco_2233</author><pubDate>Fri, 06 Dec 2024 18:24:06 +0800</pubDate><description><![CDATA[在项目中遇到将png格式的图片转换为jpg格式的图片，可以通过canvas进行转换。]]></description><category></category></item><item><title><![CDATA[vite中JS动态引入图片]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/144297952</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/144297952</guid><author>coco_2233</author><pubDate>Fri, 06 Dec 2024 18:17:27 +0800</pubDate><description><![CDATA[在HTML中可以使用如下方法获取图片：但是我们想要在JS中获取图片怎么办？]]></description><category></category></item><item><title><![CDATA[搞懂vite.config.js中的proxy]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/144297940</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/144297940</guid><author>coco_2233</author><pubDate>Fri, 06 Dec 2024 18:16:45 +0800</pubDate><description><![CDATA[是请求的路径，这是前端向后端接口发起请求。，看到一篇文章，来总结一下。，这两个地址都能返回数据。，这是最终结果，因为在。]]></description><category></category></item><item><title><![CDATA[环境变量和模式]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/144297880</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/144297880</guid><author>coco_2233</author><pubDate>Fri, 06 Dec 2024 18:14:29 +0800</pubDate><description><![CDATA[项目在开发环境下是http://localhost:3001地址，在生产环境下是服务器地址http://175.178.147.180:3001。的文件，这个文件写了一些环境变量，在不同的情况下可以通过加载不同的文件来获取其中的环境变量。，而在生产模式下使用的是服务器的ip地址，可以通过这种方式替换掉ip地址。这里使用不同的模式是因为这个项目在开发模式下使用的ip地址是自己电脑上的。来使用这个环境变量，你可以在任何JS文件中使用。的形式，xxx可以是任何名字，只要和。文件，可以拿到其中的变量。]]></description><category></category></item><item><title><![CDATA[vue3自定义指令]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/144278413</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/144278413</guid><author>coco_2233</author><pubDate>Thu, 05 Dec 2024 23:23:03 +0800</pubDate><description><![CDATA[我们用不到这么多生命周期，可以简写为以下方法，它会自定调用相应的生命周期，改变isShow就会显示或隐藏div元素}else {在元素按下鼠标，给元素添加跟随鼠标移动的事件元素设置为固定定位，鼠标移动改变left值和top值鼠标松开，移除移动事件。]]></description><category></category></item><item><title><![CDATA[IntersectionObserver检查元素是否在可视窗口内]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/144270808</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/144270808</guid><author>coco_2233</author><pubDate>Thu, 05 Dec 2024 16:54:25 +0800</pubDate><description><![CDATA[回调函数中的参数是一个数组，里面target表示observe()监听的对象，intersectionRatio表示目标对象出现在可视窗口的占比，大于0则出现在可视窗口中。IntersectionObserver接收一个回调函数作为参数，使用observe()方法监听目标对象，当目标对象在可视窗口中出现或者消失会触发这个回调函数。可以使用这个API来检测元素是否在可视窗口内。]]></description><category></category></item><item><title><![CDATA[JS异步编程]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/130030679</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/130030679</guid><author>coco_2233</author><pubDate>Sat, 08 Apr 2023 16:19:56 +0800</pubDate><description><![CDATA[本文介绍JS异步编程，Promise，async和await]]></description><category></category></item><item><title><![CDATA[JS异步编程]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/130025718</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/130025718</guid><author>coco_2233</author><pubDate>Sat, 08 Apr 2023 10:35:53 +0800</pubDate><description><![CDATA[回调函数会出现回调地狱的问题，即回调中嵌套多层回调。promise可以解决回调地狱的问题，以更加清晰的逻辑写好异步编程。同步行为就是代码按照顺序执行，JavaScript是单线程的，如果某个操作需要的时间很长，那么可以通过异步操作先执行另一个操作，后面才回来执行这个操作。await关键字要和async一起使用，原来异步函数返回的是一个promise对象，但是使用了await之后可以取到promise对象中的值。await会暂停异步函数中后面的代码，等到await右边的值可用再继续执行await下面的操作。]]></description><category></category></item><item><title><![CDATA[this指向和闭包]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/130025574</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/130025574</guid><author>coco_2233</author><pubDate>Sat, 08 Apr 2023 10:34:56 +0800</pubDate><description><![CDATA[js学习。]]></description><category></category></item><item><title><![CDATA[hash模式和history模式]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129984565</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129984565</guid><author>coco_2233</author><pubDate>Thu, 06 Apr 2023 10:53:08 +0800</pubDate><description><![CDATA[try_files就是尝试到网站读取这个文件，有这个文件就返回；没有这个文件就查找这个目录，找到这个目录返回目录；由于vue是单页面应用，只有一个页面，对于不同的URL请求找不到相应的资源会出现404的情况。history模式改变URL同样也不会引起页面的重新加载，它会记录浏览器历史，点击后退按钮会回到上一个页面。下面是vue-router中配置为hash模式，默认是hash模式。是Nginx的一个变量，代表用户访问的地址，，表示返回网站的index.html文件。表示访问的是一个文件，]]></description><category></category></item><item><title><![CDATA[Vue Router导航守卫]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129984658</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129984658</guid><author>coco_2233</author><pubDate>Thu, 06 Apr 2023 10:51:55 +0800</pubDate><description><![CDATA[导航守卫就是在路由跳转的时候进行一些操作或保护。比如一个用户直接修改URL进入管理页面，但是导航守卫检测到这个行为，把路由跳转到登录页面，让他进行登录。导航解析。]]></description><category></category></item><item><title><![CDATA[Vue路由三]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129984510</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129984510</guid><author>coco_2233</author><pubDate>Thu, 06 Apr 2023 10:50:34 +0800</pubDate><description><![CDATA[假如网站中有公共的部分和私密部分，公共部分是所有人都可以看到的，私密部分只有管理员才能看到。结果如下：可以看到当普通用户访问私密部分没有权限，但是可以访问公共部分。Vue Router支持组件的动态导入，即当需要用到这个路由时才导入。当我们想要在路由上添加一些信息时，可以在。在setup中没有this，所以直接访问。我们也可以监听路由的变化来做某些事情。属性，然后在里面写上想要的信息。下面的例子中仍然可以通过。通过点击事件来进行页面跳转。可以让我们访问到路由。在模板中可以直接访问到。]]></description><category></category></item><item><title><![CDATA[Vue路由二]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129984405</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129984405</guid><author>coco_2233</author><pubDate>Thu, 06 Apr 2023 10:49:08 +0800</pubDate><description><![CDATA[接着上一篇路由继续记录。]]></description><category></category></item><item><title><![CDATA[Vue路由一]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129984292</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129984292</guid><author>coco_2233</author><pubDate>Thu, 06 Apr 2023 10:43:38 +0800</pubDate><description><![CDATA[我们来看一下结果：我们在main.js中创建了routes，它是一个数组，path就是端口号后面的，例如127.0.0.1:8080/about中的’/about’，component就是要跳转的组件，然后创建router（一般会把创建路由单独放在一个文件中，这里只是为了方便展示写在了main.js中）。在vue中通过使用vue-router来实现组件的切换，具体是通过改变url中的path值来切换组件，path值得改变并不会引起整个页面刷新，只是局部改变其中的内容。的path太长，可以起一个。]]></description><category></category></item><item><title><![CDATA[组件缓存KeepAlive]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129973474</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129973474</guid><author>coco_2233</author><pubDate>Wed, 05 Apr 2023 17:10:15 +0800</pubDate><description><![CDATA[keepAlive是vue的一个内置组件，当动态切换组件时它能够缓存组件实例。]]></description><category></category></item><item><title><![CDATA[爷孙组件传递数据]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129908680</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129908680</guid><author>coco_2233</author><pubDate>Sun, 02 Apr 2023 11:33:45 +0800</pubDate><description><![CDATA[对于父子组件的传递数据，可以通过prop进行传递，但是如果是爷爷向孙子传递数据呢？我们需要在爸爸中定义defineProps拿到爷爷传来的数据，然后在孙子中也定义defineProps，爸爸把刚刚拿到的数据在传递给孙子。对于爸爸来说根本用不到这些数据，只是孙子要用到。那有没有一种方法让爷爷直接传递数据给孙子呢？答案肯定是有的，这里说的是依赖注入的方法，还有一种使用vuex的方法以后再说吧。]]></description><category></category></item><item><title><![CDATA[Vue插槽]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129908660</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129908660</guid><author>coco_2233</author><pubDate>Sun, 02 Apr 2023 11:30:12 +0800</pubDate><description><![CDATA[插槽就是一个占位符，用于在子组件中占位置，然后把父组件传来的内容渲染到这个位置。]]></description><category></category></item><item><title><![CDATA[Vue组件]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129887854</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129887854</guid><author>coco_2233</author><pubDate>Fri, 31 Mar 2023 20:22:29 +0800</pubDate><description><![CDATA[在vue中一个.vue文件就是一个组件，一般来说不会在一个文件写太多的代码，我们可以把重复使用的代码写到一个组件中，在另一个组件中引用这个被封装的组件，这样可以提高代码复用性。前一个组件叫做子组件，后一个叫做父组件。]]></description><category></category></item><item><title><![CDATA[vue-cli的使用]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129887821</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129887821</guid><author>coco_2233</author><pubDate>Fri, 31 Mar 2023 20:12:59 +0800</pubDate><description><![CDATA[在实际项目中都是用vue-cli进行搭建项目，不用自己配置webpack。]]></description><category></category></item><item><title><![CDATA[Vue模板引用]]></title><link>https://blog.youkuaiyun.com/coco_2233/article/details/129887795</link><guid>https://blog.youkuaiyun.com/coco_2233/article/details/129887795</guid><author>coco_2233</author><pubDate>Fri, 31 Mar 2023 20:07:52 +0800</pubDate><description><![CDATA[在vue中我们需要访问DOM元素，可以通过给元素添加ref从而获得它的引用。]]></description><category></category></item></channel></rss>