您的位置:首页 > Web前端 > Vue.js

$on $once $off $emit $mount 如何一次进行多个异步请求 拦截器 响应体 插槽 在Vue中如何进行前后端数据的交互 你在工作当中如何对接口进行管理的

2019-07-31 22:01 866 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/weixin_44195250/article/details/97968000
组件外部挂载
new Vue({
render:h=>h(App)
}).$mount("#app")
vm.$on
事件的订阅
参数1:事件名称
参数2:事件函数
vm.$once
事件的订阅
参数1:事件名称
参数2:事件函数
vm.$off
事件的解绑
参数1:事件名称
参数2:[事件函数]  如果存在则解绑对应事件 如果不存在则解绑所有
vm.$emit
事件的触发
参数1:事件名称
参数2: [需要传递的参数]
entry  入口配置
output 出口配置
module
plugins  插件
devServer
resolve

1、单向数据流
当父组件给子组件传递数据的时候,子组件只允许进行数据的读,而不允许做数据的改。因为当子组件改变父组件传递过来的
数据的话会造成数据流难以理解。

2、组件中的data为什么是一个函数而不是一个对象
因为对象是一个引用数据类型,如果data是一个对象的情况下会造成所有组件公用一个data。而当data是一个函数是情况下
每次函数执行完毕后都会返回一个新的对象,这样的话每个组件都会维护一份独立的对象(data)
3、如何一次进行多个异步请求
promise.all

axios.all
4、你在工作当中如何对接口进行管理的
1、接口文档
2、postman接口测试  (postman是一个软件)
3、项目接管理,将所有的接口放在同一文件夹中进行管理
在Vue中如何进行前后端数据的交互
1、原生的ajax  需要封装
2、Jq ajax     回调
axios:
基于promise的http库  可以在浏览器和node环境中使用

特点:
1、支持promise的api
2、可以在浏览器环境中创建xmlHTTPrequest进行数据请求
3、可以在node环境中通过http进行数据请求
4、请求、响应数据的拦截
5、请求、响应数据的转换

安装:
cnpm install axios -S
yarn add axios

get请求
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);
})
URL:
baseUrl:
method
headers
params
data
timeout
withCredentials(很重要)
axios封装  拦截器  响应体

拦截器:当数据发送到服务器之前以及数据响应到客户端之前的一次拦截就叫做拦截器

插槽:
作用:可以让你封装组件的时候让组件更加的灵活
默认情况下组件标签内部嵌套的标签或者组件默认是不会显示的。如果需要进行显示则就需要用到了插槽

匿名插槽
1、在组件标签内部书写templet标签,需要嵌套的内容放在template标签内部。同时给template标签加一个指令  v-slot
2、在组件的内部通过<slot></slot>进行接收嵌套的数据

命名插槽
1、在组件标签内部书写templet标签,需要嵌套的内容放在template标签内部。同时给template标签加一个指令v-slot:插槽名称
2、在组件的内部通过<slot name='插槽名称'></slot>进行接收嵌套的数据

作用域插槽:
带参数的插槽

1、在子组件的内部通过给<slot></slot> 绑定自定义属性
2、在父组件中给子组件标签的template标签添加一个属性
<组件>
<template v-slot:插槽名称='props'>
<标签>{{props.自定义数组}}</标签>
</template>
</组件>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