在前端开发中，数据的搜索常常是很重要的功能。Vue作为一款优秀的前端框架，在搜索功能方面也有很好的表现。下文将详细介绍Vue中如何实现点击按钮搜索。

首先，我们需要准备一个panel，在其中设置一个表单。表单中包含一个input输入框和一个button按钮。在这个button按钮的声明中，我们还可以绑定一个@click事件，这个事件将会在按钮被单击之后触发。如下所示：

<div id="panel">
<form>
<input type="text" name="search-box" id="search-box" />
<button @click="search">搜索</button>
</form>
</div>

需要注意的是，我们在button元素中绑定的事件是search。在下一步中，我们将会在Vue实例中定义这个方法。

接下来，我们需要创建Vue实例，并且在其中定义search方法。这个方法是我们实现点击按钮搜索的核心。在search方法中，我们需要获取input输入框中的内容，并且处理这个内容。处理之后，我们可以将处理后的结果存储到Vue实例的一个data属性中。代码如下：

var vm = new Vue({
el: '#panel',
data: {
searchData: ''
},
methods: {
search: function() {
var searchBox = document.getElementById('search-box');
this.searchData = searchBox.value;
}
}
});

在这段代码中，我们在Vue实例中定义了data属性，名为searchData。我们在search方法中获取了input输入框中的内容，并将其存储到了searchData中。需要注意的是，我们使用this关键字来引用Vue实例。这样可以保证我们在方法中访问到Vue实例的data属性。

搜索的功能只有输入框中的内容不为空的时候才应该被触发。因此，在search方法中我们需要加以判断。只有当输入框中有内容时，搜索功能才会被启用。我们可以在search方法的开头加入如下代码：

search: function() {
var searchBox = document.getElementById('search-box');
if (searchBox.value.trim() === '') {
return;
}
this.searchData = searchBox.value;
}

需要注意的是，在这段代码中，我们使用了trim()方法来删除input输入框中的空格。如果输入框中仅仅只有空格，我们也应该将其判定为空。同时，我们在方法的开头进行了判断，如果输入框没有内容，方法会直接返回，不进行处理。

最后，我们需要在HTML页面中展示搜索的结果。这个结果就是我们在search方法中处理后得到的searchData属性。我们可以在页面中使用{{}}来嵌套searchData属性，并展示其内容。如下所示：

<p>搜索的结果为：{{ searchData }}</p>

当我们完成了以上全部步骤后，点击按钮搜索功能就已经完成了。如果您想要体验这个功能，可以直接将以上代码复制到您的HTML页面中，就可以完成按钮搜索的功能。