vue使用總結

一、vue中能提供資料的有：

1、data屬性，如：data:中的message；

2、props中的元素，如props: ['title']中的title；

3、v-for中遍歷出的元素，如v-for="todo in todos"中的todo；

注意：data和props中的資料在methods和computed中被引用時前面必須新增「this.」,在標籤中不需要；同樣的，在標籤中使用methods和computed中的方法時也不需要新增"this.";

4、插槽slot：

二、根例項向子元件傳遞資料的方式：

1、props：

2、slot：

三、子元件向根例項傳遞資料的方式：

子元件的通過$emit('event_name', component_value)傳遞；

根例項中通過乙個方法接收：function(data)；

四、vue的methods和computed中的方法在}和指令中其後面不新增「()」表示引用；

五、v-for可以迴圈元件；

六、"}"和"v-html"輸出data資料的相同和區別：

相同：data資料屬性直接寫入即可（htm標籤屬性如果想繫結data資料需在標籤的屬性前新增「v-bind」）;

區別：如果data資料報含html標籤，"v-html"可以將html標籤解析，"}"形式不行；

七、data資料的輸出位置：

1、標籤中用「}」輸出；

2、標籤屬性中用「v-bind:」輸出；

3、標籤中直接用「v-html」輸出；

4、標籤中用「v-for」迴圈輸出；

八、methods、computed、watch：

methods：一般的方法；

computed：對於任何複雜邏輯，你都應當使用計算屬性；

watch：當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的；

九、v-for 與 v-if：

當它們處於同一節點，v-for 的優先順序比 v-if 更高，這意味著 v-if 將分別重複執行於每個 v-for 迴圈中。當你想為僅有的一些項渲染節點時，這種優先順序的機制會十分有用。

而如果你的目的是有條件地跳過迴圈的執行，那麼可以將 v-if 置於外層元素 (或 )上。

十：元件:

元件是可復用的 vue 例項，且帶有乙個名字。我們可以在乙個通過 new vue 建立的 vue 根例項中，把這個元件作為自定義元素來使用。

因為元件是可復用的 vue 例項，所以它們與 new vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根例項特有的選項。

全域性註冊的元件可以用在其被註冊之後的任何 (通過 new vue) 新建立的 vue 根例項，也包括其元件樹中的所有子元件的模板中。

$emit：向父級元件觸發乙個事件；

通過事件向父級元件傳送訊息的兩種方式：

十一、v-bind 的基本用途是動態更新 html 元素上的屬性；

十二、函式內的this指向的是當前vue例項本身；

十三、語法糖是指在不影響功能的情況下，新增某種方法實現同樣的效果，從而方便程式開發。vue.js的v-bind和v-on指令都提供了語法糖，也可以說是縮寫，比如v-bind，可以省略v-bind,直接寫乙個冒號「:」，v-on可以直接用「@」來縮寫。使用語法糖可以簡化**的書寫。