前端知識總結之Vue篇

1. vue有哪些特性?

• 雙向數據綁定
• 組件化開發
• 數據驅動視圖-修改數據-視圖修改 不須要操做dom
• 使用MVVM開發思想

2. 雙向數據綁定原理

• Vue實現雙向數據綁定的原理就是利用了Object.defineProperty()這個方法從新定義了對象獲取屬性值(get)和設置屬性值(set)的操做來實現的.

3. vue選項

• el: 指定管理的視圖區域,指定方式-->經過選擇器或者dom對象,不能指定html/body標籤做爲視圖

• data: 指定vm實例中的響應式數據,數據使用時必須提早在data中申明

• methods: 定義函數,提供給vm實例去使用,fn(){}推薦寫法,不推薦使用箭頭函數,函數中的this就是vm實例

• 在vm實例中,想要獲取data上的數據,或者向調用methods中的方法,必須通過this.屬性名 或者this.方法名來進行訪問,this就是new出來的vm實例對象

4. vue經常使用的指令

• v-text/v-html
  • 以上兩個指令都是替換元素內容,text是純文本輸出,html是格式內容的輸出,v-html容易形成危險(XSS跨站腳本攻擊)
• v-on
  • 綁定事件,語法:v-on:事件名.事件修飾符="fn()",v-on可簡寫爲@,若是須要使用事件對象,固定的寫法爲@event
  • 事件修飾符:
    • prevent (阻止默認事件),
    • once(事件只觸發一次),
    • stop(阻止冒泡),
    • capture(實現捕獲觸發事件的機制),
    • self(實現只有點擊當前元素的時候,纔會觸發事件處理函數)
• v-for
  • 遍歷數組和對象,在每一項數據追加一個屬性:key="惟一標識",若是有ID使用ID,沒有使用索引i
  • 數組語法 v-for=(item,i) in list
  • 對象語法 v-for=(v, k, i) in obj
• v-if/v-show
  • 切換元素的顯示和隱藏
  • 區別: v-show是切換元素的display: none CSS屬性,v-if是移除或者添加
  • 應用場景: v-if一次渲染的時候時使用,v-show頻繁切換時使用
• v-model
  • 提供給表單元素進行數據雙向綁定
  • 這是一個語法糖,原理經過v-bind綁定的input屬性,監聽input事件觸發時,獲取input的值再去修改data中的數據
• v-bind
  • 給任何屬性綁定動態數據,可簡寫爲 :
• v-bind之綁定class
  • 語法:class="數據",數據能夠是數組,也能夠是對象
  • 數組格式: ['類名','類名']添加 加一項,移除 去除這一項
  • 對象格式: {'類名':'布爾值'}false 表示移除,true表示添加
• v-bind之綁定style
  • 語法:style="數據",數據能夠是數組,也能夠是對象
  • 數組格式:[{css屬性的鍵值對},{css屬性的鍵值對}]
  • 對象格式:{css屬性:css屬性的值,...}
• v-cloak
  • 在視圖未渲染以前隱藏插值表達式區域,當視圖渲染完畢vue會去除v-cloak屬性,視圖顯示(在使用vue綁定數據的時候,渲染頁面時會出現變量閃爍問題,用v-cloak解決)
  • 設置css樣式: [v-cloak]{display: none}
• v-once
  • 使用該指令的元素只會渲染一次

5. v-on能夠監聽多個方法麼?

• 能夠監聽多個方法,可是同一種事件類型的方法,只能夠監聽一次,不然會報錯

6.Vue組件中的data爲何必須是函數?

• 由於一個組件是能夠共享的,但他們的data是私有的,因此每一個組件都要return一個新的data對象,返回惟一的對象,不要和其餘組件共用一個對象.