随笔分类 - Vue3/Vue2框架生态链
摘要：1、后台session过期前端跳转到登录页面 axios 拦截器 可以拦截请求和返回，对于失效的情况后端可以返回一个状态码，如401， 使用axios拦截时判断是401，则跳转到指定页面，如login。本人项目中开发还没定接口规范，后端返回的就是success：true/false axios.in
阅读全文
摘要：一、css作用域 之前一直很困扰css的作用域问题，即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。导致在css中需要加上对应模块的html的id/class 使用css选择器 保证css的作用域不会变成全局 而被其它模块的css污染。 在vue中引入了sc
阅读全文
摘要：Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。 vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素，它是通过使用PostCSS来改变以下内容实现的： 一、混合使用全局属性和局部属性 二、关于子组件的根元素 使用
阅读全文
摘要：一、devServer 1、作用：通过devServer，可以在NodeJS架设起临时的服务器用于项目的运行与调试。 module.exports = { // webpack-dev-server 相关配置 devServer: { open: true, inline: true, host:
阅读全文
摘要：案例一 父组件parent.vue 子组件child.vue 上面按照这里的解析，子组件的html中的{{childData}}的值会随着父组件的值而改变，但是created里面的却不会发生改变(生命周期问题) 案例二 parent.vue child.vue created里面的却不会发生改变，
阅读全文
摘要：一、watch 使用方法 1、handler方法和immediate属性 这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的 watch 写法，修改过后的 watc
阅读全文
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。 使用Vue开发项目
阅读全文
摘要：一、原因 js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。 刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API
阅读全文
摘要：一、官方文档 路由元信息：定义路由的时候可以配置 meta 字段 那么如何访问这个 meta 字段呢？ 首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录。 例如，根据上面的路由配置，/foo/bar 这个 URL
阅读全文
摘要：一、实现前端分页 按照他的文档来写分页，最主要的是el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="wid
阅读全文
摘要：Mock.js 是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式，前端就不需要依赖后端的接口，可以直接使用模拟的数据了。 网上介绍mock的教程也较多，不过大多数看的比较模糊。其实使用起来非常简单，这里介绍在Vue工程中使用Mockjs，并且实现开发
阅读全文
摘要：1、设计校验方式： 我们表单验证的rules一般封装一个单独的js文件，比如我之前写的这个博客： ElementUI使用问题记录：设置路由+iconfont图标+自定义表单验证 可以修改下：公共的校验写在公共里面，个性化的校验写在methods里面 :rules="[rules.password,{
阅读全文
摘要：vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也
阅读全文
摘要：一、上传文件实现 两种实现方式： 1、直接action :action，必选参数，上传的地址，String类型。data()需要使用代理转发，要不然会有跨域的问题 :data，上传时附带的额外参数，object类型。用于传递其他的需要携带的参数，比如下面的srid 2、利用before-upload
阅读全文
摘要：计算属性是一个很邪门的东西，只要在它的函数里引用了 data 中的某个属性，当这个属性发生变化时，函数仿佛可以嗅探到这个变化，并自动重新执行。 上述代码会源源不断的打印出 b 的值。如果希望 a 依赖 data 中的 x 而变化，只需保证 a 函数中有 this.x 即可。如果函数中没有出现 dat
阅读全文
摘要：中文文档：vuex官方中文网站 一、vuex里面都有些什么内容？ 这个就是最基本也是完整的vuex代码： vuex 包含有五个基本的对象： 1、state：存储状态，也就是全局变量； 2、getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters，分别可以获
阅读全文
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 状态管理模式、集中式存储管理，一听就很高大上，蛮吓人的。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层
阅读全文
摘要：一、引入高德地图 一般用使用vue-cli webpack最简单粗暴的引入地图api的方法就是，在入口index.html的头部直接引入，记得一定要带上key，如果没有的话去高德地图api的官网申请一个。传送门如下：申请key传送门 这样你将所有的高德地图api引入你的项目，到这里你肯定会问，vue
阅读全文
摘要：一、vue项目利用vue-clipboard2实现剪切板的功能 1、安装vue-clipboard2插件：cnpm install --save vue-clipboard2 2、main.js添加 import VueClipboard from 'vue-clipboard2' Vue.use(
阅读全文
摘要：1、vue cli使用npm run dev报错cannot get / config/index.js里有两个环境：一个是build，一个dev。 在config/index.js里面修改，build:{assetsPublicPath:'./'}；dev里面不需要修改，dev:{assetsPu
阅读全文
浙公网安备 33010602011771号