用vue实现搜索查询
使用 Vue 实现搜索查询
创建 Vue 项目并设置基础结构
确保已安装 Vue CLI，通过以下命令创建项目：
vue create search-demo进入项目目录后，安装必要的依赖（如 Axios 用于 API 调用）：
npm install axios实现搜索组件
在 src/components 下创建 SearchComponent.vue，包含输入框和搜索结果展示区域：
<template>
<div>
<input
type="text"
v-model="searchQuery"
@input="handleSearch"
placeholder="输入关键词..."
/>
<ul v-if="results.length">
<li v-for="result in results" :key="result.id">
{{ result.name }}
</li>
</ul>
<p v-else>暂无结果</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
searchQuery: '',
results: [],
debounceTimer: null
};
},
methods: {
handleSearch() {
clearTimeout(this.debounceTimer);
this.debounceTimer = setTimeout(() => {
if (this.searchQuery.trim()) {
this.fetchResults();
} else {
this.results = [];
}
}, 300);
},
async fetchResults() {
try {
const response = await axios.get('https://api.example.com/search', {
params: { q: this.searchQuery }
});
this.results = response.data;
} catch (error) {
console.error('搜索失败:', error);
}
}
}
};
</script>添加防抖优化
通过 setTimeout 和 clearTimeout 实现输入防抖，避免频繁触发 API 请求：
// 已在上述代码的 handleSearch 方法中实现集成到主应用
在 App.vue 中引入并使用搜索组件：
<template>
<div id="app">
<SearchComponent />
</div>
</template>
<script>
import SearchComponent from './components/SearchComponent.vue';
export default {
components: { SearchComponent }
};
</script>样式优化
根据需要添加基础样式，例如调整输入框和结果列表的显示：
input {
padding: 8px;
width: 300px;
margin-bottom: 20px;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 8px;
border-bottom: 1px solid #eee;
}后端 API 对接
若需对接真实后端，替换示例中的 https://api.example.com/search 为实际接口地址，并确保支持查询参数（如 q=关键词）。测试时可先用 Mock 数据：
// 在 fetchResults 方法中临时模拟数据
this.results = [
{ id: 1, name: '结果1' },
{ id: 2, name: '结果2' }
];注意事项
- 根据实际需求调整防抖时间（示例为 300ms）。
- 处理 API 错误时，可增加用户提示（如 Toast 或错误状态显示）。
- 若结果量大，考虑分页或虚拟滚动优化性能。
