1：首先导入两个包，一个是Vue的包，一个是axios的包：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2：文本框里面的数据使用双向绑定，这样我Vue里面发送axios请求的时候，可以直接使用文本框中的数据。同时，当我们点击搜索按钮的时候，触发搜索函数 SearchData。并且使用循环的方式，遍历搜索函数返回的列表，构造无序列表。.then会接收服务器发来的json数据，生成response对象，这个对象与js对象不同，而是再js对象的基础上进一步封装。 this.searchData = response.data.data.results，
<div id='app'>
<!-- 数据的双向绑定 -->
<input v-model="inputData" type="text">
<!-- 事件绑定 -->
<input @click="SearchData" type="button" value="搜索" >
<ul>
<!-- 列表渲染 -->
<li v-for='ser in searchData'>
{{ser.title}}
</li>
</ul>
</div>
3：解析SearchData方法：首先axios发送一个json请求，如果请求到数据就执行.then里面的方法，如果请求不到就执行.catch里面的方法，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>数据搜索</title>
</head>
<body>
<div id='app'>
<!-- 数据的双向绑定 -->
<input v-model="inputData" type="text">
<!-- 事件绑定 -->
<input @click="SearchData" type="button" value="搜索" >
<ul>
<!-- 列表渲染 -->
<li v-for='ser in searchData'>
{{ser.title}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
inputData: '',
searchData: ''
},
methods: {
// 搜索方法
SearchData: function () {
// 发送get请求 给 url服务器
// axios.get().then().catch()
axios.get('http://ttapi.research.itcast.cn/app/v1_0/search?q=' + this.inputData)
// 请求成功: response: 是一个js对象(json转换成js对象中的data)
.then((response) => {
console.log(typeof(response), response)
this.searchData = response.data.data.results
})
// 请求失败
.catch((error) => {
alert(error.data)
})
}
}
})
</script>
</body>
</html>
