vue-shequ

最新推荐文章于 2024-02-27 19:29:00 发布

CV攻城师

最新推荐文章于 2024-02-27 19:29:00 发布

阅读量1.3k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/CF1402345274/article/details/110785260

版权

1126

提到了一个是设计产品的网站 蓝湖
box-sizing:border-box 变成怪异模型，不加就是标准模型：border padding 都不在盒子内容里面，但是怪异模型的就包括了
感觉应用事件最多的就是监听器 watch

Container 布局组件

考虑到每一个页面都要写同样的宽高大小，所以我们就引出了一个公共的布局组件 Container.vue
以及写好了一个公共的布局组件了，但是还会有不同的页面是只需要内容不需要头部的那面就要使用

做一个公共的组件 Container.vue 用命名插槽 <slot name="head"></slot> 接收就行。
插槽 <temaplate #head> <slot name="head">

<!-- 父级 -->
<template #head>
  <span>任何代码内容</span>
</template>
<!-- 子级 -->
<!-- <div class="container-header"> -->
<template>
  <!-- 布局的容器组件 -->
  <div class="container">
    <!-- <div v-if="$slots.head" class="container-header"> -->
    <div class="container-header">
      <slot name="head"></slot>
    </div>
    <div class="container-cantent">
      <slot name="ma"></slot>
    </div>
    <div class="container-footer">
      <slot name="foo"></slot>
    </div>
  </div>
</template>

<style lang="stylus">
  .container
    width 660px
    border-radius 5px
    border 1px solid #ccc
    margin 30px auto
    .container-header
      background-color #ccc
      padding:10px
    .container-cantent
      background-color #eee
      padding 20px
    .container-footer
      background-color #fff
      padding 20px
</style>

1126 vue-shequ

axios stylus Flex router element-ui scoped 公共布局组件插槽 github 部署 v-if+v-for 事件修饰符.native

触发辅助函监听事件 watch location 和 $route 和 $parent 和 $children 以及实例 property 的相关方法

把它看作大家的第一个 vue 项目。
结合 vue 社区提供的一个 API 接口做一个和他一模一样的网站
不做:注册，搜索可以登录，展示文章，展示商品，可以评论，可以点赞
只做:登录展示，分页，登录后评论

登录流程发布流程浏览文档流程点击头像到信息页退出
布局的容器组件
我们根据接口应该能做的就是直接进入首页，登录就是输入一个码，如果成功了就展示你的小头像，不成功就不显示。
进入文章业可以点赞和回复，但是也要分为两种，要看是否登录。
思路：
一上来不能随便写，要想先干什么
是不是一上来你看到什么就要些什么呀，上来是不是看到了首页呀，不是一上来就写个人中心页。基本不管些什么东西都是先写首页。看首页哪些东西是路由哪些不是路由
上来没有登录，但是有登陆接口，先写页面接着就有思路了。
如果你一进去就看见登录就开始做登录，当然这是管理系统的，不是门户类网站的。看到小功能了就安装一些小插件，还有发请求 axios , element-ui

步骤：

第一阶段

先做 axios 封装，做相关的一些配置
写一个公共的样式在 main.js 中导入全局引用。
然后写首页 Header 页以及 Home 页，在 Home 页中插入公共布局组件 Container.vue 设置公共样式和具名插槽 <template #xx> + <slot name="xx">

