**搜索栏案例（你值得拥有）**
~~~
<!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>
~~~
