**搜索欄案例（你值得擁有）**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div id="container">
<input type="text" @keyup.enter="submit"><br>
<p>{{title}}</p>
<img v-bind:src="url" alt="it's a image">
<p>{{author}}</p>
</div>
<script>
new Vue({
el: "#container",
data: {
title: "三體",
url: "https://img1.doubanio.com/view/subject/s/public/s2768378.jpg",
author: "劉慈欣，祖籍河南，長于山西，中國科普作家協會會員，山西省作家協會會員，高級工程師。 自1999年處女作《鯨歌》問世以來，劉慈欣已發表短篇科幻小說三十余篇、出版長篇科幻小說六部，并創下連續八年榮獲中國科幻最高獎“銀河獎”的紀錄。他的長篇作品《三體》開創《科幻世界》月刊連載原創作品的先例，成為2006年度最受關注、最暢銷的科幻小說。"
},
methods: {
submit(event){
var self = this;
let value = event.target.value;
let url = `http://douban.uieee.com/v2/book/search?q=${value}&count=1`;
$.ajax({
type: "get",
url,
dataType: "jsonp",
success: function(res) {
self.title = res.books[0].title;
self.url = res.books[0].images.small;
self.author = res.books[0].author_intro;
}
})
}
}
})
</script>
</body>
</html>
~~~
