Vue动态组件、组件传值、keep-alive、scoped、axios、响应结构
2019-07-27 14:22
1596 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44195250/article/details/97512495
components文件夹下 四个文件夹 各自一个index.vue 和tabbar.vue app.vue是根组件 由他切换 这四个页面 flexble.js:适配dpr ios , vw同功能 main.js 1.引入flexble.js 需要在index.html中把meta标签删掉 erem相当于fontsize 移动端element 设计稿375:需要*2/fontsize app.vue中 引入四个文件夹 中的四个index页面 将标签放在html中 和tabBar 添加函数 tabBar的点击事件函数 (switch) 只展示出来一个页面,如何实现: app.vue: ```vue data(){ return { page:"Home" } } ``` app.vue中借条件 <Home v-if="page=='home'"></Home> tabBar共有不用条件:<TabBar @handleToggle="handleTogglePage"></TabBar> 记得注册 : ```vue export default { name:"App", components:{ Home, List, Order, Mine, TabBar } } ``` 在tabBar添加点击事件 ```vue <template> <div id="footer"> <ul> <li v-for="(item,index) in navs" :key="index" @click="handleClick(index)">{{item.text}}</li> </ul> </div> </template> ``` ``` methods:{ handleClick(index){ this.$emit("handleToggle",index) } } ``` tabBar.vue中 ```vue data(){ return { navs:[ { text:"首页" }, { text:"列表" }, { text:"订单" }, { text:"我的" } ] } } ``` 在html中遍历数组的下标 增加点击事件 ```vue <li v-for="(item,index) in navs " @click="handleClick(index)">{{item.text}}</li> ``` #### 动态组件:当前组件切换不涉及到路由 通过动态切换is属性来显示不同的页面 ``` <component is =""></component> ``` 解释:is属性值是哪个组件名称就是哪个组件 绑定page(点击哪个就是哪个 ) 即可以动态使用 但是真正不用再项目(路由)里 场景 :类似选项卡 或者商品列表 测试: 走不走生命周期 (四个页面)=>第二次选择同一页面时还会重走一次生命周期 为了避免 引出keep-alive ###### keep-alive:Vue中的内部组件 凡是被keep-alive包裹的组件第一次创建后就会保存在内存当中 不会经历销毁下次进行页面切换时会从缓存中读取 ```javascript <keep-alive><component is =""></component></keep-alive> ``` 场景:猫眼电影 当前组件里面数据是实时更新的 keep-alive属性 1. include 包含哪几个 正则 字符串 2. exclude除了那几个 正则 字符串 3. max 最多存储几个组件 (一般不用 ) 只要被keep-alive包裹的组件会增两个生命周期 (activated 和 deactivated:进入缓存状态 即在点击时只走这两个声明周期 : 作用是 例如看小说 deactivated记住章节位置activated 时活跃状态回到之前章节 可以在activated 时进行ajax情求) 场景: 数据筛选 滚动条位置 信息填写 (身份证号去其他页面看后再回来) 问题:1.给每个页面加html 中class=“page 页面名” 2.不同css 结果:同一个css 因为class名相同 后者覆盖前者 解决:在style标签加scoped scoped:让每个组件的样式私有化 简单来说让每个组件类名唯一化(公共页面不需要) 面试题: 1.单向数据流: 当父组件给子组件传递数据的时候,子组件只允许进行数据的读,而不允许做数据的改。因为当子组件改变父组件传递过来的数据的话会造成数据流难以理解。 index.vue home页面中演示 只要是prop 一定是下行板顶 !警告:父组件的内容子组件不可以修改 应用数据流难以理解(官方) 改变了数据出现问题 不知道属于父组件还是子组件 解决:修改自己 data(){} watch:() 2. 组件data为何是函数: 因为对象是引用数据类型 如果data是对象的情况下会造成所有组件公用一个data 而当data是一个函数情况下每次函数执行完毕后会返回一个新的对象 这样每个组件会维护一个独立的对象(data) vue 用什么做数据情求 思路:ajax(缺点:1.原生需要封装2.jq中会出现回调) 异步处理方案(4) 回调 promise generator async await(最好) 解决: axios(官网) :基于promise的http库 可以在浏览器和node环境中使用 特点:1.支持promise的api 2.可以在浏览器环境中创建xmlhttpRequest进行数据情求 3、可以在node环境中通过http进行数据请求 4、请求、响应数据的拦截 5、请求、响应数据的转换 安装: ``` cnpm install axios -S yarn add axios ``` get请求 (区别:有params post没有直接请求) axios.get(url,{ params:{ get请求需要传递的参数 } }).then((data)=>{ console.log(data) }) post请求 axios.post(url,{ post请求需要传递的参数 }).then((data)=>{ console.log(data) }) 综合写法 axios({ method:"请求的方式", data:"post请求提交的参数", headers:"请求头" url:"请求的地址" }).then((data)=>{ console.log(data); }) 下载postman axios配置项: localhost地址是开发环境地址 http: 设置时变 http:// 生产环境 process.env. 环境变量 headers :application params:get data :只针对post 拦截器 timeout:设置超时 withCredemtials: 在token里用 设置跨域访问cookie (凭证)默认是false 需要设置成true 默认数据类型是json 常用配置项:url baseUrl params methodheader data timeout withCredemtials axios封装 拦截器 响应体 作业 安装 跨域代理 web.json 中 devServer:{ target:代理地址 changeOrigin:true} 在app.vue的created情求 get地址 .then data 看data有个对象 是响应体
相关文章推荐
- Vue匿名组件使用keep-alive后动态清除缓存
- Vue2.0 keep-alive 后组件不使用缓存
- vue.js内置组件之keep-alive组件使用
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- vue.js 2.x 能否设置某个组件不被keep-alive 的解决方案
- 动态组件 is属性 keep-alive组件
- vue 如何使某个组件不被 keep-alive 缓存
- 详解vue组件的keep-alive
- vue里如何主动销毁keep-alive缓存的组件
- 关于vue keep-alive组件与activated和deactivated钩子函数的应用
- Vue2.0 keep-alive 组件的最佳实践
- vue-router 实现组件的缓存之 keep-alive
- 内置组件 && vue中强大的缓存机制之keep-alive
- vue 使某个组件不被 keep-alive 缓存的方法
- vue组件keep-alive的应用及原理
- Vue------第五天(Vue的Ajax请求,使用Axios,目前熟悉了一下,主要包括GET请求、POST请求、并发请求、请求参数的配置、服务器响应的结构以及对服务器响应错误的简单处理)
- slot插槽、transition动画、filter过滤器、动态组件和keep-alive缓存
- Vue 自定义动态组件实例详解
- Vue拖拽组件列表实现动态页面配置功能
- 基于VUE实现组件动态插入