第二阶段
在 created 和 mounted 这两个发请求触发我们的 axios 都差不多，这两个都是同步的生命钩子，created 执行完了， mounted 就执行。axios 发请求都是异步的，请求的结果肯定在这两个人之后执行，但是通常习惯用 created 发请求。他们两者又有什么区别呢？
一般 v-for 要搭配 v-if 去使用展示列表数据。
get 请求如何接收参数: 1. get(‘topics?page=1&limit=20’) 2. get(’/topics’,{params:{page:2,tab:‘sak’}})
接下来写好地址栏信息了，就要写点击事件
谁改变我要拿到谁改变的那个值，那么监听事件是最好的解决方案。watch 需要注意的地方就是 监听谁，方法叫什么前后改变的值是都一上来就执行当前获取到的
改变点击路由时颜色的高亮 exact :class="{active:!$route.query.tab}" .router-link-active
给每个标题加上标签,首先要分清楚他后台是怎样来区分的 top:true 是否置顶 good:true 是否是精华 tab:ask 分类
但是现在拿到的是字母，要做一个方法返回中文，所以就要用到过滤器，帮助我们格式化的
还有一点就是判断标签在问答和招聘的时候是消失的，所以要判断一下。
还有就是给属性名加判断
但是后期会有一点点小问题 1:17:00 commit("getText", null); 这样就没有按钮的那个事了这个遗留一点小问题
现在开始做 id 跳转页面 1:24:00
接下来就要做点击跳转页面的问题，有页面的话就要有路由，写 Topics.vue,但是想要看到对应的内容就要找相对应的接口,进入该页面了之后拿 id 的话是怎么拿，我想的是跟拿页面地址一样。
总的流程是先写一个组件，组件展示文章，就要写 store 数据，同时也是页面就要写 router ,最主要的就是我跳转到了这个页面怎么去后台取这个数据，更新我们的 store 数据拿 id ,
作业

写日期
反复点的时候有问题，提供了一种方案，每次点之前都清空掉 2. 写成一个 data，请求之后再去改
日期的样式放到最后
标题下的日期
每个页面的样式

往下做的话怎么做呢，往下收藏和评论都是跟登录有关，他说登录我们呢也不会做
1. 登陆的接口 用户
记录一下这个问题，到时候老师解决的话就写上解决的方案

获取地址栏信息判断展示相对应的信息配套 watch 一起用

刚进来就要判断地址栏是哪个网页的信息，怎么去获取呢，有两种方法。

location.search location.hash
this.$route.query ,但是拿到了之后要干什么呢。

axios 发请求代理服务器

org 的请求总超时，.com 涉及到跨域，所以了代理。本地代理是给 vue-cli 做的，编译打包了之后就没有了 vue-cli，就是死的 index.html,要放到公网服务器上，请求就没有代理了，此时就需要后台去解决了，要么我们在我们的服务器上去做代理。
遇到了一个大麻烦: axios 发请求，从 http://localhost:8080/ 到 https://vue-js.com/api/v1 拿数据被阻止了，不允许跨域请求，所以必要要做一个代理服务器请求。在服务器上实现跨域，代理就是换成别人发请求。
什么叫代理发请求:将我们 http://localhost:8080/ 发的请求代理到别的地方，让别人去发请求。去 vue-cli 里面查。devServer.proxy
正常 axios 发请求 api 接口 https://vue-js.org/api/v1 会请求不到显示超时，就项目根目录下创建了一个 vue.config.js 文件地址换成 https://vue-js.com/api/v1 新建立代理服务器请求。
路径重写 axios 用 /api 发请求，然后就把 /api 设置为空，就指到 target: “https://vue-js.com/api/v1”,
/api/topics 发的请求
由于你的服务器做了代理，将 /api 代理到了 https://vue-js.com/api/v1
最终的请求 https://vue-js.com/api/v1/topics

//@@@@@@@@@@@@@  一、根目录下创建 vue.config.js @@@@@@@@@@@@@
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        // 这个是代理的地方
        target: "https://vue-js.com/api/v1",
        ws: true, //缓存
        changeOrigin: true,
        // 路径重写 axios 用 /api 发请求，然后就把 /api 设置为空， 就指到 target: "https://vue-js.com/api/v1",
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};
//@@@@@@@@@@@@@ 二、封装好的 axios.js @@@@@@@@@@@@@@@@@
import axios from "axios";
// import Vue from "vue";
// https://vue-js.org/api/v1 改成 https://vue-js.com/api/v1
// 以指定将被用在各个请求的配置默认值
axios.defaults.baseURL = "/api";

