1.{{message}}輸出data數據中的message。

2.v-for="todo in todos"輸出data數據中的dotos數組

3.v-on:click="aaaa"綁定methods中的aaaa()事件，[email protected]

4.v-model="input" 輸出data數據中input的值，雙向綁定。

5.this.$dispatch("aaa", this.msg)向上派發事件，aaa寫在events中

6.:id="branch"表示id的值由data數據中的branch決定，通常用於for循環
<template v-for="branch in branches">
　　<!--:為傳入的branch值-->
　　<input type="radio" name="branch" :id="branch" :value="branch" v-model="currentBranch"><label :for="branch">{{branch}}</label>
</template>

7.:class="{bold: isFolder}"或:class="{isFolder1 > 0 ? ‘aaa1‘ : ‘bbb1‘ }"表示當isFolder為true時class=bold。

8.v-show="open"表示當open為true時顯示

9.v-if="isFolder"表示當isFolder為true時顯示

10.v-show與v-if的區別為當元素不顯示時，v-show可以將data中的open設置為false，實現雙向數據綁定

11.子組件獲取數據的方式

例：在父級中設置<item class="item" :model="treeData"></item>
子級中使用
Vue.compoent("item", {
props: [‘model‘]
...
})
的方式獲取

12.created：生命周期，DOM還未形成之前

13.computed：生命周期，在例如:class="{bold: isFolder}中的isFolder是true還是false的時候執行

14.在子級下的數據data的寫法為

data：function() {
    return {
        open: false
    }
}

以上的return值表示open的獲取，不表示將open返回到父級，與雙向綁定無關.

var Person = Vue.extend({
    template: "<div><span>name: </span>{{name}}<span>age: </span>{{age}}</div>",
    data: function() {
        return {
            name: "lili",
            age: 22
        }
    }
});

15.{{key | filter}}表示key通過filters中的filter()函數進行過濾

16.v-for="entry in data | filterBy filterKey"表示在循環中直接進行數據過濾

16.debounce="300"表示延遲執行300ms

17.v-html相當於
<div v-html="html"></div>
<!-- 相同 -->
<div>{{{html}}}</div>
即可以輸出html的標簽，在表單提交的時候不使用，防止xss攻擊

18.watch表示監聽
watch: {
currentBranch: ‘fetchData‘
}
當打他數據中的currentBranch發生改變時，執行fetchData函數

19.slot的使用

<div class="modal-header">
    <slot name="header">
        default header
    </slot>
</div>

<div class="modal-body">
    <slot name="body">
        default body
    </slot>
</div>
<h3 slot="header">custom header</h3>

slot會將defaut中的default header變為custom header。

20.sync實現雙向數據綁定，將父級通過props傳入到子級中的變量通過子級進行修改，雙向綁定後會改變父級中的對應傳到子級的那個變量

21.transition添加css屬性實現動態效果
例一個class="expand"的屬性

.expand-transition {
    transition: all .3s ease;
    height: 30px;
    padding: 10px;
    background-color: #eee;
    overflow: hidden;
}//表示正常情況下的效果
.expand-enter, .expand-leave {
    height: 0;
    padding: 0 10px;
    opacity: 0;
}//元素在消失或顯示的時候展示的效果
<div transition="expand"></div>直接寫在html標簽中
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
    el: ‘...‘,
    data: {
        show: false,
        transitionName: ‘expand‘
    }
})
//寫在Vue裏

寫在Vue裏
22.

   var data = {a: 1};
    var vm = new Vue({
        el: ‘#app‘,
        data: data
    })
    console.log(vm.a === data.a);//true
    vm.a = 2;
    console.log(data.a);//2
    data.a = 3;
    console.log(vm.a);//3

23.v-for循環輸出，點擊事件可以通過設置參數獲取位置
例:<button v-on:click="removeTodo($index)">X</button>
23.子級下的子級添加組件的方式
例：

    var Person = Vue.extend({});
    var Contact = Vue.extend({
        template: "<person></person>",
        components: {
            ‘person‘: Person
        }
    })

24.項目實例：https://github.com/PLDaily/vuejs-project

vue.js的基本操作