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 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
详解Vue的options
May 15 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
Vue波纹按钮组件制作
2018/04/30 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
django使用多个数据库的方法实例
2021/03/04 Python
心理学专业毕业生推荐信范文
2013/11/21 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
TensorFlow的自动求导原理分析
2021/05/26 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js