（在此声明图片logo自己找！且放在一个img文件里）
文件名为test_copy.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度一下，你就知道(模仿)</title>
<link rel="shutcut icon" type="image/x-icon" href="img/bitbug_favicon.ico" />
<style type="text/css">
html,body{
100%;/*默认值是0*/
height: 100%;/*默认值是0*/
margin: 0px;
padding: 0px;
}
#mybody{
100%;
height: 100%;
/*background-color:red;*/
}
#navigation_bar{
100%;
height: 40px;
/*background-color: green;*/
text-align: right;/*文字内容靠右*/
line-height: 40px;/*保证文字的垂直方向居中*/
}
#navigation_bar span{
padding: 0px 10px 0px 0px;
font-size: 14px;
/*color:#333;*/
color:#404040;
}
#logoDiv{
270px;
height: 129px;
/*background-color: blue;*/
margin: 0 auto; /* 布局居中的一种写法 */
}
#inputDiv{
// 655px;
// 855px;
height: 180px;
/*background-color: yellow;*/
/*margin: 0 auto;此处不写，因为在后面进行绑定*//* 布局居中的一种写法 */
//padding: 15px 0px 0px 0px;
}
#inputView{
border:solid 1px #4791ff;
530px;
height: 15px;
font-size: 16px;
padding: 10px;
}
#submitView{
98px;
height:37px;
border: solid 1px #4791ff;
background-color: #3385ff;
color: #ffffff;
font-size: 15px;
cursor: pointer;
}
#submitView:HOVER {
background-color: #317ef3;/*鼠标移动过去时，背景颜色发生变化*/
}
#keywordDiv{
position:relative;
left:124px;
// 50px;
550px;
height: 100px;
background-color: #ffffff;
//background-color: yellow;
border: solid 1px #cccccc;
}
#keywordDiv div{
500px;
height: 20px;
line-height: 20px;
font-size: 16px;
font-weight: bold;
padding: 5px 0px 0px 5px;
}
.newsitem_title{
color: blue;
font-size: 16px;
padding: 10px 0px 0px 10px;
position: relative;
left: 125px;
}
.newsitem_desc{
color: #666666;
font-size: 12px;
padding: 10px 0px 0px 10px;
position: relative;
left: 125px;
}
.newsitem_href{
color: #528000;
font-size: 12px;
//padding: 10px 0px 30px 10px;
position: relative;
left: 135px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="mybody">
<div id="navigation_bar" v-if="logoShow">
<span>新闻</span><span>hao123</span><span>地图</span><span>视频</span><span>贴吧</span><span>学术</span><span>登录</span><span>设置</span>
</div>
<div id="logoDiv" v-if="logoShow">
<img src="img/bd_logo1.png" width="270" height="129"/>
</div>
<div id="inputDiv" v-bind:style="{margin:inputDivStyle,inputwidth}">
<img src="img/bd_logo1.png" width="120" height="50" v-if="imgShow"/>
<input id="inputView" type="text" v-model="word"><input id="submitView" type="submit" value="百度一下">
<div id="keywordDiv" v-if="keywordShow">
<div v-for="item in keywordList" @click="selectItem(item)">{{item.word}}</div>
</div>
</div>
<div id="newListDiv" v-if="contentDiv">
<div v-for="item in newsList">
<div class="newsitem_title">{{item.title}}</div>
<div class="newsitem_desc">{{item.desc}}</div>
<div class="newsitem_href">{{item.href}}</div>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var clickMyself = false;//用于标记是否我自己点击而产生对model一个改变
var myModel = {logoShow:true,keywordShow:false,imgShow:false,contentDiv:false,word:'',inputDivStyle:'0 auto',input'655px',keywordList:[],newsList:[]};
var myViewModel = new Vue({
el:'#mybody',
data:myModel,
methods:{
selectItem:function(item){
myModel.contentDiv=true;
myModel.word=item.word;
myModel.keywordShow=false;
myModel.inputwidth='855px';
clickMyself = true;//标记一下，是我自己点击
}
},
computed:{
},
watch:{
word:function(){
if(clickMyself==true){
clickMyself = false;
console.log('客户自己选中，不是输入，此方法自动退出');
return;//如果是自己点击，就不用再去访问下面代码，避免重复访问后台
}
console.log('模型word的值变了');
this.logoShow=false;
this.inputDivStyle='10px';
//this.keywordShow=true;//移动到成功事件之后
$.ajax({
url:'ServiceAPI001.jsp',
type:'GET',
//data:clientInput,
dataType:'json',
timeout:2500,
success:function(result){
myModel.keywordShow=true;
myModel.imgShow=true;
myModel.keywordList = result.keywordList;
myModel.newsList = result.newsList;
myModel.inputwidth='855px';
//alert(result.keywordList);
//alert(result.bookList);
//myModel.bookList = result.bookList;
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert('服务器忙，请刷新页面');
alert(textStatus+XMLHttpRequest.status);
}
});
}
}
});
</script>
</html>
-----------------------------------------------------------------------------------
后台为以下代码（写死的json）
文件名为：ServiceAPI001.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><%
Thread.sleep(500);
%>{"keywordList":[{"word":"刘亦菲重返校园"},{"word":"刘亦菲"},{"word":"刘德华"},{"word":"刘诗诗"}],"newsList":[{"title":"新闻标题1","desc":"内容描述1","href":"http://xxx/link1.jsp"},{"title":"新闻标题2","desc":"内容描述2","href":"http://xxx/link2.jsp"},{"title":"新闻标题3","desc":"内容描述3","href":"http://xxx/link3.jsp"}]}