首頁 > web前端 > js教程 > vue重點知識總結

vue重點知識總結

巴扎黑
發布: 2017-07-21 17:13:44
原創
1881 人瀏覽過

Vue實例

每個Vue 實例都會代理其data 物件裡所有的屬性:vm.a===data.a //true

注意只有這些被代理的屬性是回應的

如果在實例建立之後新增新的屬性到實例上,它不會觸發視圖更新。

除了 data 屬性, Vue 實例揭露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $,以便與代理的 data 屬性區分。

模板語法

vue重點知識總結
使用v-html裡的{{}}綁定會變成下面的樣子,不會編譯,直接當做字串:
vue重點知識總結

資料綁定使用js表達式
vue重點知識總結

過濾器
vue重點知識總結

computed

Computed vs Methods

計算屬性是基於它們的依賴進行快取的。 計算屬性只有在它的相關依賴改變時才會重新求值。這就意味著只要 message 還沒有改變,多次存取 reversedMessage 計算屬性會立即傳回先前的計算結果,而不必再執行函數。
vue重點知識總結

Computed vs Watched

設定setter

vue重點知識總結
#直接使用fullname就是呼叫getter,給fullname賦值時呼叫的是setter

watch選項
當你想要在資料變化回應時,執行非同步操作或開銷較大的操作,這是很有用的。

在官方的範例中,使用 watch 選項允許我們執行非同步操作(存取一個 API),限制我們執行該操作的頻率,並在我們得到最終結果之前,設定中間狀態。
這是計算屬性無法做到的。

動態綁定class和style以及使用元件時如何添加動態class

#自動添加前綴

當v-bind:style使用需要特定前綴的CSS 屬性時,如transform ,Vue.js 會自動偵測並加入對應的前綴。

vue重點知識總結

條件渲染

vue重點知識總結
#v-else 元素或v-else-if元素必須緊接在v-if或v-else-if 元素的後面——否則它將不會被識別。

用 key 管理可重複使用的元素
Vue 會盡可能有效率地渲染元素,通常會重複使用已有元素而不是從頭開始渲染。

v-show
不同的是帶有 v-show 的元素總是會被渲染並保留在 DOM 中。 v-show 是簡單地切換元素的 CSS 屬性 display 。

注意, v-show 不支援

以上是vue重點知識總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板