<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[wzstd的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/wzstd</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wzstd]]></copyright><item><title><![CDATA[git的基本详解]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/121134892</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/121134892</guid><author>wzstd</author><pubDate>Thu, 04 Nov 2021 09:30:23 +0800</pubDate><description><![CDATA[一、Git的介绍：
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。
二、安装地址
Git 各平台安装包下载地址为：http://git-scm.com/downloads
Git的操作流程：

三、  Git的工作区 、暂存区和版本库

工作区]]></description><category></category></item><item><title><![CDATA[移动端适配]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120911990</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120911990</guid><author>wzstd</author><pubDate>Fri, 22 Oct 2021 20:24:40 +0800</pubDate><description><![CDATA[移动端适配
视口viewport：
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"&gt;

&lt;meta&gt;标签中定义了一些元数据信息，通过设置&lt;meta name = "viewport"&gt;，提供有关 视口初始大小 的信息，供移动设备 使用。属性值为]]></description><category></category></item><item><title><![CDATA[跨域的解决⽅案！！快一起来看看吧!]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120771851</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120771851</guid><author>wzstd</author><pubDate>Thu, 14 Oct 2021 20:21:58 +0800</pubDate><description><![CDATA[跨域的解决⽅案⽬前有三种主流解决⽅案：
跨域是浏览器做出的限制,和后端没关系
1.  是jsonp
jsonp实现原理：主要是利用动态创建script标签请求后端接口地址，然后传递 callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式， callback中的参数就是json
3.  是代理（前端代理和后端代理）
前端代理我在vue中主要是通过vue脚手架中的config中的index文件来配置的，其中 有个proxyTable来配置跨域的
3.   是CORS]]></description><category></category></item><item><title><![CDATA[$route和$router的区别]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120751433</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120751433</guid><author>wzstd</author><pubDate>Wed, 13 Oct 2021 20:21:42 +0800</pubDate><description><![CDATA[route和route和route和router的区别
1. $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
this.$router.push({
      path:'/home',   路由地址
      name:'home',   路由名字
      query:{name:'张三'}， 路由参数 相当于：/home?name= '张三'
      params:{name:'李四'}   ]]></description><category></category></item><item><title><![CDATA[美食杰项目---菜品主页展示]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120730362</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120730362</guid><author>wzstd</author><pubDate>Tue, 12 Oct 2021 20:29:48 +0800</pubDate><description><![CDATA[美食杰项目—菜品主页展示
效果展示：

从内容精选点击进入菜品首页
把菜品页所需要要的数据进行渲染到页面上
当点击收藏时切换到已收藏，实现来回切换效果
输入评论点击提交时，让评论的数据显示在下方页面中

效果图展示：

点击进入菜品首页

数据渲染，及收藏，已收藏切换

数据渲染

评论提交显示


具体实现请看如下代码及理解：
1.detail.vue

把头部，内容及评论分三个组件
在此组件中请求数据以及保存数据

&lt;template&gt;
  &lt;div class="menu-detai]]></description><category></category></item><item><title><![CDATA[美食杰项目--菜谱大全二]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120705179</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120705179</guid><author>wzstd</author><pubDate>Mon, 11 Oct 2021 20:20:19 +0800</pubDate><description><![CDATA[实现效果展示：

点击“炒”，“蒸”等让数据显示出来
每次显示5条数据
数据比较多的时候分页的效果，默认显示5条数据



效果图展示

当他点击加载loading时，出现遮罩层的效果

1.显示数据

]]></description><category></category></item><item><title><![CDATA[2021前端面试题终结版]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120691312</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120691312</guid><author>wzstd</author><pubDate>Sun, 10 Oct 2021 20:38:50 +0800</pubDate><description><![CDATA[1.如何实现⼀个div垂直居中（⾄少3种⽅法）\color{YellowGreen}{1. 如何实现⼀个div垂直居中（⾄少3种⽅法）  }1.如何实现⼀个div垂直居中（⾄少3种⽅法）
答：其实实现水平垂直剧中方法有很多：
第一种：定位：
第一种思路：
通过给div设置绝对定位，
并且left,right,top,bottom设置为0,margin:auto即可 以水平垂直居中
第二种思路：
通过给div设置绝对定位，.left为50%,top为50%,
再给div设置距左是自身的一半 即：margin-]]></description><category></category></item><item><title><![CDATA[美食杰项目----菜谱大全]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120675935</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120675935</guid><author>wzstd</author><pubDate>Sat, 09 Oct 2021 20:34:56 +0800</pubDate><description><![CDATA[美食杰项目----菜谱大全
实现效果介绍：

点击菜谱tab切换，类似于一个二级菜单
当他点击家常菜切换颜色，当它刷新的时候颜色不会掉
点击工艺，口味切换，也类似于一个二级菜单
当点击“炒”“蒸”时切换颜色，当它刷新的时候颜色不会掉和展开

效果图1.2

效果图3.4

代码展示如下：
data中存放的数据

classify:[],//存储tab切换的所有数据
classifyType:‘1-1’,//tab切换选中项(二级路由)
classifyName:‘1’,//定义刷新tab得值（一级路由）
/]]></description><category></category></item><item><title><![CDATA[美食杰项目---个人页和他人主页]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120658544</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120658544</guid><author>wzstd</author><pubDate>Fri, 08 Oct 2021 20:17:37 +0800</pubDate><description><![CDATA[美食杰项目—个人页和他人主页

跳转个人主页。
跳转他人主页。
点击他人关注或取消关注。
点击他人菜谱，粉丝及关注。

效果图展示
点击跳转到个人空间，个人空间没有关注和取消关注。

点击个人跳转如下图：

点击跳转到他人的主页，可以点击关注和跳转。

点击他人跳转如下图：

space.vue空间页
总体思路
1.显示别人的空间

a.地址栏中如有userid 则显示对应的用户数据

2.显示自身空间

a.如果没有userid  则默认显示自己信息
b.如果在菜谱中 点击自己 也是有userid传递
c]]></description><category></category></item><item><title><![CDATA[HTTP状态码]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120641142</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120641142</guid><author>wzstd</author><pubDate>Thu, 07 Oct 2021 20:38:19 +0800</pubDate><description><![CDATA[http状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server
header）用以响应浏览器的请求。 HTTP状态码的英文为HTTP Status Code。

下面是常见的HTTP状态码：

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误



1xx (临时响应)
表示临时响应并需要请求者继续执行操]]></description><category></category></item><item><title><![CDATA[路由导航守卫]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120631042</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120631042</guid><author>wzstd</author><pubDate>Wed, 06 Oct 2021 23:29:45 +0800</pubDate><description><![CDATA[vue-router有哪几种导航钩子（ 导航守卫 ）？
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。
**参数或查询的改变并不会触发进入/离开的导航守卫。**你可以通过观察 $route 对象响应路由参数的变化)来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
分为三大类：全局守卫、路由守卫、组件守卫
全局前置守卫
你可以使用 router.beforeEach 注册一个]]></description><category></category></item><item><title><![CDATA[vue面试题，快来看一看吧！！]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120609536</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120609536</guid><author>wzstd</author><pubDate>Mon, 04 Oct 2021 23:16:37 +0800</pubDate><description><![CDATA[1：说说你对 SPA 单页面的理解？
SPA：全称（single-page application)
 概念：仅在Web页面初始化时加载相对应的代码。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转。利用的是路由机制实现代码的变换，避免页面的重新加载

优点：
   • 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲 染；
   • 基于上面一点，SPA 相对对服务器压力小；
   • 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：]]></description><category></category></item><item><title><![CDATA[vuex理解]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120599978</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120599978</guid><author>wzstd</author><pubDate>Sun, 03 Oct 2021 23:59:25 +0800</pubDate><description><![CDATA[Vuex的五个属性
state, getters, mutations, actions, modules。
state：vuex的基本数据,用来存储变量。
geeter：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutation：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
Action 类似]]></description><category></category></item><item><title><![CDATA[组件间传参]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120599785</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120599785</guid><author>wzstd</author><pubDate>Sun, 03 Oct 2021 23:31:44 +0800</pubDate><description><![CDATA[props和emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit
父组件向子组件传递数据是通过prop传递的，
子组件传递数据给父组件是通过emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit触发事件来做到的。
2.中央事件总线(bus)
如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。
新建一个Vue事件bus对象，然后通过bus.emit触发事件，bus.emit触发事件，bus.emit触发事件，bus.on监.]]></description><category></category></item><item><title><![CDATA[路由参数传递]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120590381</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120590381</guid><author>wzstd</author><pubDate>Sat, 02 Oct 2021 23:11:38 +0800</pubDate><description><![CDATA[路由参数传递
传递参数主要有两种类型：params和query
params的类型
配置路由格式：/router/:id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router/123,/router/abc
query的类型
配置路由格式：/router，也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/router?id=123,/router?id=abc
后面跟的是字符串形式，想在to里面写东西写成对象的形式，{}，对象里面有键和值，要想传递]]></description><category></category></item><item><title><![CDATA[回流和重绘]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120590280</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120590280</guid><author>wzstd</author><pubDate>Sat, 02 Oct 2021 23:05:34 +0800</pubDate><description><![CDATA[回流和重绘

1.html加载时发生了什么


在页面加载时，浏览器把获取到的html代码解析成一个dom树，dom树里包含了所有html标签，包括display:none隐藏，还有用js动态添加的元素等
浏览器把所有样式（用户定义的css和用户代理）解析成样式结构体
dom tree和样式结构体组合后构建render tree,render tree类似与dom tree,但区别很大，因为render tree能识别样式，render tree中每个node都有自己的style,而且render tree]]></description><category></category></item><item><title><![CDATA[vue生命周期相关面试题]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120525185</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120525185</guid><author>wzstd</author><pubDate>Tue, 28 Sep 2021 20:04:35 +0800</pubDate><description><![CDATA[vue生命周期相关面试题
总共分为8个阶段：创建前/创建后，载入前/后，更新前/后，销毁前/后.\color{skyblue}{总共分为8个阶段：创建前/创建后，载入前/后，更新前/后，销毁前/后}.总共分为8个阶段：创建前/创建后，载入前/后，更新前/后，销毁前/后.

创建前/后：在beforemount阶段，vue实例的$el和data都初始化了，但挂载 之前还是为虚拟的dom节点，data.message还未替换。在mounted阶段，vue 实例挂载完成，data.message成功渲染。


更]]></description><category></category></item><item><title><![CDATA[add todo效果]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120516714</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120516714</guid><author>wzstd</author><pubDate>Tue, 28 Sep 2021 08:02:17 +0800</pubDate><description><![CDATA[Add todo效果图


首先创建一个vue的项目
当输入内容是进行添加
点击筛选条数时进行筛选
点击查看所有筛选所有的条数
点击未完成筛选未完成的
点击已完成筛选已完成的

Home.vue
&lt;template&gt;
  &lt;div class="home"&gt;
    &lt;h3 class="title"&gt;add todo&lt;/h3&gt;
    &lt;div class="title-inp"&gt;
      &lt;div class="inp"&gt;
  ]]></description><category></category></item><item><title><![CDATA[美食杰项目--首页]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120475999</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120475999</guid><author>wzstd</author><pubDate>Mon, 27 Sep 2021 08:20:06 +0800</pubDate><description><![CDATA[美食杰效果图展示
需要实现的一些效果
头部
轮播图
内容：需要没5个加载一次

头部的效果代码\color{YellowGreen}{头部的效果代码}头部的效果代码
&lt;template&gt;
  &lt;el-header style="height: auto;"&gt;
    &lt;div class="header"&gt;
      &lt;div class="header_c"&gt;
        &lt;el-row type="flex" justify="start" a]]></description><category></category></item><item><title><![CDATA[放大镜效果]]></title><link>https://blog.youkuaiyun.com/wzstd/article/details/120492162</link><guid>https://blog.youkuaiyun.com/wzstd/article/details/120492162</guid><author>wzstd</author><pubDate>Sun, 26 Sep 2021 16:51:41 +0800</pubDate><description><![CDATA[放大镜效果展示：
注：图片自己修改一下路径就可以啦！\color{red}{注：图片自己修改一下路径就可以啦！}注：图片自己修改一下路径就可以啦！
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;放大镜&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            p]]></description><category></category></item></channel></rss>