vue.js的基本操作,入門足以__js

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        }    })