一：Axios异步通信
Axios是应用在浏览器端和Node.js的异步通信框架，作用是实现ajax。
axios官网：http://www.axios-js.com/ github下载地址：https://github.com/axios/axios 下载完成后的文件在dist路径里，我们需要的是axios.js
项目引入axios.js和vue.js
引入后我们需要有一个json数据文件来进行演示，文件放在跟html文件同级的位置：
{
"employee":{ "name":"Bill Gates", "age":62, "city":"Seattle" }
}
1.获取json数据
html:
<div id="app">
</div>js:
<script>
var app = new Vue({
el: "#app",
mounted(){
axios.get('../data.json').then(response=>(console.log(response.data)));
}
})
</script>浏览器访问，查看控制台：
2.打印json数据
html:
<div id="app">
{{info.employee.name}}
</div>js:
<script>
var app = new Vue({
el: "#app",
data(){
return{
info:{
employee:{
name: null,
age: null,
city: null
}
}
}
},
mounted(){
axios.get('../data.json').then(response=>(this.info=response.data));
}
})
</script>浏览器访问：
二：计算属性
计算属性computed跟methods方法定义非常类似，但computed的本质是将计算的内容封装为属性，而methods的本质仍然是一个方法。
html:
<div id="app" >
{{current1}}
</div>js:
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
},
methods: {
current: function(){
return Date.now();
}
},
computed: {
//计算属性
current1: function(){
return Date.now();
}
}
})
</script>总上所述，这里定义了一个计算属性和一个方法，但当这样访问的时候，默认会执行的是计算属性。
但当我们试图调用方法的时候，current1就不能直接修改成current了，而是current()
<div id="app" >
{{current()}}
</div>访问：
假如说这里没有加括号：
<div id="app" >
{{current}}
</div>访问：
由此可以得出计算属性和方法的区别，方法仍然是方法本身，而计算属性本身确实属性本身，计算这一步是在虚拟dom中执行的，且计算出的数值储存在了内存中，也就类似于形成了缓存。
三：插槽
这里的插槽个人理解为组件中的微组件，也就是说，组件如果是菜刀，那插槽就是水果刀，菜刀固然好使，但假如说我只是想削一下苹果皮，那使用菜刀就是大材小用了，因此用水果刀更轻便，而且如果我这把水果刀是折叠的还能用完放口袋里，十分方便。而这里的方便也对应着插槽的可拔插功能。
html:
<div id="app" >
<doto>
<do-title slot="do-title" v-bind:title="title"></do-title>
<do-items slot="do-items" v-for="item in todoitems" v-bind:item="item"></do-items>
</doto>
</div>js:
<script>
Vue.component("todo",{
template: '<div>'+
'<slot name="do-title"></slot>' +
'<ul>'+
'<slot name="do-items"></slot>' +
'</ul>'+
'</div>'
});
Vue.component("do-title",{
props: ["title"],
template: "<div>{{title}}</div>"
});
Vue.component("do-items",{
props: ["item"],
template: "<li>{{item}}</li>"
});
var app = new Vue({
el: "#app",
data: {
title: "这里是标题部分",
todoitems: ["A","B","C"]
}
});
</script>访问：
四：自定义事件分发
需求：通过点击对应的删除按钮删除对应的元素。
打印的内容结构是根据插槽拼接的，数据的根源来自new的Vue实例，如果想要删除，那自然也是删除Vue中data内容，而这一职务是前端能够直接行使而并非插槽能够直接行使的，如果查找试图修改Vue，那只能通过找前端来修改Vue，因此出现了对应的处理机制，自定义事件分发。
html:
<div id="app" >
<doto>
<do-title slot="do-title" v-bind:title="title"></do-title>
<do-items slot="do-items" v-for="(item,index) in todoitems"
v-bind:index="index" v-bind:item="item" v-on:remove="removeItems(index)" v-bind:key="inedx"></do-items>
</doto>
</div>js:
<script>
Vue.component("todo",{
template: '<div>'+
'<slot name="do-title"></slot>' +
'<ul>'+
'<slot name="do-items"></slot>' +
'</ul>'+
'</div>'
});
Vue.component("do-title",{
props: ["title"],
template: "<div>{{title}}</div>"
});
Vue.component("do-items",{
props: ["item","index"],
template: "<li>{{item}} <button @click='remove'>删除</button></li>",
methods: {
remove: function (index) {
//自定义事件分法
this.$emit('remove',index);
}
}
});
var app = new Vue({
el: "#app",
data: {
title: "这里是标题部分",
todoitems: ["A","B","C"]
},
methods: {
removeItems:function (index) {
this.todoitems.splice(index,1);
}
}
});
</script>
参考资料：
https://www.bilibili.com/video/BV18E411a7mChttps://cn.vuejs.org/
