Vue 尚硅谷 axios、插槽、Vuex

 

安装npm i axios
跨域：
1.cors
2.jsonp script src 解决get请求。post, delete, put无法请求
3.代理vue-cli vue.config.js

 

vue-cli代理缺点：

1.不能配置多个代理

2.默认先读取本地public 文件夹下的接口文件，没有才去调用远程接口，

 

 

 

 

  

 

 

 

 

  

引入全局样式(引入第三方样式)

<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

ES6语法
data() {
  return {
    keyWord: ''
  }
}
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then

 

axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then测试项目
this.info = {...this.info, ...dataObj}两个对象比较，相同属性的值覆盖，没有的属性保留。

 

 

 

 

 

slot插槽讲解： 

 

 

 

 

 

 

具名插槽的使用slot

 

 

 

 

 

 

 

 

 template包裹div.vue解析时，自动删除

 

 

 插槽起名

 

 

 只有template才能用v-slot:footer、其他div标签不能用

 

 

作用域插槽：数据在子组件上

父组件页面：页面结构由父组件定义

 

 

 子组件页面：

 

 

 总结插槽

 

 

 

 

 

 

--------------------Vuex-----------------------actions, mutations, state都是有store管理

1.安装插件npm i vuex
2.src目录下创建store目录和index.js文件

引入：
import Vue from 'vue'
import Vuex from 'vuex'
//必须先执行
Vue.set(Vuex)

const actions = {}//处理业务逻辑和远程api调用

const mutations = {}//不处理业务逻辑

const state = {}

const store = new Vuex.Store({
  actions,
  mutations,
  state,
})
export default store

3.创建挂载store对象

import store from './store'
new Vue({
  el:'#app',
  render: h => h(App),
  store,
  beforeCreate(){
    Vue.prototype.$bus = this
  }
})

 

 

 

 

 

store对象

 

 

 actions中的context参数对象

 

 mutations中的state参数对象

 

 

 

 

 

 如果没有业务逻辑，那么可以直接调用commit 进行mutation阶段处理