一、Vue.js框架
1、一个MVVM框架
2、Vue的好处:简单,易上手,个易维护,更适合移动端,
不足:不兼容低版本IE
3、指令:V-model V-for 这些都称为指令
4、事件:事件已V-on:开头,缩写是:@click=""
二、百度接口
一条原本的接口:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
去掉多余的:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su
wd=a这个是用户搜索的内容,a在下文被改为wd=this,tl
cb也就是callback 回调函数,也就是下文的:jsonp:'cb'
!!! - CSS
<style>
*{margin:0;padding:0;}
#baidu{width:100%;}
</style>
!!! - HTML
<section>
<div id="baidu">
<div class="container">
<p class="text-primary text-center h3">百度搜索框</p>
<input class="form-control" placeholder="输入关键字" v-model="tl" @keyup="get()"/>
<ul v-for="(item,index) in myData"> <!--(item,index)中item是数据,index是下标-->
<li>{{index+1}}----{{item}}</li>
</ul>
</div>
</div>
</section>
!!! Vue
$(function(){
new Vue({ //用Vue,需要用到Vue的时候,先需要创建一个Vue对象,new 方法也就是创建一个Vue的对象
el:'#baidu', //el:'' 这个就是容器
data:{ //data:{} 里面放数据
tl:'', //这个就是文本框中的值,由于HTMN中,有V-model="tl",所以文本框中输入什么,tl就会等于什么
myData:[] //创建数组,先为空,当有数据的时候,会有数据传到里面
},
methods:{ //methods:{} 函数都写在这里面
get:function(){ //这个跟get()并没有什么关系,只是名字,换其他名字也可以
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ //这个是百度的API接口,也就是网址
wd:this.tl //这里的wd是你要搜索的内容 this.tl就是文本框内的内容
},{
jsonp:'cb' //默认是callback //百度默认的,要调用百度接口,就需要添加这条 callback意思是回调函数
}).then(function(res){ //then(fn1,fn2)是执行数据获取成功和失败时要做的事
this.myData=res.data.s; //获取成功,把百度的数据赋值给数组myData
},function(res){ //获取失败,则显示错误信息,status是系统自带的错误信息,不需要刻意去写
alert(res.status);
})
}
}
})
})