axios.interceptors.response.use((res) => res.data);
// 因为每次请求回来的数据里面都会有一个 data 添加响应拦截器 对响应数据做点什么
// axios.interceptors.response.use(function (response) {
//   return response;
// }, function (error) {
//   // 对响应错误做点什么
//   return Promise.reject(error);
// });
// 为了区分自己的封装 就把 axios 变成 $axios
const $axios = axios;
// 然后导出出去，那个组建想用就导入使用
export default $axios;
// 这个是给全部组件添加的，这个更省事，因为请求的数据放在 vuex 中了，就不需要在全局中引入 axios 。
// Vue.prototype.$http = axios;

//@@@@@@@@@@@@@  三、组件内发请求的地方  @@@@@@@@@@@@@@@@@@
const Text = await $axios.get(`/topics${queryStr}`);
//   /api/topics 发的请求
// 由于你的服务器做了代理 ，将 /api 代理到了 https://vue-js.com/api/v1
// 最终的请求 https://vue-js.com/api/v1/topics

部署

VUE 变成 HTML npm run build，把 src 内写的代码打包成 dist 文件夹下，然后起一个服务器 serve .
建立仓库，初始化文件，然后克隆，git clone 地址然后新建分支 git checkout -b gh-pages 只有这个分支下的页面才能被正常访问， git push 新建分支和主分支是一模一样的，版本已经做好了，直接上传就可以了，但是他会提示上传到哪里。

触发 Actions 的方式有两种，以及拿取 state 的方法

// 方法一
import { mapActions, mapState } from "vuex";
this.getText(tab)  //想在触发的地方触发即可
  methods: {
    ...mapActions(["getText"]),
  },
  computed: {
    ...mapState(["arrText"]),  //然后就可以直接 arrText使用了
    this.$store.state.arrText
  },
// 方法二
this.$store.dispatch("getText", tab);

这个是最最主要的侦听器 watch (任何可以改变的东西他都可以监听)

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

.native 是原生的意思
总的意思就是在组件上绑定，不是在 HTML 标签绑定。像 ul li a span 这类标签绑定没有用，只有在组件身上绑定才有用。

<router-link @click.native="handle" tag="a" exact to="/?tab=all">
  全部
</router-link>
<Home @click.native></Home>
<header @click.native></header>

handle(){
  console.log(location.hash);
}

  watch: {
    "$route.query": {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue);
        const { tab } = newValue;
        this.getText(tab);
        // this.$store.dispatch("getText", tab);
      },
      immediate: true,  //一上来就执行侦听获取到当前的 $route.query 做展示
    },
  },
  methods: {
    ...mapActions(["getText"]),
  },

route 点击改变颜色

<!-- 这是第一种方案 -->
<!-- 也是最简便的，只要在样式上自己喜欢的颜色就行 .router-link-active -->
<router-link
  tag="a"
  :class="{'router-link-active':!$route.query.tab}"
  exact
  to="/?tab=all"
  >全部</router-link
>
<!-- 这个是第二种方案 -->
<!-- 必须要给每个理由加上 class 名，添加 exact 严格匹配-->
<!-- 但是还要加上 :class="{active:!$route.query.tab}" 要不然上进页面是没有颜色， 必经点击了才会触发 active-class="active" -->
<router-link
  active-class="active"
  :class="{active:!$route.query.tab}"
  tag="a"
  exact
  to="/?tab=all"
  >全部</router-link
>
<router-link active-class="active" tag="a" exact to="/?tab=good"
  >精华</router-link
>
<router-link active-class="active" tag="a" exact to="/?tab=share"
  >分享</router-link
>
<router-link active-class="active" tag="a" exact to="/?tab=ask"
  >问答</router-link
