不使用js-ajax 使用VueResource實現數據請求 · javascript

### 說明： ~~~ 官方已停止對VueResource進行更新推薦使用axios 但axios不支持jsonp ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> </head> <body> <div id="test"> <input type="text" @keyup.enter="submit">   <p>{{title}}</p> <img v-bind:src="url" alt=""> <p></p> </div> <script> new Vue({ //作用位置 el："" el:"#test", //數據 data:{ title:"三體", url:"https://img1.doubanio.com/view/subject/m/public/s2768378.jpg" }, //方法 methods: { submit(event) { //成功的情況下執行的函數 var self = this; let value = event.target.value;//獲取輸入框中的數據 let url = `https://api.douban.com/v2/movie/search?q=${value}&count=1` console.log(value); this.$http.jsonp(url).then(res=>{ this.handleData(res.body); }) }, handleData(res){ console.log(res) let title=res.subjects[0].title; let url=res.subjects[0].images.small; this.title=title; this.url=url; } } }) </script> </body> </html> ~~~