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与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vuex的使用步骤
Jan 06 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
ant design vue的form表单取值方法
Jun 01 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调用Oracle存储过程
2006/10/09 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
HTML的select控件美化
2017/03/27 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
小程序云开发实战小结
2018/10/25 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
实习生辞职信范文
2015/03/02 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS