用Vue做个最简单的搜索框

一、找出百度搜索的链接

打开百度，随便搜索一下，看搜索之后的超链接

把超链接复制过来

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg
&wd=%E7%BE%8E%E5%A5%B3&rsv_spt=1&oq=aaaa&rsv_pq=f9b7672e00107958
&rsv_t=d8ffFNea8wEXuIaTs6YsHDI%2B5E7CAwyC9q9yzGJaqKPT5kdjSXdBdbEjResWsnLZfMTr
&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_sug3=4&rsv_sug1=3
&rsv_sug7=100&rsv_btype=t&inputT=4878&rsv_sug4=4880

在里面找出刚才用的搜索关键字“美女”就行了，一眼看出%E7%BE%8E%E5%A5%B3就是“美女”。。。。当然也有可能不是！重新再来一次

这次复制出来的链接是这样的

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=girl
&rsv_spt=1&oq=meivn&rsv_pq=89bd9fa7000906bc&
rsv_t=be74WiwNjxi3T3TXASratRp%2B6GYJ79JhIYt4%2F%2FhxBYeZXC%2Fw5dcQW6qFjabw%2BOxdX%2FDK
&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_btype=t&inputT=1146&rsv_sug3=14&rsv_sug1=12
&rsv_sug7=100&rsv_sug2=0&rsv_sug4=1146

girl后面的都用不到，前面的有些也用不到，删了就是，先删后面的，变成这样

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=girl

再删前面的，按java里的请求方式写法，应该是这样的：www.baidu.com/request?id=11

所以直接把上面的网址再删成

https://www.baidu.com/s?wd=girl

复制到浏览器看看能不能打开

一路盲猜，成功获得百度的搜索超链接地址是：

https://www.baidu.com/s?wd=

二、建个Vue页面

里面放个输入框，一个按钮，一个方法就完事

    <body><div id="app"><input type="text" v-model="str" /><button @click="btnClick">百度一下</button></div><script type="text/javascript">var vm = new Vue({el:"#app",data:{str:""},methods:{btnClick(){console.log(vm.str);window.location.href="http://wwww.baidu.com/s?wd="+vm.str;}}})</script></body>

三、测试运行

四、加入更多的搜索引擎

用同样的方法找出别的搜索引擎的超链接

360
https://www.so.com/s?q=girl
搜狗
https://www.sogou.com/web?query=girl
Bing
https://cn.bing.com/search?q=girl

五、继续测试

代码都复制一堆就行，按钮和方法全部复制，输入框就用一个得了

    <body><div id="app"><input type="text" v-model="str" /><br><button @click="btnClick">百度一下</button><br><button @click="btnClick2">360一下</button><br><button @click="btnClick3">搜狗一下</button><br><button @click="btnClick4">必应一下</button><br></div><script type="text/javascript">var vm = new Vue({el:"#app",data:{str:""},methods:{btnClick(){window.location.href="http://wwww.baidu.com/s?wd="+vm.str;},btnClick2(){window.location.href="https://www.so.com/s?q="+vm.str;},btnClick3(){window.location.href="https://www.sogou.com/web?query="+vm.str;},btnClick4(){window.location.href="https://cn.bing.com/search?q="+vm.str;}}})</script></body>

运行效果如下

六、再加上淘宝和京东

还是一样的方法，找出同样的超链接

天猫
https://list.tmall.com/search_product.htm?q=girl
京东
https://search.jd.com/Search?keyword=girl

还是一样的复制粘帖，整出一堆代码

 <body><div id="app"><input type="text" v-model="str" /><br><button @click="btnClick">百度一下</button><br><button @click="btnClick2">360一下</button><br><button @click="btnClick3">搜狗一下</button><br><button @click="btnClick4">必应一下</button><br><button @click="btnClick5">天猫一下</button><br><button @click="btnClick6">京东一下</button><br></div><script type="text/javascript">var vm = new Vue({el:"#app",data:{str:""},methods:{btnClick(){window.location.href="http://wwww.baidu.com/s?wd="+vm.str;},btnClick2(){window.location.href="https://www.so.com/s?q="+vm.str;},btnClick3(){window.location.href="https://www.sogou.com/web?query="+vm.str;},btnClick4(){window.location.href="https://cn.bing.com/search?q="+vm.str;},btnClick5(){window.location.href="https://list.tmall.com/search_product.htm?q="+vm.str;},btnClick6(){window.location.href="https://search.jd.com/Search?keyword="+vm.str;}}})</script></body>

运行效果再看看怎么样

都能打开，不过天猫提示要登陆，直接略过，还是京东好

总结重点：

跳转代码：window.location.href="http://wwww.baidu.com/s?wd="+vm.str

记住这句，别的可以不用看

用Vue做个最简单的搜索框相关推荐

搜索功能java代码_简单的搜索框代码实现
简单的搜索框页面功能的实现(代码如下) String path = request.getContextPath(); String basePath = request.getScheme()+&q ...
html、css做一个带搜索图标的搜索框
html.css图像代替提交按钮做个搜索框图像形式的提交按钮与普通提交按钮在功能上基本相同,只是它用图像代替了默认的提交按钮,外形上更加美观.需要注意的是,必须为其定义src属性指定图像的url地 ...
vue点击图标跳出精美搜索框
好的,我可以用中文来为你解答这个问题. 在 Vue 中,你可以使用 @click 绑定事件来处理点击图标时跳出精美搜索框的逻辑. 首先,你需要在 template 中添加一个图标和一个搜索框,如下所示 ...
idea插件开发(01)---最简单的helloworld版,不需要知道原理,先跟我做一个最简单的弹框插件
前言用了那么多idea插件,也想自己做一个插件,下面就是入门版本你不需要先知道所有的概念,先跟着我的步骤做一个小;例子,后面再说原理相关概念看后面一篇本次以windos系统为例开始 1.你得 ...
js:ajax的get方法实现简单的搜索框提示
效果演示: 一,使用nodejs搭建后台环境,通过ajax的get方法将文本框中的值,实时传输到后台进行比较,后台返回相应的结果,将结果返回到ul中 1,创建路由 app4.js /*** Creat ...
vue纯前端留痕，搜索框历史记录，获取焦点，失去焦点历史记录消失
效果图 html代码 <div class="search"><div class="search-btn"><el-inputv ...
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
百万前端之VUE 2.X + vant 实现关键字搜索内容搜索记录、热搜
在前端工作中,一般对于展示数据量比较多的页面来说,都是需要一个搜索功能来给予用户更优质的体验:这次展示的例子来源于我的工作中的摘录.插件安装就不多说了,各位大佬一个都懂npm install了吧. 下 ...
html 搜索框自动补全,自动完成的搜索框javascript实现
自动完成的搜索框javascript实现 2019-01-04 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现,编程之家 ...