SillyBoy的博客

Axios的请求拦截器和响应拦截器文章目录Axios的请求拦截器和响应拦截器1 请求拦截器2 响应拦截器1 请求拦截器作用在发送请求之前进行一些操作。如在请求体中使用Authorization字段提供token令牌。import axios from 'axios'import Vue from 'vue'axios.defaults.baseURL = 'http://127.0.0.1:9000/api/private/v1/'// 请求拦截器axios.intercept

Vue项目优化文章目录Vue项目优化1 代码层面的优化1 长列表性能优化2 事件的销毁3 图片懒加载4 路由懒加载5 按需加载插件2 Webpack层面的优化2.1 压缩图片2.2 提取公共代码2.3 模板预编译2.4 提取组件的 CSS2.5 优化 SourceMap2.6 构建结构输出分析2.7 Vue项目的编译优化3 基础的Web技术优化3.1 开启gzip压缩3.2 浏览器缓存3.3 CDN的使用3.4 Chrome Performance 查找性能瓶颈Vue项目的优化一般分为代码层面、Web

文章目录axios基础1 介绍2 特性3 语法3.1 GET请求方式3.2 POST请求方式3.3 使用axios发送GET请求3.4 使用axios发送POST请求4 示例4.1 GET请求方式4.2 POST请求方式4.3 直接使用axios发送GET请求4.4 直接使用axios发送POST请求4.5 请求拦截器4.6 响应拦截 统一处理http状态信息5 创建实例6 实例方法axios基础1 介绍Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。是专注于网络数

1 Vuex核心五个核心部分statemutationactiongetter1.1 statestate提供唯一的公共数据源。所有的全局共享的数据都放在Store的state里面定义。//创建store数据源，提供唯一公共数据const store = new Vue.Store({ state:{ count:0 }})组件访问数据方式一：<p>{{this.$store.state.count}}</p

$refs与ref是什么说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加&lt

文章目录Vue CLIVue CLI2初始化项目过程项目目录解析Vue CLI3初始化项目过程Vue CLI概念：CLI即Command-Line Interface，命令行界面，俗称脚手架。Vue CLI是官方发布vue.js项目脚手架。使用脚手架可以快速搭建Vue开发环境以及对应的webpack配置。脚手架依赖webpacknode.jsnpm安装脚手架npm install -g @vue-cli拉取2.x模板（旧版本）npm install -g @vue

文章目录Vue单文件组件1 传统组件的问题和解决方案1.1 问题1.2 解决方案2 Vue单文件组件的基本用法3 配置Vue单文件组件的loader加载器4 在webpack项目中使用vue5 webpack打包发布Vue单文件组件1 传统组件的问题和解决方案1.1 问题全局定义的组件必须保证组件定义的名称不重复。字符串模板缺乏语法高亮，在HTML有多行时，需要用到。不支持css，意味着当HTML和JavaScript组件化时，CSS明显被遗漏。没有构建步骤限制，只能使用HTML和ES5 J

文章目录Vue路由1 路由的基本概念与原理1.1 后端路由1.2 前端路由1.3 实现简易前端路由2 vue-router的基本使用2.1 基本使用步骤2.1.1 引入相关的库文件2.1.2 添加路由链接2.1.3 添加路由填充位2.1.4 定义路由组件2.1.5 配置路由规则并创建路由实例2.1.6 把路由挂载到Vue实例中2.1.7 完整示例2.2 路由重定向3 vue-router嵌套路由3.1 嵌套路由用法3.1.1 嵌套路由功能分析3.1.2 父级路由组件模板3.1.3 子级路由组件模板3.1.4

文章目录fetchaxiosfetch因为XMLHttpRequest配置和调用方法非常混乱，而且基于事件的异步模型书写不友好。浏览器自带。兼容不好：兼容包https://github.com/camsong/fetch-ie8fetch请求默认不带cookie,需要设置fetch(url,{credntials:‘include’})//text.json{ 'name':'silly', 'age':'20', "location":"zhengzhou"}

Mixins混入（mixins）是一种分发Vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80const obj = { methods:{ logClick:function(){ console.log('click'); }

Vue事件事件中可以写成事件名称，也可以写成函数调用。Vue事件必须定义在Vue实例的methods选项中，且Vue事件在调用的方法必须是在Vue实例中定义的，无法访问在修饰符修饰符是由.开头的指令后缀来表示。.prevent阻止事件默认行为，form表单提交@click.prevent=“sel($event)”.stop阻止事件继续传播阻止事件冒泡.capture添加事件监听器时，使用捕获模式默认采用冒泡模式.once事件只执行一次.passiv

文章目录绑定HTMLClass动态切换class和style动态切换style动态切换classtemplate绑定HTMLClass对象语法v-bind:class="{样式名=布尔值表达式}"。若布尔值为true则添加此样式，否则不添加。根据计算属性返回一个对象：v-bind:class=“计算属性名”computed:{ 计算属性名:function(){ return:{ 样式名：布尔值, //若布尔值为true则样式生效，否则无效。

文章目录生命周期钩子1 beforeCreate2 create3 beforeMount4 mount5 beforeUpdate6 update7 activted8 deactivated9 beforeDestroy10 destroy11 errorCaptured生命周期钩子1 beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。2 create在实例创建完成后被立即调用。数据观测 (data

文章目录Vue指令1 v-text2 v-html3 v-on4 v-show5 v-if6 v-bind7 v-for8 v-modelVue指令Vue指令指的是以v-开头的特殊语法。内容绑定，事件绑定显示切换，属性绑定列表循环，表单元素绑定序号指令说明1v-text设置标签的内容（只解析文本）2v-html设置元素的innerHTML3v-on监听 DOM 事件，为元素绑定事件4v-show根据表达式的真假，切换元素的显示和隐藏

问题做vue项目时，保存文件后，由于使用了Eslint规则来规范代码格式，缺失一个空格，结果报错了。报错信息为：error Missing space before function parentheses space-before-function-paren，表示要在方法名和括号之间留一个空格解决办法：在vue项目目录里面找到一个.eslintrc.js文件。在rules下面添加一条规则："space-before-function-paren": 0,。添加之后重新启动npm..

文章目录MVC和MVVM理解1 MVC2 MVVM3 不同点MVC和MVVM理解MVC与MVVM看似差不多，其实差着事儿呢，就好像这是两栋别墅，别墅表面上看起来都那样子，谁也不比谁多几个烟囱什么的，但是最大的区别就是别墅里面的“管家”不一样。管事的人身份不同，做事的方式跟流程也不一样。 古语云：你走你的路，我走我的路。你走路用脚，我走路用车。甭管咋样走，走就是了。1 MVCMVC即模型、视图、控制器（Model View Controller）简单来说就是通过controlle