资讯专栏INFORMATION COLUMN

vue第二天

rollback / 1226人阅读

</>复制代码

  1. 这次用vue做的是百度下拉菜单,知识总结
    1、事件:事件都是通过v-on:绑定,简写就是@
    2、属性:都是通过v-bind:绑定,除了style和class,简写就是用冒号 ,class和style有点不同:说白了就是class里面可以扔数组也可以扔json
    3、阻止冒泡: @click.stop="show()"
    4、阻止默认行为:@contextmenu.prevent contextmenu也是一个事件:右击菜单
    5、键盘事件
    @keydown $event ev.keyCode
    @keyup/keydown.left
    @keyup/keydown.right
    @keyup/keydown.up
    @keyup/keydown.down

分别将get、post、jsonp三种方式简单雏形写下来参考:

get方式获取一个普通文本数据:

</>复制代码

  1. this.$http.get("aa.txt").then(function(res){
  2. alert(res.data);
  3. },function(res){
  4. alert(res.status);
  5. });

get方式给服务发送数据:√

</>复制代码

  1. this.$http.get("get.php",{
  2. a:1,
  3. b:2
  4. }).then(function(res){
  5. alert(res.data);
  6. },function(res){
  7. alert(res.status);
  8. });

post方式:

</>复制代码

  1. this.$http.post("post.php",{
  2. a:1,
  3. b:20
  4. },{
  5. emulateJSON:true//需要加上这段数据才能把json数据加载上去
  6. }).then(function(res){
  7. alert(res.data);
  8. },function(res){
  9. alert(res.status);
  10. });

jsonp方式:

</>复制代码

  1. this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
  2. wd:"a"
  3. },{
  4. jsonp:"cb" //callback名字,默认名字就是"callback"
  5. }).then(function(res){
  6. alert(res.data.s);
  7. },function(res){
  8. alert(res.status);
  9. });

如图:

分析:

原理:

</>复制代码

  1. 通过input里面的tvalue值传到jsonp里面查数据,查完数据通过回调函数存在mydata里面,mydata通过循环遍历显示在页面上

</>复制代码

  1. https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

1、这次用的是百度的js文件链接 如果jsonp传的不是callback就还需要声明一下,如:jsonp:"cb"
在输入框中输入数据通过get方法获取文件找到要查询的数据如下,this.tvalue就是输入框中的数据,取到数据成功返回第一个function,并将数据存在数组中。

</>复制代码

  1. this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
  2. {
  3. wd:this.tvalue
  4. },{
  5. jsonp:"cb"
  6. }).then(function (res) {
  7. this.mydata=res.data.s;
  8. },function (res) {
  9. alert("取数据失败");
  10. })

2、通过键盘事件给当前li添加类让当前行高亮,这里面也是通过设定一个变量,让noIndex自增自减,添加orange类的条件是当前下标=当前变量

</>复制代码

  1. :class={orange:$index==noIndex}

3、让高亮行的数据显示在input里面

</>复制代码

  1. this.tvalue=this.mydata[this.noIndex];
  2. 写在new Vue里面的变量都需要在用的时候加this,写在结构的直接写变量

4、因为在点击上下键跳动的时候不用在获取数据,所以在get()中将上键38下键40(数字是所在键的e.keyCode的值)判断一下,如果是就return,点击enter-keyCode=13,让它直接搜索到当前内容,搜索百度的地址是这样的

</>复制代码

  1. https://www.baidu.com/s?wd=

</>复制代码

  1. if(ev.keyCode==38||ev.keyCode==40)return;
  2. if(ev.keyCode==13){
  3. window.open("https://www.baidu.com/s?wd="+this.tvalue);
  4. this.tvalue="";
  5. }

结构:

</>复制代码

    • {{item}}
  1. 暂时无数据。。。

</>复制代码

  1. 凡是用到交互,都得引入

</>复制代码

  1. **该写vue中vm了**

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116532.html

相关文章

  • vue二天

    这次用vue做的是百度下拉菜单,知识总结 1、事件:事件都是通过v-on:绑定,简写就是@2、属性:都是通过v-bind:绑定,除了style和class,简写就是用冒号 :,class和style有点不同:说白了就是class里面可以扔数组也可以扔json 3、阻止冒泡: @click.stop=show() 4、阻止默认行为:@contextmenu.prevent contextm...

    Harriet666 评论0 收藏0
  • 公司倒闭 1 年了,而我当年的项目上了 GitHub 热榜

    摘要:公司倒闭年多了,而我在公司倒闭时候做的开源项目,最近却上了,看着这个数据,真是不胜唏嘘。缘起年月份的时候,松哥所在的公司因为经营不善要关门了,关门的是深圳分公司,北京总部还在正常运转。 公司倒闭 1 年多了,而我在公司倒闭时候做的开源项目,最近却上了 GitHub Trending,看着这个数据,真是不胜唏嘘。 缘起 2017 年 11 月份的时候,松哥所在的公司因为经营不善要关门了...

    Travis 评论0 收藏0
  • 学校 -> 实习 -> 毕业,前端——我一直在路上

    摘要:职业生涯,离开校门自己的第一份工作,每天上下班都骑自行车,下雨也是,只为省点车费。,属于外包行业。虽然互联网行业加班是正常的。至今,面试流程技术复试,心中暗喜。但是,我毫无畏惧。 学校 -> 实习 -> 毕业,前端——我一直在路上 就要毕业了,从学校到实习直至毕业,一路走来,酸甜苦辣,记录这段时间的点滴,以后在回味肯定另有一番风情! 感悟 2017/5-2018-7是非常特别的时光,见...

    CoyPan 评论0 收藏0
  • vuepress搭建一个够自己用的博客

    原文博客 闲扯 很久以前,自己拥有一个用hexo搭建的静态博客网站:ox:,记得当时为了把它搞出来,废了不少劲:anger:,然后后来又断断续续更改过一些配置和样式,但是因为感觉各种麻烦,所以就放在github上积累和很多的尘土:cupid:,到现在也懒得在打扫了(其实是好久不用,有点忘了怎么用了:-1::poop:),前段时间在百度统计上看了看那个静态网站的访问人数,发现已经很久很久没人访问过了...

    Forelax 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<