Vue（十二）：脚手架配置代理，github案例，插槽

一、脚手架配置代理

老师讲的主要有两种方法：

但是我的没有proxy，只有proxyTable,之前一直不成功，现在我是这样配置的：

config文件夹下的index.js:

App.vue:

然后就成功了：（我真服了，之前在这里卡了两天，现在莫名其妙就好了）

二、github案例

从https://api.github.com/search/users?q=xxx请求数据过来，然后点击搜索按钮可以显示所有github用户，咋做呢？

1、首先拆分html和css，这块儿直接用现成的，需要注意的是bootstrap样式需要在public下新建css文件夹粘贴bootstrap.css，然后去index.html引入，直接import会有问题（不知道为什么我的bootstrap无效没作用）
2、使用全局事件总线把请求的数据给List并使用v-for展示到页面
3、这里如果再完善一点，一上来显示欢迎词，发请求前显示loading，请求发送完若成功显示数据，失败则显示失败信息。这样的话在传数据时就要在不同的事件节点去触发全局事件并且传不同的值，比较好的做法是数据配置到对象里，传值也传一个对象，这样写起来比较方便。各个文件如下：

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 引入bootstrap但是不知道为什么我的无效 --><link rel="stylesheet" href="./css/bootstrap.css"><title>testtwo</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

App.vue

<template><div class="container"><Search></Search><List></List></div>
</template><script>
import Search from './components/Search.vue'
import List from './components/List.vue'
export default {name:'App',components:{Search,List}
}
</script>

Search.vue

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="searchUsers">Search</button></div></section>
</template><script>
import axios from 'axios';
export default {name: 'Search',data(){return{keyWord:''}},methods:{searchUsers(){// 请求前更新List的数据this.$bus.$emit('updataListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {// 请求成功更新List的数据console.log('请求成功了');this.$bus.$emit('updataListData', { isLoading: false, errMsg: '', users: response.data.items })},error => {// 请求失败更新List的数据// console.log('请求失败了',error.message);this.$bus.$emit('updataListData', { isLoading: false, errMsg:error.message, users:[]})})}}
}
</script><style>
</style>

List.vue

<template><div class="row"><!-- 展示用户列表 --><div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><p class="card-text">{{ user.login }}</p><!--展示欢迎词--><h1 v-show="info.isFirst">欢迎使用！</h1><!--展示加载中--><h1 v-show="info.isLoading">加载中....</h1><!--展示错误信息--><h1 v-show="info.errMsg">{{ errMsg }}</h1></div>
</div>
</template><script>
export default {name:'List',data(){return{info:{isFirst: true,isLoading: false,errMsg: '',users: []}}},mounted() {this.$bus.$on('updateListData', (dataObj) => {// es6语法，就是把info的四个都放在这里，然后dataobj的改变的在替换info有的this.info = {...this.info,...dataObj}console.log(this);})},
}
</script><style scoped>.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;
}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card > img {margin-bottom: .75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}</style>

三、vue-resource（了解）

在vue1.0时这个用的比较多，但是现在用axios比较多了，这个了解下就行，其实这玩意儿和axios很像，就把axios.get换成this.$http.get，其他的都一样
安装vue-resource ：npm i vue-resource
引入插件：import vueResource from 'vue-resource'
使用插件：Vue.use(vueResource)

案例：

this.$http.get('http://localhost:8081/api2/cars').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)}

四、插槽

1、作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。

2、分类：默认插槽、具名插槽、作用域插槽

1、默认插槽

比如有那么一天，我们要在页面显示三个类别，每个类别下面有不同的文字，本来是我们把数据传给子组件然后使用v-for遍历生成的文字信息，但是产品经理突然让你把美食类的下面换成图片，电影类下面换成视频，怎么搞？

有个非常好用的方法就是插槽，也就是使用slot标签在子组件挖个坑，然后在父组件的vc标签里面写东西往里边填
子组件Category：

<template><div class="Category"><h3>{{title}}分类</h3><slot>我是一个默认值，当没有传具体结构时，我会出现</slot></div>
</template><script>
export default {name:'Category',props:['title','listData']
}
</script><style>.Category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}
</style>

App.vue

<template><div class="container"><Category title="美食" :listData="foods"><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""></Category><Category title="游戏"><ul><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul></Category><Category title="电影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div>
</template><script>
import Category from './components/category.vue'
export default {name:'App',components:{Category},data(){return {foods: ['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']}}
}
</script>
<style scoped>.container{display: flex;justify-content: space-around;}video{width: 100%;}img{width: 100%;}
</style>

2、具名插槽

子组件

    <slot name="center">我是一个默认值，当没有传具体结构时，我会出现1</slot><slot name="footer">我是一个默认值，当没有传具体结构时，我会出现2</slot>

父组件

<template><div class="container"><Category title="美食" :listData="foods"><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""><a slot="footer" href="#">美食</a></Category><Category title="游戏"><ul slot="center"><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul><div class="foot" slot="footer"><a href="#">单机游戏</a><a href="#">单机游戏</a></div></Category><Category title="电影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template v-slot:footer><!-- 只有template才能这样写 --><div class="foot"><a href="#">经典</a><a href="#">2024</a><a href="#">热们</a></div><h4>欢迎观影</h4></template></Category></div>
</template>

3、作用域插槽

如果数据不在App中了，而在Category.vue中，然后App.vue要用到数据，这时我们就可以在Category.vue中使用slot标签给父组件App传值，写法很像当时父给子传值的props写法，在标签里搞个:games="games"，然后用到插槽的地方必须使用template标签包裹，并且配置scope属性来接收数据，接过来的是一个对象

其实这个功能使用默认插槽完全可以实现，但是默认插槽是指数据在使用插槽的文件里的，那么如果数据在别的地方（比如本案例的Category.vue文件），就得用作用域插槽

数据在Category.vue

<template><div class="Category"><h3>{{title}}分类</h3><slot :games="games">我是一个默认值，当没有传具体结构时，我会出现</slot></div>
</template><script>
export default {name:'Category',props:['title'],data() {return {games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽']}}
}
</script>

App.vue

<template><div class="container"><Category title="游戏"><template scope="cgp"><!-- {{ cgp.games }} --><ul><li v-for="(g, index) in cgp.games" :key="index">{{ g }}</li></ul></template></Category><Category title="游戏"><template scope="{games}"><!-- es6语法 --><ol><li v-for="(g, index) in games" :key="index">{{ g }}</li></ol></template></Category><Category title="游戏"><template slot-scope="{games}"><h4 v-for="(g, index) in games" :key="index">{{ g }}></h4></template></Category></div>
</template>