vue实现百度搜索框功能,vue百度搜索引擎seo
本文主要详细介绍Vue的类百度搜索功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
简述
学习vue的第二节。因为2.0版本不是向后兼容，很多视频无法实现。下面是一些关键知识点。
//v-on可以缩写成@
//事件冒泡是指当div内部的按钮被点击触发show1()时，必然会冒泡到div执行show2()，这在分层div中很常见。
//防止冒泡，原生js方法，将事件对象的cancelBubble属性设置为true
//vue方法@click.stop
//阻止默认行为，本机js方法，并将事件对象的preventDefault属性设置为true
//vue method @ context menu . prevent
//键盘事件获取keyCode，原生js方法，使用事件对象的keycode属性。
//vue method @ keyup.key代码或键名，如get press enter @ keydown . 13或@ keydown.enter。
//绑定属性v-bind:src，简称：src只绑定一次。使用v-once将绑定内容转义为html。使用v-html。
基本知识：
某视频剪辑软件
$http.jsonp()。然后()
:类别
@keyup
@keydown
配置文件
script src=lib\vue.js/script
！- vue本身不支持数据交互，所以必须引入vue-resource.js。现在vue官方推荐axios.js -
script src= lib \ vue-resource . js /script
脚本
脚本
window.onload=function() {
新Vue({
el: #box ，
数据：{
我的数据：[]，
内容： ，
现在：-1，
},
方法：{
获取：函数(ev) {
//这里的键代码只能通过事件对象$event传入，因为大部分键应该是可以搜索的。我们必须排除的是上升(38)和下降(40)
if(ev . key code==38 ev . key code==40){
返回；
}
//这里，当按下的键是Enter时，应该实现搜索跳转功能。
if(ev.keyCode==13) {
window . open( https://www . Baidu . com/s？wd= this . content)；
this . content=“”；
}
这个。$ http . jsonp( https://sp 0 . Baidu . com/5a 1 fa zu 8 aa 54 nxgko 9 wtan F6 hy/su？wd= this.content，{
jsonp: cb
}).然后(函数(res) {
this . my data=RES . data . s；
}，function() {
警报(“搜索失败”)；
})
},
changeDown: function() {
this.now
if(this . now==this . my data . length){
this . now=-1；
}
//在这里，输入框中显示相同的内容。
this . content=this . my data[this . now]；
},
changeUp: function() {
this . now-；
if (this.now==-2) {
this . now=this . my data . length；
}
this . content=this . my data[this . now]；
}
},
})
}
/脚本
010-5900GET()用于与百度的数据交互；CheangeDown()用于下移选定区域；Up()用于将所选区域向上移动。
超文本标记语言
身体
div id=box
input type= text name= id= v-model= content @ keyup= get($ event) @ keydown . down= change down() @ keydown . up= change up()
保险商实验所
！-请注意，当向类添加属性时，它采用{attribute: true/false}的形式-
li v-for=(item，index)in my data :class= { grey:index==now }
{{item}}
/李
/ul
P-show= mydata.length==0 尚无数据./p
/div
/body
影响
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。