>
<router-link active-class="active" tag="a" exact to="/?tab=job"
  >招聘</router-link
>

xxx

思路:我们不管干什么都是根据页面来判断的，然而拿到页面地址栏信息的方式有两种 1. location.search location.pathname 2. this.$route.query,
.native
watch
exact
出现的错误：自己把 watch 里面的方法当成自己写的方法，还有就是把 immeidace 写到了 $route.query 的外层,监听不到就请求不了数据，就没有展示数据
过滤器 filters 完全不会
moment.js
接下来就是跳页考虑有没有接口
动态路由参数 params

过滤器 filters

干嘛的:用于一些常见的文本格式化
怎么用:过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
用在哪里:双花括号插值和 v-bind 表达式

赋值解构

const lo = this.$route.query;
console.log(lo);
//{tab: "job"}
console.log(lo.tab);
// job
const { tab } = this.$route.query;
console.log(tab);
// job

1201

任务

评论展示
做一个假的接口
根据初始值，判断的类型不一样，一般对象的初始值都会写成 null,为什么用 null
开始做登录
记住老师说的流程
刷新保存，退出
应用 sessionStorage.setItem 进行存储
记住 felx over-flow:hidden flex-grow 容器项目轴线
改显示的内容收藏，点赞，回复按钮

登录,登录状态下刷新和退出

xxx

更好的用户体验
点击新的文章会有老的文章会出现，每次请求之前先清空在请求
只有在登录了才会显示评论

commit("getTopic", null); //点击新的文章会有老的文章会出现，每次请求之前先清空在请求

async login() {
  const { token } = this;
  // const token = this.token
  if (token.trim()) {
    await this.getUserInfo(token);
    if (this.$route.path !== "/") {
      this.$router.push("/");
    }
  }
},
removeKey() {
  this.$store.commit("getUserInfo", null);
  sessionStorage.removeItem("Tokenkey");
  if (this.$route.path !== "/") {
    this.$router.push("/");
  }
},

<Container v-if="topic.replies.length && UserInfo">
<Container v-if="UserInfo">

请求文章的时候加上 accesstoken 参数可以得到改文章用户是否收藏了或者文章评论用户

收藏
赞

测试收藏，点赞没有权限

如果不加 v-if="User" 会报错，因为页面一上来就会执行代码，然而发请求数据还没有拿到呢，所以会报错，所以要加一层判断，这样就不会报错了。

<template v-if="User">
  <img :src="User.avatar_url" alt="" />
  <span>{{ User.loginname }}</span>
  <span>{{ User.score }}积分</span>
  <div><img src="" alt="" /><span>@{{ User.githubUsername }}</span></div>
  <span>注册时间{{last(User.create_at)}}</span>
</template>

flex

display flex
justify-content center  左右居中
align-items center  去除边高上下居中
flex-shrink 0 不改变原本元素的大小
flex-grow 1  放到最大
overflow hidden //溢出隐藏
text-overflow ellipsis  //溢出显示标点符号
white-space nowrap  //不让换行

老师说过 flex 样式
居中样式，三个为例，有交互的话就用一个盒子套着，没有的话就不需要，然后最右边的盒子放到最大，剩下的两个靠在最右边

记录一下自己把功能做出来的最大喜悦

老师安排:在别人的个人中心页点击自己的头像可以查看自己的个人中心页
我做到了超额完成:在任何地方都可以点击头像都可以看到自己的页面。
思路

在任何地方点击头像都会跳到个人中心页

首先点击头像就跳到个人中心的页面
跳到该页面之后就开始拿数据做展示

怎么跳
怎么拿数据

点击跳页面

<router-link to="/user/Eli-v12">
  <img :src="UserInfo.avatar_url" alt="" />
</router-link>

拿数据:

跳到该页面后地址栏会显示页面的所在地址
然后跟地址栏拿当前 id 的信息发送给后台拿到当前 id 相关的全部数据
拿到了之后就做展示呗

