Vue实例——百度搜索案例

Vue实例——百度搜索案例

vue作为前端开发的渐进式框架，不仅比jQuery更加简洁，而且功能更为强大。接下来我将用vue.js给大家介绍一个运用搜索框实现百度搜索的功能。

---

开始之前我需要讲解一下百度搜索的数据传递流程

• 首先我们进百度搜索网站，然后输入关键词 “湖北理工”（博主上的渣渣大学……），然后我们观察网络请求，可以看到下面几个画面。
  
  
  
  

大家有没有发现什么重点。当我们从输入框输出关键字的时候，我们能够看到这样一个url，https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su，没错，这就是百度的一个接口，其中wd=后面拼接的就是我们的关键词，然后这个请求给我们返回的一串JSON数组就是关键字的提示搜索，这样我们搜索所得到的提示词就有了。那么我们怎么才能访问我们需要的信息呢，我们再看看按回车所得到的东西。

大家看看地址栏，是不是有一个很熟悉的参数，wd=湖北理工。没错，我们只需要在https://www.baidu.com/s?后面拼接上wd的值就可以实现网页跳转到搜索结果词条。相信大家看到这里应该都明白了百度搜索的网络请求过程，下面我们来尝试用vue实现这个功能。

---

- 贴出我的全部代码

	
	
	
	
	


    

    	

    		
百度搜索案例
    	
    	

    		

    			
	    		

	    			
{{item}}
	    		
    		
    	
    

---

这段代码的注释我说的也很清楚了，其中的布局用的bootstrap快速布局。

我重点介绍一下vue在其中所参与的角色，首先我们在data中声明了三个变量，wd为关键词，arr为词条结果，listIndex为词条索引。我们通过v-model实现input标签的双向绑定，意思是我们在input中输入什么值，那么wb的值就会随时改变，从而不断更新arr中的数据。然后我们v-for实现数据渲染，我们把arr中的数据通过循环，我们获取arr中的两个参数，一个是item，一个是index，因此我们便可以通过index和listIndex比较，如果index=lsitIndex，那么则动态修改这一行的样式。（:class="{‘list-group-item-info’:index==listIndex}"）class前面有一个冒号，代表动态绑定，这就是vue强大的一个部分，随时能够实现数据，样式的动态渲染。

细心的同学可能会发现我的代码除了bootstrap和vue，还引入了一个js文件，没错，就是vue-resource。vue中有专门发送请求的框架，但是由于同源策略，我们无法访问协议，域名，端口不同的服务器，因此我们需要通过jsonp来进行跨域，跨域这里我不做多解释，大家可以看看下面这篇文章。http://blog.csdn.net/u014607184/article/details/52027879

---

下面是成果展示

---

后续

我也是刚学习vue不久，在此之上简单介绍了vue的一些基本功能，其实vue的功能远不止此，并且Vue+Node+MongoDB已经在很多开发者心中成为一种新的学习方向，大家有兴趣也可以去了解一下。
`