vue次日

此次用vue作的是百度下拉菜單，知識總結
一、事件:事件都是經過v-on:綁定，簡寫就是@
二、屬性:都是經過v-bind:綁定，除了style和class，簡寫就是用冒號 ：，class和style有點不一樣:說白了就是class裏面能夠扔數組也能夠扔json
三、阻止冒泡: @click.stop＝"show()"
四、阻止默認行爲:@contextmenu.prevent contextmenu也是一個事件：右擊菜單
五、鍵盤事件
@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

一、此次用的是百度的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("取數據失敗");
               })

二、經過鍵盤事件給當前li添加類讓當前行高亮，這裏面也是經過設定一個變量，讓noIndex自增自減，添加orange類的條件是當前下標＝當前變量

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

三、讓高亮行的數據顯示在input裏面

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

寫在new Vue裏面的變量都須要在用的時候加this，寫在結構的直接寫變量

四、由於在點擊上下鍵跳動的時候不用在獲取數據，因此在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>