携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天,点击查看活动详情 >>
接着上文的5更新
6.网络通信：jquary.ajax和Axios
用在浏览器和node.js异步通信框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="vue">
</div>
<script>
var vm=new Vue({
el:"#vue",
mounted(){//钩子函数 链式编程
axios.get('../data.json').then(response=>(console.log(response.data)))
}
})
</script>
</body>
</html>
渲染到浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="vue">
{{info.name}}
</div>
<script>
var vm=new Vue({
el:"#vue",
data(){
return{
info:{
name:null,
adress:{
street:null,
city:null,
country:null
}
}
}
},
mounted(){//钩子函数 链式编程
axios.get('../data.json').then(response=>(this.info=response.data))
}
})
</script>
</body>
</html>
解决闪烁模板问题
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="vue" v-cloak>
{{info.name}}
</div>
10.2.1 GET方式的请求
//发送GET方式请求
axios.get("http://localhost:8989/user/findAll?name=xiaochen").then(function(response){
console.log(response.data);
}).catch(function(err){
console.log(err);
});
10.2.2 POST方式请求
//发送POST方式请求
axios.post("http://localhost:8989/user/save",{
username:"xiaochen",
age:23,
email:"xiaochen@zparkhr.com",
phone:13260426185
}).then(function(response){
console.log(response.data);
}).catch(function(err){
console.log(err);
});
10.2.3 axios并发请求
并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果
//1.创建一个查询所有请求
function findAll(){
return axios.get("http://localhost:8989/user/findAll?name=xiaochen");
}
//2.创建一个保存的请求
function save(){
return axios.post("http://localhost:8989/user/save",{
username:"xiaochen",
age:23,
email:"xiaochen@zparkhr.com",
phone:13260426185
});
}
//3.并发执行
axios.all([findAll(),save()]).then(
axios.spread(function(res1,res2){ //用来将一组函数的响应结果汇总处理
console.log(res1.data);
console.log(res2.data);
})
);//用来发送一组并发请求
7.计算属性
将计算出来的结果保存在属性中。内存中运行：虚拟dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>
{{currentTime()}}
</p>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
message:"chp"
},
methods:{
currentTime:function (){
return Date.now();//返回一个时间戳
}
},
computed:{//计算属性，不能重名和方法，重名后调用了方法中的函数，调用不需要打括号{{currentTime}}
currentTime1:function (){//可以把值存在属性中，而方法每次都要调用计算。结果不常变化就可以缓存起来
return Date.now();//返回一个时间戳
}
}
});
</script>
</body>
</html>
7.1生命周期（补充）
8.插槽
第一个插槽程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title":title="title">
</todo-title>
<todo-items slot="todo-items" v-for="item in todoitems":item="item">
</todo-items>
</todo>
</div>
<script>
Vue.component("todo",{
template:
'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items" ></slot>\
</ul>\
</div>'
})
Vue.component("todo-title",{
props:['title'],
template: '<div>{{title}}</div>'
})
Vue.component("todo-items",{
props:['item'],
template: '<li>{{item}}</li>'
})
let vue = new Vue({
el:"#app",
data :{
title:"chp",
todoitems:["chp","chp","chp"]
}
});
</script>
</body>
</html>
9.自定义事件内容分发
splice():方法是修改array的万能方法，他可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素
例：arr.splice(2，3)//在下标为2的地方删除三个元素
10.vue-cli
vue-cli是官方提供的一个脚手架，可以方便快速的构建应用。
