vue-resource
也是对xhr的封装。是一个插件库。官方已经不再维护。推荐axios。
Vue.use(vueResource);
应用插件后，vc上有$http:
默认插槽
多个子组件需要展示不同的内容.
在父组件的模板里写内容，子组件申明一个插槽。内容会在插槽中显示。
父组件解析完结构再传过去。
<template>
<div class="container">
<category title="美食" :data="foods">
<img src="https://s3.ax1x.com/2021/01/16/srJIq0.jpg" alt="" />
</category>
<category title="游戏" :data="games">
<ul>
<li v-for="(item, index) in games" :key="index">{{ item }}</li>
</ul>
</category>
<category title="电影" :data="films">
<video controls src="https://clips.vorwearts-gmbh.de/big_buck_bunny.mp4"></video>
</category>
</div>
</template>具名插槽
当使用template时，可用v-slot:name.指明插槽位置。
<template>
<div class="ItemList">
<h3>{{title}}</h3>
<slot name='center'></slot>
<slot name='footer'></slot>
</div>
</template><template>
<div class="container">
<ItemList title="美食" :data="foods">
<img
slot="center"
src="https://s3.ax1x.com/2021/01/16/srJIq0.jpg"
alt=""
/>
<div class="foot" slot="footer">
<a href="https://www.atguigu.com" >更多美食</a>
</div>
</ItemList>
<ItemList title="游戏" :data="games">
<ul slot="center">
<li v-for="(item, index) in games" :key="index">{{ item }}</li>
</ul>
<div slot="footer" class="foot">
<a href="https://www.atguigu.com">单击游戏</a>
<!-- 可以追加-->
<a href="https://www.atguigu.com">网络游戏</a>
</div>
</ItemList>
<ItemList title="电影" :data="films">
<video
slot="center"
controls
src="https://clips.vorwearts-gmbh.de/big_buck_bunny.mp4"
></video>
<template v-slot:footer>
<div class="foot">
<a href="">经典</a>
<!-- 可以追加-->
<a href="https://www.atguigu.com">热门</a>
<a href="https://www.atguigu.com">推荐</a>
</div>
<h4 slot="footer">welcome to watch!</h4>
</template>
</ItemList>
</div>
</template>作用域插槽
(也可以有名字)
数据在子组件，结构需要由父组件决定。
需求第一次是无序，第二次是有序，第三次是h4。
可以在app组件传递数据，子组件根据数据进行条件渲染。
弊端是需要写的判断太多。
使用插槽：如果此时games数据不在app里，无法使用。
现需要app组件获取子组件里的数据。
?App里面需要使用Category组件，组件里有一个插槽，且在App里需要数据，数据来自于定义插槽的组件。
数据是一个对象，属性名是games，值是数组。所以<slot>可以传递多个数据。
<template>
<div class="ItemList">
<h3>{{title}}</h3>
<slot :gamesMsg='games'></slot>
</div>
</template><template>
<div class="container">
<ItemList title="游戏" >
<template scope="gamesMsg">
<ul>
<li v-for="(item, index) in gamesMsg.games" :key="index">{{ item }}</li>
</ul>
</template>
</ItemList>
<ItemList title="游戏">
<template scope="{gamesMsg}">
<ol>
<li style="color:red;" v-for="(item, index) in gamesMsg" :key="index">{{ item }}</li>
</ol>
</template>
</ItemList>
<ItemList title="游戏" >
<template slot-scope="{gamesMsg}">
<h4 v-for="(item, index) in gamesMsg" :key="index">
{{ item }}
</h4>
</template>
</ItemList>
</div>
</template>插槽总结
?
Vuex?
共享数据---全局事件总线实现，bcd需要访问到a里面的x，则需要在bcd中给$bus绑定事件和回调。a中触发事件并传递参数，bcd中触发回调，获取参数。
如果此时bcd中都需要修改x这个数据，此时a需要x修改的值，则此时在a中绑定事件和回调，获取参数，触发回调，在bcd中触发事件，传递参数给a。
?共享数据---vuex实现
求和案例
<template>
<div class="ItemList">
<h1>
sum =:{{sum}}
</h1>
<select v-model.number="n">
<option :value="1">1</option>
<option :value="2">2</option>
<option :value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="evenIncrement">求和为偶数再加</button>
<button @click="waitIncrement">等一等再加</button>
</div>
</template>
<script>
export default {
name:'ItemList',
data() {
return {
n:1,
sum:0,
};
},
methods: {
increment(){
this.sum += this.n;
},
decrement(){
this.sum -= this.n;
},
evenIncrement(){
if(!(this.sum % 2)){
this.sum += this.n;
}
},
waitIncrement(){
setTimeout(()=>{
this.sum += this.n;
},500)
}
},
}
</script>
<style>
button{
margin-left: 7px;
}
</style>Vuex工作原理图
? ? ?在组件中操作，调用dispatch("操作"，数据)，Actions是一个object对象，Actions里有个key叫"操作"，value是一个函数，函数就会被调用，且会收到数据，在这个函数里面，调用commit，Mutations也是一个object对象，Mutations里也有个key叫"操作"，value是一个函数，该函数会得到state和数据，在该函数写state.sum += 2，底层自动mutate，State里面的sum就变为了2，然后render，重新解析组件。
? ? ?Actions，里面可以发请求，从后端接口中获取数据。也可以进行逻辑判断，如奇数再加，等一等在加等。Vuex运行不通过Actions。
????Mutations是真正操作数据的对象。
? ??Actions，Mutations，State这三个对象都需要store进行管理。如store.dispatch,store.commit。
需要让所有的组件实例对象都能看见store。