随时监听页面地址的变化，如果有变化的话就把相应的那个 id 传过去发请求

  watch: {
    "$route.params.User_Id": {
      handler(newValue, oldValue) {
        if (newValue === "Eli-v12") {
          this.getUser(newValue);
        }else{
          this.getUser(newValue);
        }
      },
    },
  },

还有解决一个闪现的问题

1203 始终记得老师说的一句话。你知道你现在要做什么吗，流程是怎样的。

展示个人中心页 watch 侦听路由的变化
先捕获到当前是展示谁的个人中心，然后用名字去发请求拿数据，这是官方提供了一个接口 get /user/:loginname 用户详情 可以拿的
然后拿到数据了就可以用数据做展示了呀
也就是 User.vue 组件
唯一的难点就是跳转到新的页面的时候数据并不会消失，因为没有刷新，所以数据没有消失
接下来要做的就是刷新页面之后数据消失了怎么才能展示页面。

// 第一次发请求的方法
created() {
  const User_Id = this.$route.params.User_Id;
  console.log('页面刷新，进入到个人信息页面','id 是:',User_Id );
  this.getUser(User_Id);
  },
// 第二次发请求的方法
immediate:true

刷新之后为什么不见了呢
刚进入 MoreTopics 页面的时候 User 个人的数据还在，通过 store 的 getters 计算属性拿到 User 数据就可以做展示了。
看 store 中 User 是否存在
解决刷新之后所有页面数据都不存在了，当前页面拿不到数据，然后在此发请求。以下就是解决办法

  created() {
    // console.log(this.$store.state.User); //原对象没有变
    // 看 store 中 User 是否存在
    if (!this.User) {
      const User_Id = this.$route.params.User_Id;
      console.log(User_Id);
      this.getUser(User_Id);
    }
  },
  methods: {
    // ...mapActions(['getUser']),
  },

给
store 的计算属性 gerters
分页器属性

动态路由匹配

什么叫动态路由
某种模式匹配到的所有路由，都映射到同一个组件上，使用同一个组件来渲染，就叫做动态路由。
怎么用
{ path: '/user/:id', component: User }
参数值是 :id ，用 this.$route.params 来输出表示。
?tab='ask' 是查询参数，用 $route.query 来获取。
动态路由参数 :User_Id 说

  {
    path: "/topic/:id",
    name: "Topic",
    component: Topic,
  },
  {
    path: "/User/:User_Id",
    name: "User",
    component: User,
  },
  {
    path: "/User/:User_Id/topics",
    name: "MoreTopics1",
    component: MoreTopics1,
  },

对路由的参数变化作出响应，watch
捕获所有路由或者 404 not found 路由 {path：_ component:xxxx.vue}
当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: ‘_’ } 通常用于客户端 404 错误。
匹配规则：从上到下顺序匹配

Vue 生命钩子

beforeCreate 之前做的事情是创建 Vue 对象
created 之前做的事就是:获取监听组件内 data 对象数据和事件。
beforeMount 之前做的事就是：把 data 对象数据和 Vue 语法写的模板编译成 HTML。
mounted 之前做的事就是：把编译好的 HTML 渲染到页面，此时已经拿到 dom 节点和内容。
mounted 只执行一次。

updated:data 数据更新的时候会触发

要记住现在是干什么事

截取数组展示前五条 slice(0,5)

slice

slice(start,end)
该方法是对数组进行部分截取，该方法返回一个新数组,不会改变原数组
包含了源函数从 start 到 end 所指定的元素，但是不包括 end 元素

a = [1, 2, 3, 4, 5, 6];
a.slice(0, 3); // 1,2,3 从下标为0的地方截取到下标为3之前的数

要写在计算属性里面

computed: {
  showCreateTopics(){
    const topics = this.User.recent_topics
    return topics.length > 5 ? topics.slice(0,5) : topics
  }
}

