Vue实例——百度搜索案例

最新推荐文章于 2024-07-30 11:41:48 发布
最新推荐文章于 2024-07-30 11:41:48 发布
阅读量7.8k 收藏 25
点赞数 4
分类专栏： Vue学习之路 文章标签： Vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwh1010714845/article/details/79465632
版权
本文通过一个Vue实例展示了如何使用Vue.js实现百度搜索功能。讲解了百度搜索的数据传递流程，利用vue-resource进行跨域请求，以及Vue的双向数据绑定和动态渲染来显示搜索建议。文章还提到了Vue在项目中的作用，以及Vue+Node+MongoDB在开发中的应用趋势。
摘要由CSDN通过智能技术生成

Vue实例——百度搜索案例

vue作为前端开发的渐进式框架，不仅比jQuery更加简洁，而且功能更为强大。接下来我将用vue.js给大家介绍一个运用搜索框实现百度搜索的功能。

开始之前我需要讲解一下百度搜索的数据传递流程

  • 首先我们进百度搜索网站，然后输入关键词 “湖北理工”（博主上的渣渣大学……），然后我们观察网络请求，可以看到下面几个画面。
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

大家有没有发现什么重点。当我们从输入框输出关键字的时候，我们能够看到这样一个url，

最低0.47元/天 解锁文章
只是当时已惘然丶
关注
专栏目录
vue综合实例——音乐播放器（悦听player）
weixin_43370373的博客
07-05 1398
1.歌曲搜索 2.歌曲播放 3.歌曲封面 4.歌曲评论 5.播放动画 6.mv播放 歌曲搜索 1.按下回车(v-on,enter) 2.查询数据(axios接口v-model) 3.渲染数据(v-for 数组 that) 服务器返回的数据比较复杂时，获取的时候需要注意层级结构 通过审查元素快速定位到需要操纵的元素 歌曲播放 1.点击播放(v-on 自定义参数) 2.歌曲地址获取(接口 歌曲id) 3.歌曲地址设置(v-bind) 歌曲id依赖歌曲搜索的结果，对于不用的数据也需要.
vue实现百度搜索功能
12-30
本文实例为大家分享了vue实现百度搜索功能的具体代码，供大家参考，具体内容如下 最终效果： Baidusearch.vue所有代码： <template> <div> <div class=container id=app> <div class=page-header> <h2 xss=removed>百度搜索案例</h2> </div> <form action=> <div xss=removed> <input v-model=wd @keyup=keyup($ev
黑马头条vue2.0项目实战（三）——个人中心功能的实现
最新发布
weixin_56370772的博客
07-30 1027
通过分析页面，可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。
vue 模拟百度搜索
小羽向前跑
02-11 999
最终效果： Baidusearch.vue所有代码： &lt;template&gt; &lt;div&gt; &lt;div class="container" id="app"&gt; &lt;div class="page-header"&gt; &lt;h2 class=" text-cente
vue中的百度搜索案列
weixin_54274691的博客
02-22 237
百度搜索的案例 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>D...
Vue百度搜索小DEMO
Sugar_wzy的博客
05-16 484
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度下拉菜单&lt;/title&gt; &lt;style&gt; .gray{ backgr
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
02-09
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
Vue购物车——组件化.rar
05-01
之后，我们可以在任何Vue实例的模板中使用`<my-cart>`标签，Vue会自动处理该组件的渲染和事件处理。 接下来是**Vue组件的局部注册**。局部注册的组件只在其父组件的范围内可用。在父组件的选项对象中定义`...
vue系列 —— vue-route详细使用方法
热门推荐
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
Vue 仿百度搜索功能实现代码
12-12
无上下选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-
基于Vue.js 2.0实现百度搜索框效果
01-19
使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content=width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0> <title>Vue模拟百度搜索</title> <style type=text/css> body, html{ padding: 0; m
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）
10-15
主要介绍了vue搜索页开发实例（热门搜索，历史搜索，淘宝接口演示）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue 数组添加元素_用vue.js做一个列表，类似于百度的搜索排名，用v-for来循环
weixin_39813009的博客
11-20 317
先看效果吧，如下图，用vue来实现，比较简单。更多文章请关注我的头条号，我是落笔承冰一、加入vue.js链接库，添加一个父组件，一个全局子组件。二、这个时候网页一定是空的，所以我们在子组件添加模板吧，然后在vmd中调用。三、我们把三行li变成一行，引入数组来显示，以后我往数组加多少就有多少行了，当然在vue中是用v-for来实行循环的。四、调一下样式，去掉各项前的小圆点。五、再进行一步修改 ，让这...
html 仿百度搜索,Vue仿百度搜索功能
weixin_28858229的博客
06-08 167
简述学习vue的第二节，由于2.0版本并不向下兼容，视频中的不少内不能实现。下面列出一些主要知识点// v-on 可简写为@// 事件冒泡是指当点击div内部的button触发show1()时，必然会冒泡到div上执行show2()，这才层级div中很常见// 阻止冒泡，原生js法，设置事件对象的cancelBubble属性为true// vue方法@click.stop// 阻止默认行为，原生j...
vue生命周期与侦听器，vue实现购物车和百度搜索（附源码）
爱敲代码的狼仔
10-20 343
vue生命周期与侦听器 动态样式 基于vue和js语法来研究一下动态处理样式的方式 动态的class 基本模式 <div id="app"> <div :class="isShow?'show':'hidden'"> 嘿嘿嘿 </div> <p @click="isShow = !isShow">切换</p> <p @click="ch...
vue 模糊查询 搜索 热搜
weixin_47384925的博客
09-09 352
脚手架上创建模糊查询 <input type="text" placeholder="搜索" v-model="softwareValue" /> 创建一个input标签 computed：{ //在计算属性中创建一个属性 xfeiData 作为展示数据的数组 xfeiData: function () { //为input框中输入的数据 this.SoftwareSearchResults是接收后端的数据 if (!this.software..
案例 -- web移动端项目（vue）
tby_pr的博客
11-03 4070
开发流程 选择手动模式 安装vue扩展 一路回车就行 路由模式 每个配置都用单文件设置 vant组件库 网址： Vant - Mobile UI Components built on Vue 安装vant库 npm i vant -S 自动按需引入组件(推荐) npm i babel-plugin-import -D 在项目根目录下面有一个babel.config.js文件，在此文件中进行如下操作 修改babel.config.js文件后，一定要重...
vue-router应用——用户登录注册案例
05-24
好的，下面我来为您介绍一下如何使用vue-router实现用户登录注册功能。 首先，我们需要安装vue-router，可以通过以下命令进行安装： ``` npm install vue-router --save ``` 然后，在main.js中引入并使用vue-router： ``` import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，我们新建一个router.js文件，用于配置路由。在该文件中，我们需要定义路由路径和路由组件： ``` import Vue from 'vue' import VueRouter from 'vue-router' import Login from './components/Login.vue' import Register from './components/Register.vue' Vue.use(VueRouter) const routes = [ { path: '/login', component: Login }, { path: '/register', component: Register } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中，我们定义了两个路由路径：/login和/register，并分别对应了Login和Register两个组件。 接下来，在App.vue中，我们需要使用<router-view>标签来显示路由组件： ``` <template> <div id="app"> <router-view></router-view> </div> </template> ``` 最后，在main.js中引入router.js，并将其挂载到Vue实例中： ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') ``` 至此，我们已经完成了基本的路由配置。接下来，我们可以在Login和Register组件中实现具体的登录和注册功能。 在Login组件中，我们可以使用Vue.js提供的v-model指令来绑定表单输入的数据，并在点击登录按钮时向服务器发送请求验证用户名和密码： ``` <template> <div class="login"> <h1>登录</h1> <form> <label>用户名：</label> <input type="text" v-model="username"> <br> <label>密码：</label> <input type="password" v-model="password"> <br> <button @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 向服务器发送请求验证用户名和密码 } } } </script> ``` 而在Register组件中，我们可以使用v-model指令来绑定表单输入的数据，并在点击注册按钮时向服务器发送请求创建新用户： ``` <template> <div class="register"> <h1>注册</h1> <form> <label>用户名：</label> <input type="text" v-model="username"> <br> <label>密码：</label> <input type="password" v-model="password"> <br> <label>确认密码：</label> <input type="password" v-model="confirmPassword"> <br> <button @click.prevent="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '', confirmPassword: '' } }, methods: { register() { // 向服务器发送请求创建新用户 } } } </script> ``` 到这里，我们已经完成了一个简单的用户登录注册功能，并使用vue-router实现了路由跳转。当用户访问/login时，会显示Login组件；当用户访问/register时，会显示Register组件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值