Vue仿百度搜索功能


Posted in Vue.js onDecember 28, 2020

简述

学习vue的第二节,由于2.0版本并不向下兼容,视频中的不少内不能实现。下面列出一些主要知识点

// v-on 可简写为@
// 事件冒泡是指当点击div内部的button触发show1()时,必然会冒泡到div上执行show2(),这才层级div中很常见
// 阻止冒泡,原生js法,设置事件对象的cancelBubble属性为true
// vue方法@click.stop

// 阻止默认行为,原生js法,设置事件对象的preventDefault属性为true
// vue方法@contextmenu.prevent

// 键盘事件获取键码,原生js法,使用事件对象的keyCode属性
// vue方法@keyup.键码或键名,如获取按下回车@keydown.13 或 @keydown.enter

// 绑定属性v-bind:src,简写 :src 只绑定一次使用v-once,将绑定内容转义成html使用v-html

基本知识:

vue

$http.jsonp().then()
:class
@keyup
@keydown

配置库文件

<script src="lib\vue.js"></script>
<!-- vue本身不支持数据交互,必须引入vue-resource.js,现在vue官方也推荐axios.js-->
<script src="lib\vue-resource.js"></script>

Script

<script>
    window.onload = function() {
      new Vue({
        el: '#box',
        data: {
          myData: [],
          content: '',
          now: -1,
        },
        methods: {
          get: function(ev) {
            // 这里的键码只能通过事件对象$event传进来,因为输入大多数键都应该可以进行搜素,我们要排除的就是up(38)和down(40)
            if (ev.keyCode == 38 || ev.keyCode == 40) {
              return;
            }
            // 这里当按下的键是Enter时,应实现搜索跳转功能
            if(ev.keyCode == 13) {
              window.open('https://www.baidu.com/s?wd=' + this.content);
              this.content = '';
            }
            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.content, {
              jsonp: 'cb'
            }).then(function(res) {
              this.myData = res.data.s;
            }, function() {
              alert("搜索失败");
            })
          },
          changeDown: function() {
            this.now++;
            if(this.now == this.myData.length) {
              this.now = -1;
            }
            // 这里实现输入框中也显示同样的内容
            this.content = this.myData[this.now];
          },
          changeUp: function() {
            this.now--;
            if (this.now == -2) {
              this.now = this.myData.length;
            }
            this.content = this.myData[this.now];
          }
        },
      })
    }
</script>

三个方法:get()用于对百度进行数据交互;cheangeDown()用于实现选中区域下移;changeUp()用于实现选中区域上移

HTML

<body>
  <div id="box">
    <input type="text" name="" id="" v-model="content" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">
    <ul>
      <!-- 这里注意给class添加属性的时候采用的是{属性:true/false}的形式 -->
      <li v-for="(item, index) in myData" :class="{grey: index==now}">
        {{item}}
      </li>
    </ul>
    <p v-show="myData.length == 0">暂无数据...</p>
  </div>
</body>

效果

Vue仿百度搜索功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
Vue实现省市区三级联动
Dec 27 #Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 #Vue.js
You might like
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
php 日期时间处理函数小结
2009/12/18 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
如何利用Python模拟GitHub登录详解
2019/07/15 Python
学python需要去培训机构吗
2020/07/01 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
房地产财务管理制度
2014/02/02 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
财务简历的自我评价
2014/03/05 职场文书
高三霸气励志标语
2014/06/24 职场文书
文案策划岗位职责
2015/02/11 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers