<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[as_long_的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/as_long_</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; as_long_]]></copyright><item><title><![CDATA[git的本地操作]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/121134734</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/121134734</guid><author>as_long_</author><pubDate>Thu, 04 Nov 2021 09:54:30 +0800</pubDate><description><![CDATA[一、git介绍

Git 是一个免费的开源分布式版本控制系统，旨在快速高效地处理从小到大的所有项目。Git易于学习，占用空间性，性能快如闪电。它优于 Subversion、CVS、Perforce 和 ClearCase 等 SCM 工具，具有便宜的本地分支、方便的暂存区和多个工作流等功能。

git提供了三种不同的记录状态：已修改（modified ），已暂存（staged ），已提交（committed ）。和一个特殊的状态：未追踪（Untracked ）。

git提供了是三个不同的工作区用来存放不同]]></description><category></category></item><item><title><![CDATA[移动端适配]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120938719</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120938719</guid><author>as_long_</author><pubDate>Sun, 24 Oct 2021 19:32:30 +0800</pubDate><description><![CDATA[1.视口

视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口和视觉视口和理想视口。

2.布局视口

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的pc端页面在手机上显示问题。iOS，Android基本都将这个分别率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

3.视觉视口

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响视觉视口，布局视口仍..]]></description><category></category></item><item><title><![CDATA[美食杰-菜谱详情]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120729891</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120729891</guid><author>as_long_</author><pubDate>Tue, 12 Oct 2021 19:55:28 +0800</pubDate><description><![CDATA[一、介绍

菜谱详情分成了三个子组件
]]></description><category></category></item><item><title><![CDATA[美食杰-菜谱大全（右侧主体）]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120706285</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120706285</guid><author>as_long_</author><pubDate>Mon, 11 Oct 2021 17:10:52 +0800</pubDate><description><![CDATA[一、介绍

上一篇我一节介绍过菜谱大全里面的tab切换和下拉列表了，这一次我就向大家介绍菜谱大全里的右侧主体，右侧主体包含显示数据和分页器



二、过程

首先需要获取到显示的数据，需要在监听路由里面调用方法ThisgetMenus，在ThisgetMenus通过getMenus调用api向后端请求数据。在获取数据是需要按照要求传递参数，首先获取的路由下的query赋值给创建的变量query，然后创建一个params对象，里面的page属性值是变量query下的page，如果没有的话是1，里面的clas.]]></description><category></category></item><item><title><![CDATA[美食杰-菜谱大全]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120677483</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120677483</guid><author>as_long_</author><pubDate>Sat, 09 Oct 2021 20:07:03 +0800</pubDate><description><![CDATA[一、介绍

菜谱大全通过element组件进行渲染，实现了tab切换和下拉列表效果。



二、过程

首先导入api，在data里面创建需要用到的属性。


import {getClassify, getProperty, getMenus} from '@/service/api';


data


data() {
            return {
                classify:[],//存储tab切换的所有数据
                classifyTyp.]]></description><category></category></item><item><title><![CDATA[美食杰-个人空间]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120657785</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120657785</guid><author>as_long_</author><pubDate>Fri, 08 Oct 2021 20:07:57 +0800</pubDate><description><![CDATA[一、介绍

个人空间包含上面的基础信息和下面的发布、关注等。



二、过程

首先获取数据进行渲染，监听路由变化，来判断路由是否有userId，如果有则代表不是自己的空间，则通过api调用后端获取数据。如果没有，则代表是自己的空间，则获取vuex里的userInfo。在data里面创建一个名为userInfo的对象，然后把获取到的数据进行赋值。


 watch:{
    // 监听路由变化，来判断路由是否有信息，从而分辨是否为自己的空间
    $route:{
      async handle.]]></description><category></category></item><item><title><![CDATA[vue购物车效果]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120639601</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120639601</guid><author>as_long_</author><pubDate>Thu, 07 Oct 2021 19:28:19 +0800</pubDate><description><![CDATA[一、介绍

vue购物车效果实现了全选
]]></description><category></category></item><item><title><![CDATA[element-ui的使用]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120629456</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120629456</guid><author>as_long_</author><pubDate>Wed, 06 Oct 2021 21:31:22 +0800</pubDate><description><![CDATA[一、介绍

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

二、安装element


npm i element-ui -S


配置main.js文件


port Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'ele.]]></description><category></category></item><item><title><![CDATA[vue之vue-router]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120625104</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120625104</guid><author>as_long_</author><pubDate>Wed, 06 Oct 2021 16:47:52 +0800</pubDate><description><![CDATA[一、什么是vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

二、路由的安装


npm install vue-router

三、路由的配置




//引用..]]></description><category></category></item><item><title><![CDATA[vue面试题]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120617860</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120617860</guid><author>as_long_</author><pubDate>Tue, 05 Oct 2021 22:27:36 +0800</pubDate><description><![CDATA[1.MVVM的理解

MVVM分为Model、View、ViewModel三者

Model：代表数据模型，数据和业务逻辑都在model层中定义

View：代表UI视图，负责数据的展示

ViewModel：负责监听model中数据的改变并且控制视图的更新，处理用户交互操作

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在M]]></description><category></category></item><item><title><![CDATA[vuex五个核心属性]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120614256</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120614256</guid><author>as_long_</author><pubDate>Tue, 05 Oct 2021 17:10:58 +0800</pubDate><description><![CDATA[一、介绍

官网中介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装vuex


npm install vuex --save

二、vuex的核心

1、state

state存储的是
...]]></description><category></category></item><item><title><![CDATA[vue组件传参]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120607850</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120607850</guid><author>as_long_</author><pubDate>Mon, 04 Oct 2021 21:54:56 +0800</pubDate><description><![CDATA[1、父传子

在父组件通过import引入子组件，在父组件中通过v-bind绑定属性，在子组件中通过props获取绑定的属性，可以是数组，也可以是对象。

父组件：


&lt;template&gt;
  &lt;div class="home"&gt;
    &lt;about :info='info'/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import About from './About.vue'
export default]]></description><category></category></item><item><title><![CDATA[vue简易购物车效果]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120604750</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120604750</guid><author>as_long_</author><pubDate>Mon, 04 Oct 2021 16:26:28 +0800</pubDate><description><![CDATA[一、介绍

简易购物车包含点击向下添加商品，数量、总价、数量和库存相等无法点击。

页面展示  
]]></description><category></category></item><item><title><![CDATA[记事本效果]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120535572</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120535572</guid><author>as_long_</author><pubDate>Tue, 28 Sep 2021 19:29:39 +0800</pubDate><description><![CDATA[一、介绍

记事本的效果是输入完成任务按回车键，就会添加到下面，可以删除单个任务、也可以删除全部的任务。

展示：



二、过程

首先渲染页面


&lt;div class="home"&gt;
      &lt;input v-model="zhi" type="text" placeholder="请输入任务" @keyup.enter="change"&gt;
      &lt;div class="zhon"&gt;
        &lt;div v-for="(item,in...]]></description><category></category></item><item><title><![CDATA[美食杰-发布菜谱]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120476652</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120476652</guid><author>as_long_</author><pubDate>Mon, 27 Sep 2021 19:45:38 +0800</pubDate><description><![CDATA[一、介绍

美食杰的编辑个人资料是为了在登录之后，改变个人信息

页面展示：



二、过程


]]></description><category></category></item><item><title><![CDATA[美食杰-编辑个人资料]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120476814</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120476814</guid><author>as_long_</author><pubDate>Sun, 26 Sep 2021 19:31:10 +0800</pubDate><description><![CDATA[一、介绍

美食杰的编辑个人资料是在成功登录后，修改个人资料

页面展示：





二、过程

1.首先渲染页面edit，通过v-model双向数据绑定，获取改变的数据，再调用api


&lt;div class="edit"&gt;
    &lt;div class="edit-item"&gt;
      &lt;span class="label"&gt;修改头像&lt;/span&gt;
      &lt;upload-img
        imgMaxWidth="210"
    .]]></description><category></category></item><item><title><![CDATA[美食杰项目-首页]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120458102</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120458102</guid><author>as_long_</author><pubDate>Sat, 25 Sep 2021 17:36:14 +0800</pubDate><description><![CDATA[一、介绍

美食杰项目的首页是由header和home两个组件构成，组件里面使用了element组件库，实现了轮播图、下拉显示的效果

二、步骤

1、安装element组件库


npm i element-ui -S


2.在home组件的mounted里通过api向后端请求轮播图数据，再通过element进行渲染，代码如下：

获取数据：


getBanner().then(res =&gt; {
   this.bannerList = res.data.list
})

渲染：


&l...]]></description><category></category></item><item><title><![CDATA[美食杰项目-登录]]></title><link>https://blog.youkuaiyun.com/as_long_/article/details/120442204</link><guid>https://blog.youkuaiyun.com/as_long_/article/details/120442204</guid><author>as_long_</author><pubDate>Thu, 23 Sep 2021 20:37:22 +0800</pubDate><description><![CDATA[一、说明

使用element组件库进行页面布局，通过路由守卫验证登录状态

主要技术栈：

vuex库
	vue-router路由
	element组件库
二、过程

页面展示：



通过element进行页面布局

代码展示：

login.vue


&lt;template&gt;
  &lt;div class="login-section"&gt;
    &lt;!-- :rules="rules" --&gt;
    &lt;el-form
      label-position=".]]></description><category></category></item></channel></rss>