Uno de los beneficios de vue es enfocarse solo en la capa de vista. Para la comunicación, puede enviar una solicitud ajax a través de la función de gancho montado antes de que se cree el objeto de instancia vue para obtener los datos json.
Envíe la solicitud a través de axios o jQuery.
Los datos solicitados están en el objeto de respuesta. Y vinculado al método de datos del objeto vue.
1. Datos a los que acceder
{
"name": "bitqian",
"age": 19,
"address": {
"school": "changsha",
"home": "hunan"
},
"hobby": [
{
"book": "《麦田里的守望者》",
"game": "《king of glory》"
},{
"language": ["java", "js", "python"],
"blog": "https://blog.csdn.net/qq_44783283"
}
]
}
2. Vue usa el paquete de terceros axios para enviar la solicitud
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios 请求</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{
{ info.hobby[1].language[0] }}
<a v-bind:href="info.hobby[1].blog">bitqian's blog</a>
{
{ info.address.home }}
</div>
<script>
let vue = new Vue({
el: "#app",
data() {
// 接收数据并返回
return {
// 返回的格式要与响应的json格式对应
info: {
name: null,
address: {
school: null,
home: null
},
hobby: [
{
book: null,
game: null
},
{
language: [null, null, null],
blog: null
}
]
}
}
},
mounted() {
// 钩子函数，在虚拟dom执行前，用于发Ajax请求
// axios.get('../data.json').then(response=> console.log(response.data));
axios.get('../data.json').then(response=>(this.info=response.data))
}
});
</script>
</body>
</html>