## 引入
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
```
## html
```
<div id="test">
<!-- enter键按下时触发提交事件 -->
<input type="text" @keyup.enter="submit">
<p>{{title}}</p>
<img v-bind:src="url" alt="">
</div>
```
## css
```
<style>
input{
border-radius: 3px;
height: 30px;
width: 250px;
padding-left: 10px;
border:1px solid #333;
}
</style>
```
## JS
```
new Vue({
//指定再test这个div块上
el:"#test",
data:{
title:"三体",
url:"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2248627938.webp"
},
//vue的事件写在methods里面
methods:{
submit(event){
var self = this;
let value = event.target.value;
//url地址使用插值表达式` `，不是‘ ’
let url = `https://douban.uieee.com/v2/movie/search?q=${value}&count=1`;
$.ajax({
url,
type:"get",
dataType:"jsonp",
success(res){
self.handleData(res);
}
})
console.log(value);
},
handleData(res){
let title = res.subjects[0].title;
let url = res.subjects[0].images.small;
this.title = title;
this.url = url;
}
}
})
```
