指令是什么？

1.簡單來說：

    指令: 擴展html標簽功能,屬性。

    v-model 一般表單元素(input) 雙向數據綁定

循環:

    v-for="name in arr"

        {{$index}}

    v-for="name in json"

    {{$index}} {{$key}}

    v-for="(k,v) in json"

事件:

    v-on:click="函數"

    v-on:click/mouseout/mouseover/dblclick/mousedown.....（事件方法名稱）

    new Vue({

        el:'#box',

        data:{ //數據

        arr:['apple','banana','orange','pear'],

        json:{a:'apple',b:'banana',c:'orange'}

    },

    methods:{

        show:function(){ //方法

        alert(1);

        }

    }

});

顯示隱藏:

    v-show=“true/false”

事件簡寫:

    之前：v-on:click="函數"

    現在：@click="" 推薦

事件對象:

    @click="show\($event\)"

事件冒泡:

阻止冒泡:

    a\).  ev.cancelBubble=true;

    b\).  @click.stop 推薦

鍵盤:

    @keydown  $event  ev.keyCode

    @keyup

常用鍵:

回車

    a). @keyup.13

    b). @keyup.enter

上、下、左、右

    @keyup/keydown.left

    @keyup/keydown.right

    @keyup/keydown.up

    @keyup/keydown.down

    .....

屬性:

    v-bind:src=""

    width/height/title....

屬性簡寫:

    :src="" 推薦

    ![]({{url}})    效果能出來，但是會報一個404錯誤

    ![](url)    效果可以出來，不會發404請求

class和style:

    :class=""   v-bind:class=""

    :style=""   v-bind:style=""

    :class="[red]" red是數據

    :class="[red,b,c,d]"

    :class="{red:a, blue:false}"

    :class="json"

    data:{

        json:{red:a, blue:false}

    }

style:

    :style="[c]"

    :style="[c,d]"

    注意: 復合樣式，采用駝峰命名法

    :style="json"

模板:

    {{msg}} 數據更新模板變化

    {{*msg}} 數據只綁定一次

    {{{msg}}} HTML轉意輸出

過濾器:-> 過濾模板數據

    系統提供一些過濾器:

            {{msg| filterA}}

            {{msg| filterA | filterB}}

            uppercase eg: {{'welcome'| uppercase}}

            lowercase

            capitalize

            currency 錢

            {{msg| filterA 參數}}

            ....

交互:

    $http （ajax）

    如果vue想做交互

    引入: vue-resouce

get:

獲取一個普通文本數據:

    this.$http.get('aa.txt').then(function(res){

            alert(res.data);

    },function(res){

            alert(res.status);

    });

給服務發送數據:√

    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

    }).then(function(res){

        alert(res.data);

    },function(res){

        alert(res.status);

    });

jsonp:

https://sug.so.360.cn/suggest?callback=suggest_so&word=a(https://sug.so.360.cn/suggest?callback=suggest_so&word=a)

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

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{(https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',%7B)

        wd:'a'

},{

        jsonp:'cb' //callback名字，默認名字就是"callback"

}).then(function(res){

        alert(res.data.s);

},function(res){

        alert(res.status);

});