name: ‘MoreTopics’ 命名路由

分页器分为两种使用方式

所有数据都获取了，然后分页
只拿了一个页面数据，然后分页

vue 中文社区 js 每日一题

Gerter 和 mapGetters 映射函数其实可以在反复的拿数据

Vuex 允许我们在 store 中定义 getter （可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数：
getters 内的函数的第二个参数是 store 的所有 getters

  state: {
    User: null,
  },
  getters: {
    // 对 User 进行计算
    recent_topics(state) {
      const { User } = state;
      return User ? User.recent_topics : [];
    },
  },

组件内使用

  computed: {
    ...mapGetters(["recent_topics"]),
  },

MoreTopics 刷新消失

因为在个人中心页的时候点击跳转是不会刷新的，所以数据还会在。就可以拿到数据做展示。
但是页面一刷新的话数据你的应用就会重启，只有之前做的登录账号数据被保存
如果你想要数据做展示的就在 created 页面刷新的时候判断是否为空，如果为空就再次发请求拿数据。然后又通过 getters 拿到了数据，又开始做展示了。

csdn 发现周边

接下来做首页的分页

先固定尝试做分页是否展示
怎传两个数据过去，然后那个怎么传两个数据过来

1204

高产似母猪

null {} 的区别

使用方法有两种 1.组件 2.指令方式

promise 这星期任务

原理记不住就给别人说你怎么用的，不能说错了。

todo promise vue-menu vue-shequ
async 就是把里面的东西变成 promise
所以 await 可以等
有时候能用，有时候不能用，但是为什么能用。
工作中遇到的问题:听早上视频

点击了之后就把 null 的清空掉

输入网址的不会错重定向

组件间交互

要用三种状态去展示
点的时候把之前的请求取消掉。

自己尝试安装 yarm

我现在要干嘛

我现在想把 vue 社区总结一下，完整归纳

功能都完善了吗 404 页面还没有弄清楚，加载页面的页面也不行
流程理清楚了没有
知识点都会了吗

主题首页，详情
由于网站的 post 都测试不了，只做了 get 获取的，写入的还没有做。

自己做用户所收藏的主题，只有自己的主页能看见。
要学会看 api 文档，解读完毕之后要看返回的对象是什么。然后基本网站都定死了。
两大模块:发布话题，评论话题做不了
全局过滤，全局指令，全局混入

以后项目会出现的很多：连续点击会出问题

打断连续点击的操作，之前做过
点击的时候加 loading 等待过程，如果有滚动条的话会出现一点抖动。

v - loading = "loading"; //局部加载
v - loading.fullscreen.lock = "loading"; // 全屏加载
                 @  +  @
element - loading - text = "拼命加载中";
element - loading - spinner = "el-icon-loading";
element - loading - background = "rgba(0, 0, 0, 0.8)";

async && await 1204 上(0:49:00)

Promise 在哪里用来着，在项目中有没有用过 Promise, async && await 就是 Promise 的应用。从实际从发，说不明白就说应用的东西，什么时候用过，发请求的时候 vuex 里面用了 actions,在 actions 里面发请求，前端我需要在请求之后去做一些事情，这是我就用到了 async && await 。

不加 async 和 await 的话基本动画不会出现效果，因为数据还没来呢，下面的代码就已经读完了。
加了 await 之后，它里面的代码执行完毕之后才会执行下面的代码。
await 等待 this.getText 完成

为什么 await 能够等 this.getText ,等 this.getText 能够成功才执行后面的语句。
1. 因为 this.getText 能够返回一个 promise
2. this.getText 是 async 函数。
3. resolve 是成功函数，就是等上面的执行完之后才会执行

总的来说就是 async await 就是 promise 的语法糖,把 .then() .catch() 省略了

