Vue 基础知识笔记
1 ### 准备开始 2 --- 3 #### 学员反馈 4 下午感觉要起飞了,给我们点时间练一下 5 保留最终解释权 6 晕晕乎乎的一天就过去了 7 保留最终解释权 8 1.后端代码的抽取感觉还可以，前端代码抽取懵，关于哪个需要依赖、注入，哪个不需要依赖、注入，不懂？ 9 10 输入服务 是需要使用的时候 11 12 配置期 config -> 可以注入供应商服务对象，对于具体服务进行配置 13 运行期 非config都算是运行期 14 service/factory(通过return 返回任意类型对象)/controller/derective/filter 15 以上都可以用来注入服务对象（service/factory） 16 如何区分是否能依赖注入 17 形参名基本以$开头 18 //根据顺序来的 19 link:function(scope,element,attrs) 20 21 22 2.自己建了一个服务器，数据库，可是这个项目还是不知道从哪开始敲起 23 看需求有哪些页面，配置路由显示页面，根据API接口完成页面上的动态数据交互 24 3.webpack-dev-server 再讲一下吧，还是不太懂 25 工具，在学校的时候，要掌握的东西是重点学习的东西，而不是工具 26 在企业开发中，遇上了相关问题，再去看看别的东西 27 让大家不用去关注除了主核心以外的东西 28 --inline --hot --open --port 9999 29 30 老师,能不能给点时间练练 31 保留最终解释权 32 黑马岳父, angular飞晕了, node飞丢了, vue稍微稳点飞, vue是最后的杀手锏了, 也是唯一能吹牛的资本了 33 34 1:主要学习的是VUE，快速进入VUE让大家体会VUE的使用 35 2:webpack前端构建构建，前期铺垫基本使用，后面看到不晕 36 3:在做完项目以后，模拟项目开发的真实打包，区分打包的意义所在(webpack) 37 38 #### 复习 39 * webpack属性配置 40 41 ```javascript 42 const path = require('path') 43 module.exports = { 44 entry:{ main是默认入口,也可以是多入口 45 main:'./src/main.js' 46 }, 47 出口 48 output:{ 49 filename:'./build.js', 指定js文件 50 path: path.join(__dirname,'..','dist',) 最好是绝对路径 51 代表当前目录的上一级的dist 52 }, 53 module:{ 54 一样的功能rules: webpack2.x之后新加的 55 loaders:[ require('./a.css||./a.js') 56 {test:/\.css$/, 57 loader:'style-loader!css-loader', 58 顺序是反过来的2!1 59 }, 60 { 61 test:/\.(jpg|svg)$/, 62 loader:'url-loader?limit=4096&name=[name].[ext]', 63 顺序是反过来的2!1 64 [name].[ext]内置提供的，因为本身是先读这个文件 65 options:{ 66 limit:4096, 67 name:'[name].[ext]' 68 } 69 } 70 ] 71 }, 72 73 plugins:[ 74 插件的执行顺序是依次执行的 75 new htmlWebpackPlugin({ 76 template:'./src/index.html', 77 }) 78 将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录 79 ] 80 81 82 83 } 84 85 86 ``` 87 88 #### 今日重点 89 * 运行起来Vue 90 * vue常用指令 91 * 组件的使用 92 93 ### es6 94 --- 95 #### webpack-ES6的处理 96 * ES6的模块,vue本身默认支持es6的模块导入导出 97 * babel 98 - babel-loader(内部依赖babel-core) 99 + 关键字(presets es2015) 100 + 函数(plugins babel-plugin-transform-runtime) 101 102 #### ES6中的模块 103 * 默认 104 - 导入`import [,..xxx] [,..from] './xxx.ext'` 105 - 导出 `export default obj;` 106 * 声明式 107 - 1导出 `export var obj = xxx;` 108 - 2导出 `export var obj2 = {};` 109 - 3单独导出 ` export {stu};` 110 - 导入 `import {obj,obj2,stu} from './xxx.js'; 直接使用obj` 111 * 全体 112 * 默认导出和声明式导入在使用上的区别 113 - 要注意，声明式导入的时候，必须{名称} 名称要一致（按需导入) 114 - 默认导入，可以随意的使用变量名 115 116 ```javascript 117 { 118 default:"我是默认导出的结果" 119 import xxx from './cal.js'会获取到整个对象的default属性 120 obj1:"我是声明式导出1" 121 obj2:"我是声明式导出2" 122 obj3:"我是声明式导出3" import {obj1,obj2} 123 obj4:"我是声明式导出4" 124 } 125 import * as allObj from './cal.js'; 获取的就是一整个对象 126 ``` 127 * import 和export一定写在顶级，不要包含在{}内 128 129 130 #### ES6中的代码变化 131 * 对象属性的声明 132 133 ```javascript 134 var name = 'abc'; 135 var person = {name}; 简写-> var person = {name:name}; 136 137 声明函数 138 var cal = { 139 add:function(){ 140 return 1; 141 }, 142 add2(){ 143 return 2; 144 }, 145 add3:funtion(n1,n2){ 146 return n1 + n2; 147 }, 148 add4(n1,n2){ 干掉了function 149 return n1 + n2; 150 } 151 } 152 ``` 153 * 当属性的key和变量的名相同,而要使用变量的值做value, 154 * 就可以简写{name}->{name:name} 155 * es6中的函数声明 156 - 就是干掉了:function add(){ } 157 158 159 #### vue单文件方式 160 * 单文件就是以*.vue结尾的文件。最终通过webpack也会编译成*.js在浏览器运行 161 * 内容： <template></template> + <script></script> + <style></style> 162 - 1:template中只能有一个根节点 2.x 163 - 2:script中 按照 export default {配置} 来写 164 - 3:style中 可以设置scoped属性，让其只在template中生效 165 166 #### 以单文件的方式启动 167 * webpack找人来理解你的单文件代码 168 - vue-loader,vue-template-compiler,代码中依赖vue, 169 * 启动命令 170 * `..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open` 171 172 #### vue介绍 173 * 2014年诞生,2013年react,09年angularjs 174 * 作者 尤雨溪 175 * 核心概念: 组件化 双向数据流 (基于ES5中的defineProperty来实现的),IE9才支持 176 * angular核心： 模块化 双向数据绑定(脏检测:一个数组（$watch）) 177 - 开发一个登陆的模块，登陆需要显示的头部、底部、中部 178 - 组件:组合起来的一个部件（头部、底部、中部） 179 - __细分代码__ 180 + 头部: 页面、样式、动态效果 181 + 代码: template style script 182 * 框架对比，建议学完vue再看 183 * https://cn.vuejs.org/v2/guide/comparison.html#React 184 185 #### 数据流 186 * 1向：js内存属性发生改变，影响页面的变化 187 * 1向：页面的改变影响js内存属性的改变 188 189 #### vue中常用的v-指令演示 190 * 常用指令 191 * v-text 是元素的innerText只能在双标签中使用 192 * v-html 是元素的innerHTML，不能包含<!--{{xxx}} --> 193 * v-if 元素是否移除或者插入 194 * v-show 元素是否显示或隐藏 195 * v-model 双向数据绑定，v-bind是单向数据绑定(内存js改变影响页面) 196 197 #### class结合v-bind使用 198 * 需要根据可变的表达式的结果来给class赋值，就需要用到v-bind:class="xxx" 199 * v-bind:属性名="表达式"，最终表达式运算结束的结果赋值给该属性名 200 - 简化的写法是: `:属性名="表达式"` 201 * class:结果的分类 202 - 一个样式: 返回字符串(三元表达式和key和样式的清单对象) 203 - 多个样式：返回对象(样式做key，true或flase做值) 204 205 #### methods和v-on的使用 206 * 绑定事件的方法 207 - `v-on:事件名="表达式||函数名"` 208 - 简写: `@事件名="表达式||函数名"` 209 * 函数名如果没有参数，可以省略() 只给一个函数名称 210 * 声明组件内函数，在export default这个对象的根属性加上methods属性，其是一个对象 211 - key 是函数名 值是函数体 212 * 在export default这个对象的根属性加上data属性，其是一个函数，返回一个对象 213 - 对象的属性是我们初始化的变量的名称 214 * 凡是在template中使用变量或者函数，不需要加this 215 * 在script中使用就需要加上this 216 217 #### v-for的使用 218 * 可以使用操作数组 (item,index) 219 * 可以使用操作对象 (value,key,index) 220 221 * key 是类似trank by 的一个属性 222 * 为的是告诉vue，js中的元素，与页面之间的关联，当识图删除元素的时候，是单个元素的删除而不是正版替换，所以需要关联其关系，设置(必须,性能) 223 * 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。 224 225 #### 漂亮的列表 226 227 #### 父子组件使用 228 * 父和子，使用的是父，被用的是子 229 * 父需要声明子组件，引入子组件对象，声明方式如下 230 231 ```javascript 232 import 子组件对象 from './xxx.vue'; 233 234 { 235 components:{ 236 组件名:子组件对象 237 } 238 } 239 ``` 240 241 * 全局组件，使用更为方便，不需要声明，直接用 242 * 在main.js中引入一次，在main.js中使用 `vue.component('组件名',组件对象);` 243 * 所有的组件就可以直接通过组件名，使用 244 245 #### 父传子 246 * 父组件通过子组件的属性将值进行传递 247 - 方式有2: 248 + 常量: prop1="常量值" 249 + 变量: :prop2="变量名" 250 * 子组件需要声明 251 - 根属性props:['prop1','prop2'] 252 - 在页面中直接使用{{prop1}} 253 - 在js中应该如何使用prop1？ this.prop1获取 254 255 #### 看文档的对象分类 256 * 1:全局的代表Vue.的 257 * 2:实例的代表this.或者new Vue(). 258 * 3:选项代表 new Vue() 的参数 259 * 或者 export default里边的属性 260 261 #### 子向父组件通信（vuebus）(扩展) 262 * 通过new Vue()这样的一个对象，来$on('事件名',fn(prop1,pro2)) 263 * 另一个组件引入同一个vuebus, 来$emit('事件名',prop1,pro2) 264 265 266 #### 总结 267 * -1 : 已经存在node_modules包，已经存在package.json和webpack.config.js文件 268 * 1: 创建index.html,看看其所在文件和webpack.config.js文件中描述的关系 269 * 2: 在index.html div->id->app 270 * 3: 创建main.js,看看其所在文件和webpack.config.js文件中描述的关系 271 * 4: 在main.js中引入vue,和相关组件对象 272 * 5: new Vue(选项options) , 目的地el 渲染内容 render:c=>c(App) 渲染App的内容 273 * 6: 编写app.vue 274 - template 在2.x以后只能有一个根节点 275 - script 格式是export default { 选项options} 276 - style 加上scoped（范围的）之后，样式只对当前模板有效 277 * 7: 可能使用组件或者使用函数或者接受参数 278 - options(根属性): 279 + data 是一个函数,return一个对象 280 + methods 是一个对象,key是函数名,value是函数体 281 + components 是一个对象,key是组件名,值是组件对象 282 + props 是一个数组,元素是多个接受的参数 283 * 8: 套路总结 284 - 凡是在上边可以使用的东西 285 - 在下边就可以使用，通过this. 286 * 9:启动 287 - 进入到webpack.config.js 和package.json文件同在的目录中启动命令行 288 - 输入: 正在编码: npm run dev 289 + 报错: 检查命令所执行的../ 上级,是否存在node_modules目录及相关文件是否存在 290 - 输入: 代码编写完毕，提交到公司 : npm run build 291 292 293 #### 过滤器 294 295 #### 获取元素 296 297 298 #### vue构建方式
1 ### 准备开始 2 --- 3 #### 学员反馈 4 凃凃老师, 该拓展的一定要拓展, 即使有部分同学跟起来吃力 , 以后工作很可能在项目中遇到相似问题, 至少知道老师讲过 , 有对照也好解决. 可以说清楚有哪些必须掌握, 有哪些让有余力的同学掌握. 5 #### 复习 6 * vue单文件方式 xxx.vue 7 * 1:准备好配置文件 package.json(包描述文件&& 封装命令npm run dev) + webpack.config.js文件（打包的配置文件） 8 * 2:创建index.html（单页应用的页） 9 * 3:创建main.js(入口文件) 10 * 4:引入vue和相关的文件xxx.vue 11 * 5:new Vue(options) 12 * 6:options（选项）: 13 - data 14 - methods 15 - components（组件内声明子组件) 16 - props 17 * 7:实例: 18 - 在组件内（xxx.vue）中的this 19 - new Vue() 20 - 事件 21 + this.$on(事件名,回调函数(参数)) 22 + this.$emit(事件名,数据) 23 + this.$once(事件名,回调函数(参数)) 就触发一次 24 + this.$off(事件名); 取消事件 25 * 8:全局 26 - Vue.component('组件名',组件对象) 在哪里都可以使用 27 * 9: 组件传值 28 - 父传子: 属性作为参数 29 + 常量 title="xxx" 子组件声明接收参数 props:['xxx'] 30 + 变量 :title="num" 子组件声明接收参数 props:['xxx'] 31 - 子传父: vuebus（只能是同一辆车） 32 + 先停车到父组件，On一下 33 + 再开车到子组件，如果需要的话，emit一下，触发上述时间的回调函数 34 35 #### 今日重点 36 * vue组件的使用 37 * 组件间通信 38 * vue-router使用 39 * vue-resource发起http请求 40 * axios 41 42 43 #### 过滤器 44 * content | 过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器 45 * 组件内的过滤器 + 全局过滤器 46 - 组件内过滤器就是options中的一个filters的属性（一个对象） 47 + 多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体 48 - `Vue.filter(名,fn)` 49 * 输入的内容帮我做一个反转 50 * 例子:父已托我帮你办点事 51 * 总结 52 - 全局 ：范围大，如果出现同名时，权利小 53 - 组件内: 如果出现同名时，权利大，范围小 54 55 #### 获取DOM元素 56 * 救命稻草, 前端框架就是为了减少DOM操作，但是特定情况下，也给你留了后门 57 * 在指定的元素上，添加ref="名称A" 58 * 在获取的地方加入 this.$refs.名称A 59 - 如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象 60 + 可以直接操作 61 - 如果ref放在了组件对象上，获取的就是组件对象 62 + 1:获取到DOM对象,通过this.$refs.sub.$el,进行操作 63 - 对应的事件 64 + created 完成了数据的初始化，此时还未生成DOM，无法操作DOM 65 + mounted 将数据已经装载到了DOM之上,可以操作DOM 66 67 #### mint-ui 68 * 组件库 69 * 饿了么出品,element-ui 在PC端使用的 70 * 移动端版本 mint-ui 71 * https://mint-ui.github.io/#!/zh-cn 72 * 注意: 73 - 如果是全部安装的方式 74 + 1:在template中可以直接使用组件标签 75 + 2:在script中必须要声明，也就是引入组件对象（按需加载） 76 77 #### wappalyzer 78 * 获取到当前网站的使用的技术 79 * https://wappalyzer.com/download 80 81 #### vue-router 82 * 前端路由 核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据 83 * ui-router:锚点值改变，如何获取模板？ajax、 84 * vue中，模板数据不是通过ajax请求来，而是调用函数获取到模板内容 85 * 核心：锚点值改变 86 * 以后看到vue开头，就知道必须Vue.use 87 * vue的核心插件: 88 - vue-router 路由 89 - vuex 管理全局共享数据 90 * 使用方式 91 - 1:下载 `npm i vue-router -S` 92 - 2:在main.js中引入 `import VueRouter from 'vue-router';` 93 - 3:安装插件 `Vue.use(VueRouter);` 94 - 4:创建路由对象并配置路由规则 95 + `let router = new VueRouter({ routes:[ {path:'/home',component:Home} ] });` 96 - 5:将其路由对象传递给Vue的实例，options中 97 + options中加入 `router:router` 98 - 6:在app.vue中留坑 ` <router-view></router-view>` 99 100 #### 命名路由 101 * 需求，通过a标签点击，做页面数据的跳转 102 * 使用router-link标签 103 - 1:去哪里 `<router-link to="/beijing">去北京</router-link>` 104 - 2:去哪里 `<router-link :to="{name:'bj'}">去北京</router-link>` 105 + 更利于维护，如果修改了path，只修改路由配置中的path，该a标签会根据修改后的值生成href属性 106 107 #### 参数router-link 108 * 在vue-router中，有两大对象被挂载到了实例this 109 * $route(只读、具备信息的对象)、$router(具备功能函数) 110 * 查询字符串 111 - 1:去哪里 `<router-link :to="{name:'detail',query:{id:1} } ">xxx</router-link>` 112 - 2:导航(查询字符串path不用改) `{ name:'detail' , path:'/detail',组件}` 113 - 3:去了干嘛,获取路由参数(要注意是query还是params和对应id名) 114 + `this.$route.query.id` 115 * path方式 116 - 1:去哪里 `<router-link :to="{name:'detail',params:{name:1} } ">xxx</router-link>` 117 - 2:导航(path方式需要在路由规则上加上/:xxx) 118 - `{ name:'detail' , path:'/detail/:name',组件}` 119 - 3:去了干嘛,获取路由参数(要注意是query还是params和对应name名) 120 + `this.$route.params.name` 121 122 #### 编程导航 123 * 不能保证用户一定会点击某些按钮 124 * 并且当前操作，除了路由跳转以外，还有一些别的附加操作 125 * this.$router.go 根据浏览器记录 前进1 后退-1 126 * this.$router.push(直接跳转到某个页面显示) 127 - push参数: 字符串 /xxx 128 - 对象 : `{name:'xxx',query:{id:1},params:{name:2} }` 129 130 131 #### 复习 132 * 过滤器，全局，组件内 133 * 获取DOM元素 ，在元素上ref="xxx" 134 * 在代码中通过this.$refs.xxx 获取其元素 135 - 原生DOM标签获取就是原生DOM对象 136 - 如果是组件标签，获取的就是组件对象 $el继续再获取DOM元素 137 * 声明周期事件(钩子)回调函数 138 - created: 数据的初始化、DOM没有生成 139 - mounted: 将数据装载到DOM元素上，此时有DOM 140 * 路由 141 - `window.addEventListener('hashchange',fn);` 142 - 根据你放`<router-view></router-view><div id="xxx"></div>` 作为一个DOM上的标识 143 - 最终当锚点值改变触发hashchange的回调函数，我们将指定的模板数据插入到DOM标识上 144 145 #### 重定向和404 146 * 进入后，默认就是/ 147 * 重定向 `{ path:'/' ,redirect:'/home' }` 148 * 重定向 `{ path:'/' ,redirect:{name:'home'} }` 149 * 404 : 在路由规则的最后的一个规则 150 - 写一个很强大的匹配 151 - `{ path:'*' , component:notFoundVue}` 152 153 #### 多视图 154 * 以前可以一次放一个坑对应一个路由和显示一个组件 155 - 一次行为 = 一个坑 + 一个路由 + 一个组件 156 - 一次行为 = 多个坑 + 一个路由 + 多个组件 157 * components 多视图 是一个对象 对象内多个key和value 158 - key对应视图的name属性 159 - value 就是要显示的组件对象 160 * 多个视图`<router-view></router-view>` -> name就是default 161 * `<router-view name='xxx'></router-view>` -> name就是xxx 162 163 164 #### 嵌套路由 165 * 用单页去实现多页应用，复杂的嵌套路由 166 * 开发中一般会需要使用 167 * 视图包含视图 168 * 路由父子级关系路由 169 170 ```javascript 171 期组件内包含着第一层router-view 172 { name:'music' ,path:'/music', component:Music , 173 children:[ 子路由的path /就是绝对路径 不/就是相对父级路径 174 {name:'music.oumei' ,path:'oumei', component:Oumei }, 175 {name:'music.guochan' ,path:'guochan', component:Guochan } 176 ] 177 } 178 ``` 179 180 #### vue-resource(了解) 181 * 可以安装插件，早期vue团队开发的插件 182 * 停止维护了，作者推荐使用axios 183 * options预检请求，是当浏览器发现跨域 + application/json的请求，就会自动发起 184 * 并且发起的时候携带了一个content-type的头 185 186 #### axios 187 * https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral 188 * post请求的时候，如果数据是字符串 默认头就是键值对，否则是对象就是application/json 189 * this.$axios.get(url,options) 190 * this.$axios.post(url,data,options) 191 * options:{ params:{id:1}//查询字符串, headers:{ 'content-type':'xxxxx' },baseURL:'' } 192 * 全局默认设置 ：Axios.defaults.baseURL = 'xxxxx'; 193 * 针对当前这一次请求的相关设置 194 195 #### 如何练习 196 * 1:路由核心 197 - 路由基本使用 198 - 任选一种路由参数的方式(查询字符串) 199 - 404(路由匹配规则) 200 - 嵌套路由 201 - 编程导航 202 * 2:http请求 203 - axios 发起get、post请求 （300） 204 - 获取 http://182.254.146.100:8899/api/getcomments/300?pageindex=1 205 - 发起 http://182.254.146.100:8899/api/postcomment/300 206 - axios挂载属性方式
1 ### 准备开始 2 --- 3 #### 学员反馈 4 5 #### 复习 6 * 路由操作的基本步骤 7 ```javascript 8 引入对象 9 import VueRouter from 'vue-router'; 10 安装插件 11 Vue.use(VueRouter); 挂载属性的行为 12 创建路由对象 13 let router = new VueRouter({ 14 routes:[ 15 { name:'xxx',path:'/xxx',组件 } 16 ] 17 }); 18 将路由对象放入到options中new Vue() 19 new Vue({ 20 router 21 }) 22 ``` 23 * 套路 24 - 1: 去哪里 <router-link :to="{name:'bj'}"></router-link> 25 - 2: 导航(配置路由规则) `{name:'bj',path:'/beijing',组件A}` 26 - 3: 去了干嘛(在组件A内干什么) 27 + 在created事件函数中，获取路由参数 28 + 发起请求，把数据挂载上去 29 * 参数 30 - 查询字符串（#/beijing?id=1&age=2） 31 + 1: 去哪里 <router-link :to="{name:'bj',query:{id:1,age:2} }"></router-link> 32 + 2: 导航(配置路由规则) `{name:'bj',path:'/beijing',组件A}` 33 + 3: 去了干嘛(在组件A内干什么) 34 * `this.$route.query.id||age` 35 - path(#/beijing/1/2) 36 + 1: 去哪里 <router-link :to="{name:'bj',params:{id:1,age:2} }"></router-link> 37 + 2: 导航(配置路由规则) `{name:'bj',path:'/beijing/:id/:age',组件A}` 38 + 3: 去了干嘛(在组件A内干什么) 39 * `this.$route.params.id||age` 40 * 编程导航 41 - 一个获取信息的只读对象($route) 42 - 一个具备功能函数的对象($router) 43 - 根据浏览器历史记录前进和后台 `this.$router.go(1|-1);` 44 - 跳转到指定路由 `this.$router.push({ name:'bj' });` 45 * 嵌套路由 46 - 让变化的视图(router-view)产生包含关系(router-view) 47 - 让路由与router-view关联，并且也产生父子关系 48 * 多视图 49 - 让视图更为灵活，以前一个一放，现在可以放多个，通过配置可以去修改 50 51 * axios: 52 - 开始: 53 + 跨域 + 默认的头是因为你的数据是对象，所以content-type:application/json 54 + 有OPTIONS预检请求（浏览器自动发起） 55 - 最终: 56 + 当我们调整为字符串数据，引起content-type变为了www键值对 57 + 没有那个OPTIONS预检请求 58 - 总结： 跨域 + application/json 会引起OPTIONS预检请求，并且自定义一个头(提示服务器，这次的content-type较为特殊)，content-type的值 59 - 服务器认为这个是一次请求，而没有允许content-type的头， 60 - 浏览器就认为服务器不一定能处理掉这个特殊的头的数据 61 - 抛出异常 62 - 在node服务器 response.setHeader("Access-Control-Allow-Headers","content-type,多个"); 63 - formdata的样子: key=value&key=value 64 65 * axios属性关系 66 - options: headers、baseURL、params 67 - 默认全局设置(大家都是这么用) 68 + Axios.defaults-> options对象 69 - 针对个别请求来附加options 70 - axios.get(url,options) 71 - axios.post(url,data,options) 72 73 #### 今日重点 74 * axios 75 * watch 76 * 计算属性 77 * 项目 78 79 #### axios 80 * 合并请求 81 * axios.all([请求1,请求2]) 82 * 分发响应 axios.spread(fn) 83 * fn:对应参数(res)和请求的顺序一致 84 * 应用场景: 85 - 必须保证两次请求都成功，比如，分头获取省、市的数据 86 * 执行特点: 只要有一次失败就算失败，否则成功 87 88 #### 拦截器 89 * 过滤，在每一次请求与响应中、添油加醋 90 * axios.interceptors.request.use(fn) 在请求之前 91 * function(config){ config.headers = { xxx }} config 相当于options对象 92 * 默认设置 defaults 范围广、权利小 93 * 单个请求的设置options get(url,options) 范围小、权利中 94 * 拦截器 范围广、权利大 95 96 #### token(扩展) 97 * cookie 和session的机制，cookie自动带一个字符串 98 * cookie只在浏览器 99 * 移动端原生应用，也可以使用http协议，1:可以加自定义的头、原生应用没有cookie 100 * 对于三端来讲，token可以作为类似cookie的使用，并且可以通用 101 * 拦截器可以用在添加token上 102 103 #### 拦截器操作loadding 104 * 在请求发起前open，在响应回来后close 105 106 #### 监视 107 * watch 可以对（单个）变量进行监视，也可以深度监视 108 * 如果需求是对于10个变量进行监视？ 109 * 计算属性computed 可以监视多个值，并且指定返回数据，并且可以显示在页面 110 * 都是options中的根属性 111 - watch监视单个 112 - computed可以监视多个this相关属性值的改变,如果和原值一样 113 - 不会触发函数的调用，并且可以返回对象 114 115 #### 相关命令 116 117 ```javascript 118 npm i mint-ui vue-preview axios vue-router monent vue - S; 119 npm i webpack html - webpack - plugin css - loader style - loader less less - loader autoprefixer - loader babel - loader babel - core babel - preset - es2015 babel - plugin - transform - runtime url - loader file - loader vue - loader vue - template - compiler webpack-dev-server - D 120 ```
1 ### 准备开始 2 --- 3 #### 学员反馈 4 mui mint 使用在什么地方啊？？还有拦截器的使用，觉得脑袋空空的...没信心.. 5 拦截器：做数据交互类似cookie的应用，不局限于浏览器， 6 在拦截器请求发起之前加上自定义的头， 7 如果A页面需要加载数据显示或隐藏loadding图标 8 B页面也需要，C页面也需要 9 拦截器:在发起请求之前，显示loadding图标 10 在响应回来以后，隐藏loadding图标 11 12 13 拦截器不太懂 14 15 希望老师能抽空帮我们总结一下面试的时候用来装A的话 16 #### 复习 17 18 #### 今日重点
1 ### 准备开始 2 --- 3 #### 学员反馈 4 今天吸收的不错，就是不知知道晚上跟不跟上节奏，自己做的时候会报很多错，费时间，老师我用的vscode不能写注释，能不能帮忙解决一下，不太愿意又换编辑器，换个老师就换编辑器，太麻烦，，老师辛苦了 5 插件 6 7 问题1： <comment :cid="cid"></comment> <nav-bar title="新闻详情"></nav-bar> 这两个中的‘:cid’和‘title’一个是变量 一个是常量？怎么区分何时用变量何时用常量。 问题2：老师你的html是混杂模式的，但现在都写严格模式的<!DOCTYPE html>，就像你首页轮播图样式给的max-height根本就不生效，我要写height才能显示轮播图效果，H5之后不都是严格模式的吗？你写的是H几啊？？？？？ 8 9 1.上拉加载更多再讲讲吧，不太懂 2.老师，上课前能先把飞秋上一下吗，晚上敲代码的时候出现的bug,解决一下，然后再上课 3.别忘了补充知识，上传文件3种方式 mutipart/form-data 10 #### 复习 11 12 #### 今日重点 13 14 #### 导航钩子 15 ```javascript 16 beforeRouteEnter (to, from, next) { 17 在渲染该组件的对应路由被 confirm 前调用 18 不！能！获取组件实例 `this` 19 因为当钩子执行前，组件实例还没被创建 20 }, 21 beforeRouteUpdate (to, from, next) { 22 在当前路由改变，但是该组件被复用时调用 23 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， 24 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 25 可以访问组件实例 `this` 26 }, 27 beforeRouteLeave (to, from, next) { 28 导航离开该组件的对应路由时调用 29 可以访问组件实例 `this` 30 } 31 ```
