vue第二天

这次用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='';
                }

结构：

<div id="box">
    <input type="text" v-model="tvalue" @keyup="get($event)" @keydown.down="downs()" @keydown.up.prevent="ups()">
    <ul>
        <li v-for="item in mydata" :class={orange:$index==noIndex} >
            {{item}}
        </li>
    </ul>
    <p v-show="mydata.length==0">暂时无数据。。。</p>
</div>
            

凡是用到交互，都得引入<script src="js/vue-resource.js"></script>

**该写vue中vm了**    

<script>

window.onload=function () {
    var vm=new Vue({
        el:'#box',
        data:{
            mydata:[],
            tvalue:'',
            noIndex:'-1'
        },
        methods:{
            get:function (ev) {
                if(ev.keyCode==38||ev.keyCode==40)return;
                if(ev.keyCode==13){
                    window.open('https://www.baidu.com/s?wd='+this.tvalue);
                    this.tvalue='';
                }
               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("取数据失败");
               })
            },
            downs:function () {
                this.noIndex++;
                if(this.noIndex==this.mydata.length){this.noIndex=-0}
                this.tvalue=this.mydata[this.noIndex];
            },
            ups:function () {
                this.noIndex--;
                if(this.noIndex==-1){this.noIndex=this.mydata.length-1}
                this.tvalue=this.mydata[this.noIndex];
            }
        }
    })
}

</script>