index.js

    // async getText({ commit }, { tab, page }) {
    getText({ commit }, { tab, page }) {
      return new Promise(resolve,reject =>{
      commit("getText", null);
      const queryStr =
        tab && tab !== "all"
          ? `?tab=${tab}&page=${page}&limit=20`
          : `?tab=all&page=${page}&limit=20`;
      // const Text = await $axios.get(`/topics/${queryStr}`);
          $axios.get(`/topics/${queryStr}`).then((res)=>{
            commit("getText", res.data);
            resolve()
          })
      })
    }

await 会等 this.getText 成功，因为它会返回一个 Peomise, await 会等Promise 执行完毕，resolve 成功的时候, resolve() 成功的时候就是 .then() 执行完毕的时候。

第一种方法

  watch: {
    "$route.query": {
      async handler(newValue, oldValue) {
        const { tab, page } = newValue;
        this.loading = true;
        if (!page) {
          this.page = 1;
        }
        await this.getText({ tab, page: page || 1 });   //如果 index.js 发请求根本不需要等待那边的数据成功。 除非加 await 或者返回一个 Promise 函数以及 .then()
        this.loading = false;           //   this.loading = false  是在 resolve()之后执行的。
      },
      immediate: true,
    },
  },

第二种方法

如果想要在 resolve() 里面穿一些参数怎么办
这个 .then() 里面写的东西传到 resolve 成功方法里面执行。
这个 .catch() 里面写的东西传到 reject 失败方法里面执行。

  watch: {
    "$route.query": {
     async handler(newValue, oldValue) {
        const { tab, page } = newValue;
        this.loading = true;
        if (!page) {
          this.page = 1;
        }
       this.getText({ tab, page: page || 1 }).then(()=>}{
        //  这个 then  是成功后执行的内容，resolve 成功方法，可以传参数
         this.loading = false;
       }).catch(()=>{
        //  这个 catch  是失败后执行的内容，reject 失败方法
        console.log('请求失败执行的事情')
       })
      },
      immediate: true,
    },
  },

404 页面

通常的解决办法就是在路由 index.js 的最后面写上通配符 * 就可以。
因为路由已经写完，动态路由后面写什么都会出现，但是我已经跳到某个页面了，在输入错误怎么办呢。
然后怎么展示用户不存在呢
现在遗留一个问题，怎么把瞬间消失出现的解决掉。

面试

可以在 vue 社区中遇到那些不会的

在快速点击分类文章的时候会有问提，然后加了一个等待的过程，但是等待的过程和获取数据的过程。
自己做了一个级联组件，我用 element-ui 菜单组件做了一个递归,这个比较麻烦，然后我要创建其他的组件，要用函数递归，请求重复了，我要把请求取消掉。
再往小一点的就是:动态路由在当前页访问当前页的时候，动态路由参数换了想做替换数据展示，地址只是改变的一些参数，然后我就用就 watch 侦听。但是当时我就没有想到。
Promise 在哪里用来着，在项目中有没有用过 Promise, async && await 就是 Promise 的应用。从实际从发，说不明白就说应用的东西，什么时候用过，发请求的时候 vuex 里面用了 actions,在 actions 里面发请求，前端我需要在请求之后去做一些事情，这是我就用到了 async && await 。

请求，登录，存储，sessionStorage,存储登录状态，
请求冲突了怎么办，用什么方案去解决：现在我们解决的方法就是写了一个 loading 不让点了。
还有一个就是点击干掉。

CV攻城师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-shequ

1126提到了一个是设计产品的网站蓝湖box-sizing:border-box 变成怪异模型，不加就是标准模型：border padding 都不在盒子内容里面，但是怪异模型的就包括了感觉应用事件最多的就是监听器 watchContainer 布局组件考虑到每一个页面都要写同样的宽高大小，所以我们就引出了一个公共的布局组件 Container.vue以及写好了一个公共的布局组件了，但是还会有不同的页面是只需要内容不需要头部的那面就要使用做一个公共的组件 Container.vue 用
复制链接

扫一扫