qq_34261347的博客

从状态说起[HTTP 无状态]我们知道，HTTP是无状态的，也就是说，HTTP请求方和响应方间无法维护状态，都是一次性的，它不知道前后的请求都发生了什么但有的场景下，我们需要维护状态，最常见的，一个用户登录微博，发布，关注，评论，都是应该在登录后的用户状态下的[标记]在学校或公司，入学入职那一天起，会录入你的身份、账户信息，然后给你发个卡，今后在园区内，你的门禁、打卡、消费都只需要刷这张卡[前端存储]这就涉及一发，一存，一带，发好办，登录接口直接返回给前端，存储就需要前端想办法了，前提是，你要

常见方式首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好<template> <div class="example-container"> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }" > {{i

功能分析vue项目中所有的请求一般都是通过axios，所以我们需要给axios新增请求和响应拦截，在请求拦截中显示loading,和响应拦截中关闭loading。所以我们需要定义两个全局方法，一个是显示loading，叫showLoading(),另一个叫showLoading(),另一个叫showLoading(),另一个叫hideLoading()关闭全屏loading。代码实现上面的梳理，我们明确了，需要定义两个全局方法，一个显示loading一个关闭loading，这里我们定义一个Vue的插

地图（china map）// html<div ref="fillcontainer"> <div id="fundPosition"></div></div>//js<script>import echarts from 'echarts'; // 引入echarts插件import '../../../node_modules/echarts/map/js/china.js'; // 引入china map数据import

导入// 结构<template> <div> <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" >导入</el-button> <el-dialog :title="upload.title" :visible.sync="upload.open" width:

工具组件<template> <div class="right-btn"> <el-row> <el-tooltip effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" > <el-button size="mini" circle icon="el-icon-search"

<template> <el-breadcrumb separator="/"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item, index) in levelLst" :key="item.path" > <span v-if="item.redirect === 'noRedirect' || index === l

登录页面<template> <div class="login"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" > <h3>vue公众号后台管理系统</h3> <el-form-item prop="username"> <el-input v

slot 不具名插槽// App 组件<template> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div></template><script> import Test from '@/component/Test.vue'; export default { components: { T

如果有传参数的需求比如说做数据筛选功能可以使用闭包函数（也叫匿名函数）实现<div> <tr v-for="(item, index) in arr" v-if="myfilter(index)"> <td>{{item.username}}</td> <td>{{item.sex}}</td> <td>{{item.grade}}</td> </tr></div>

什么是mixinsmixins是一种分发Vue组件中可复用功能的一种灵活方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项如何应用mixins定义一个混入对象// mixin.jsexport const myMixin = { data () { return { num: 1 } }, created () { this.getList(); }, methods: { getList () { con

安装vuexnpm install vuex --save在main.js中使用import Vuex from 'vuex';Vue.use(Vuex);state.js（用来定义初始化状态）const state = { name: 'heqiuyu', age: 18};export default state;getters.js （用来获取state的状态，而不是直接使用state）export const name = (state) => { retur

EventBus的简介EventBus又称为事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。如何使用EventBus初始化首先创建事件总线并将其导出，方便其他模块使用或者监听它，有两种方式来处理第一种，创建一个event_bus.js文件//

在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录 token, 用户的地址信息等使用全局变量原理: 设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用 export default 暴露出去，在 main.js 里面使用 Vue.prototype 挂载到 vue 实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件// global.jsconst token = 'sjldkfsjdlfksjdf';const isLo.

项目中有一些路由是需要登录才可以进入的，比如首页，个人中心等等有一些路由是不需要登录就可以进入，比如登录页，注册页，忘记密码等等那如何判断路由是否需要登录呢？在router.js中添加meta区分比如登录注册页面，不需要登录即可进入，那么我们把meta中的isLogin标志设置为false{ // 登录 path: '/login', component: login, meta: { isLogin: false }},{ // 注册 path: '/register',

我们将从以下三个层面来优化Vue代码层面的优化webpack配置层面的优化3.基础的Web技术层面的优化代码层面的优化1.1 v-if 和 v-show区分使用场景v-if是真正的条件渲染，确保切换过程中条件快内的事件监听器和子组件适当的被销毁和重建，也是惰性的，如果在初始渲染时条件为假，什么都不做，知道条件为真时，才会渲染v-show，元素总是会被渲染，并且只是简单的基于CSS的display属性进行切换总结：v-if适用于在运行时很少改变条件，不需要频繁切换条件，而v-sho.

// 页面结构<el-upload class="avatar-uploader" :action="uploadUrl" :http-request="upload" :show-file-list="false" :before-upload="beforeUpload" list-type="picture-card"> <img v-if="addSizeForm.siteLogo" :src="addSizeForm.sizeLogo" class="avata

Vuexvuex是一个专为vue.js应用程序开发的状态管理模式，它采用几种存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，简言之，就是全局状态管理Statevuex使用单一状态树，用一个对象就包含了全部的应用层级状态，意味着，每个应用将仅仅包含一个store实例，state为store中最基本的状态，state中的状态是响应式的，那么当状态变更时，监视状态的vue组件也会自动更新，提前在store中初始化所有属性，当需要在对象上添加新属性时，使用Vue.set(o.