weixin_43297321的博客

全局前置守卫 用的多路由钩子eslint不验证此行买服务器买的百度的：https://cloud.baidu.com/campaign/Promotionai/index.html?track=cp:npinzhuan|pf:pc|pp:npinzhuan-biaoti|pu:wenzineirong|ci:|kw:10014512然后注册账号，可以用百度账号登录。...

一、axios 拦截器官方文档：http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8拦截器定义好后的请求数据方法有两种：一种是定义好拦截器的页面内直接写service axios请求；另一种，是另外一个页面导入拦截器，然后封装service请求（其实就是axios请求）。活跃于三个文件夹：view util api1、axios模块2、axios请求封装原理3、axios拦截器请求拦截器请求拦截器的作用是在请求

Mixins官方文档：https://cn.vuejs.org/v2/guide/mixins.html当有相同的方法、变量多次、多地方使用时，可以用混入。流程：封装并暴露—>哪用哪引—>调用—>使用局部混入（常用）：谁用谁引全局混入（不建议）：在main.js里面引入，谁都可以用。虽然简单，但容易造成污染。element ui在vue中占有的比重很大。官网：https://element.eleme.cn/2.0/#/zh-CN/component/carou

自定义指令除了内置指令外， 用户自定义的指令局部指令定义：directives:{自定义指令的名字：{自定义指令钩子函数(el){操作逻辑}}},bind：绑定指令到元素上，只执行一次inserted：绑定了指令的元素插入到页面中展示时调用，基本上都是操作这个钩子函数update：所有组件节点更新时调用componentUpdated：指令所在组件的节点及其子节点全部更新完成后调用unbind：解除指令和元素的绑定，只执行一次refsref和refs的使用在Vue中一般很少会

一、同级/兄弟组件传值传统方法：先逆传给父组件，然后正向传值给同级子组件中央事件总线：大大减少了事件之间的耦合性有点像逆向传值，需要先抛发事件，但与逆向传值不同的是：直接抛给vue实例，另外一个组件就可以直接使用了。.$emit(“自定义事件名”,“键值”);接收的数据在中央事件总线来，所以要先引入中央事件总线。. $on(“监听的事件名”,(val)={}); 匿名函数接收并处理数据二、vuex在创建项目的时候可以把vuex装进去，如果是后期需要使用vuex，也可以及时安装：npm i

路由旧版pptvue-cli 路由npm install vue-router --save引入路由，在src下创建一个router的文件夹用来存放路由在router文件夹下创建一个index.js用来配置路由，相当于路由的一个入口在index.js中写入如下内容进行路由配置import Vue from ‘vue’import Router from ‘vue-router’import Home from ‘…/pages/home.vue’import About from ‘…/p

路由vue-cli 路由npm install vue-router --save引入路由，在src下创建一个router的文件夹用来存放路由在router文件夹下创建一个index.js用来配置路由，相当于路由的一个入口在index.js中写入如下内容进行路由配置import Vue from ‘vue’import Router from ‘vue-router’import Home from ‘…/pages/home.vue’import About from ‘…/pages/

基本的环境搭建一个电脑上只有一个脚手架，我们现在要用的是4.0，可以了解一下2.0 。vue-cli 2.0最新的脚手架CLI vue-cli @4脚手架的作用帮助我们搭建框架，我们只需要写逻辑就好。脚手架的文件目录介绍src：写代码的地方public：外部资源App.vue 全局根组件删除默认组件components文件夹下的Helloworld.vue，然后在App.vue文件里把跟helloworld有关的都删掉下载一个插件Vetur ，让VScode接收以点.vue结尾的

从

复习：过滤器—在不改变原数据的情况下，格式化视图中所展示的内容。局部与全局过滤器的使用方式一样局部过滤器只对当前实例有效全局filter局部filters加上 组件数据传递vue的核心是数据驱动与组件化组件 component全局局部组件，封装可以重复使用的ui代码块组件的本质，自定义标签写一个组件。<div id="demoSky"> <!-- 使用组件 --> <!-- 然后ui代码重复使用，我调用几次，就执行

生命周期与钩子生命周期内被自动执行的函数，叫钩子函数钩子，vue执行周期内，自动执行的8个钩子函数，创建位置与data与methods同级钩子会在生命周期的固定时间自动被调用生命周期的作用：给需要自动执行的函数提供一个场所生命周期有4个阶段，8个钩子简单整理一下，达到自己说出来的程度：交互 Vue当中的ajax原生js 的ajaxjQuery的ajax都是基于XMLHttpRequest的，但是jQuery是对js的ajax进行的封装，简化了写法，语法简单，而且没有兼容的问题Axio

事件对象语法：<div @click=‘fn($event)’></div>中，$event为事件对象（固定写法）作用：记录事件相关的信息 <div id="demoSky"> <!-- 事件对象 $event 必须这样写--> <!-- 点谁谁变色的例子 --> <ul> <li v-for="(item,index) in arr" @click="fun($even

混合练习（一） 表格数据的增删由上图页面的风格可以看出，使用bootstrap来搭建页面，这样也好，可以学着使用一下bootstrap。使用前，要先下载bootstrap：我选择使用cnpm下载，也可以用npm，不过我怕网速不好，下载国外服务器的下载不下来，所以用国内的。因为bootstrap底层是jQuery开发的，所以要先下载jQuery框架依赖。cnpm install --save [email protected] 下载指定版本的，不加班和版本号，默认下载最新版本cnpm install

常见Vue.js指令v-model 双向数据绑定小栗子双向绑定的原理Object.defineProperty() get set发布者—订阅者模式 一对多 修改了模型数据，只要是关联过的view部分，都会随着模型数据的改变而改变通过数据劫持，把改动让vue知道，然后告诉模型中的数据，通知view进行改变v-model v-on v-show 联合小栗子v-bind把变量插入到HTML标签的属性当中又或者可以这么说，绑定HTML属性如果希望把一个变量

渐进式框架不会做职责之外的事主张 要求自底向上增量开发 从基础上添加功能，简单到繁琐Vue.js目的：解决数据绑定问题；为了构建大型单页面应用；支持组件化Vue.js：数据自动渲染 数据驱动与组件化模板 桥梁 数据MVC MVPMVVM框架M—module 数据V—view 界面VM—viewmodule 视图模型 （桥梁） 关联了视图和模型，使得两者在保持独立情况下，能够互通 有点像监视器复用性双向绑定无序大量操作DOM使用Vue.js1、下载Vue包