1.{{message}}輸出data數據中的message。
2.v-for="todo in todos"輸出data數據中的dotos數組
3.v-on:click="aaaa"綁定methods中的aaaa()事件，可以簡寫為@click
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
}
})