Vue-百度搜索下拉提示框

一、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);
　　　　　　　　})
　　　　　　}
　　　　}
　　})
})

转载于:https://www.cnblogs.com/xiaoyangtian/p/7927992.html

• 点赞
• 收藏
• 分享
• 文章举报