1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src=""></script> 9 <script src=""></script> 10 11 </head> 12 13 <body> 14 <!-- 定义一个vue的管理区块，（MVVM中的View） --> 15 <div> 16 <button @click="getApiData">点击得到数据</button> 17 {{name}} 18 </div> 19 20 </body> 21 22 <script> 23 24 // 实例化vue对象（MVVM中的View Model） 25 new Vue({ 26 // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析 27 el:\'#app\', 28 data:{ 29 // 数据 （MVVM中的Model） 30 name:"" 31 }, 32 methods:{ 33 getApiData:function() { 34 //设置请求路径 35 var url = "http://157.122.54.189:9093/api/getprodlist"; 36 // 发送请求:将数据返回到一个回到函数中 37 _this= this; 38 // 并且响应成功以后会执行then方法中的回调函数 39 axios.get(url).then(function(result) { 40 // result是所有的返回回来的数据 41 // 包括了响应报文行 42 // 响应报文头 43 // 响应报文体 44 console.log(result.data.message[0]); 45 _this.name = result.data.message[0].name; 46 }); 47 } 48 } 49 }) 50 </script> 51 </html>