vue第二天

rollback 发布于2019-08-30 15:52 / 1030人阅读

这次用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方式获取一个普通文本数据:

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

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

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

post方式:

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

jsonp方式:

        

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

如图：

分析：

原理：

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

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

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

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

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

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

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

this.tvalue=this.mydata[this.noIndex];

写在new Vue里面的变量都需要在用的时候加this，写在结构的直接写变量

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

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

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

结构：


    
    
        
            {{item}}
        
    
    暂时无数据。。。

凡是用到交互，都得引入

**该写vue中vm了**

混合云云服务器第二天二天 Vue_Vue Vue

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

转载请注明本文地址：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 2019-08-20 14:37 评论0 收藏0
公司倒闭 1 年了，而我当年的项目上了 GitHub 热榜

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

Travis 2019-08-16 18:31 评论0 收藏0
学校 -> 实习 -> 毕业，前端——我一直在路上

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

CoyPan 2019-08-23 11:26 评论0 收藏0
学校 -> 实习 -> 毕业，前端——我一直在路上

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

Baaaan 2019-08-05 14:47 评论0 收藏0
用vuepress搭建一个够自己用的博客

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

Forelax 2019-05-27 17:43 评论0 收藏0