天天看點

【Vue】01 基礎文法

效果:

一個由Vue類建立的執行個體,el屬性綁定對應元素id或者選擇器,

data對象裡的屬性可以以鍵的辨別進行擷取和渲染

我們可以在浏覽器的控制台中改變message的值,來改變渲染

【Vue】01 基礎文法

用一個輸入框标簽,對value屬性設定message的值來渲染

【Vue】01 基礎文法

結論:一定情況下,{{field}} & v-bind 都可以渲染

單個IF-ELSE:

【Vue】01 基礎文法

設定為True時:

【Vue】01 基礎文法

多分支判斷:

【Vue】01 基礎文法

周遊指令:

items是周遊的數組名稱,item即數組的每一個元素

【Vue】01 基礎文法

 使用on指令用以對設定的标簽元素監聽事件:

對這個标簽使用v-on綁定事件和對應的js函數即可,要注意的是vue所采用的是jq命名的事件

【Vue】01 基礎文法

可以通過this來調取這個函數所屬的對象的屬性:

【Vue】01 基礎文法

使用v-model對标簽元素的value值來處理

示範案例:

【Vue】01 基礎文法

對下拉清單的一些操作:

【Vue】01 基礎文法
【Vue】01 基礎文法

普通文本和v-text無差別,但是支援将html标簽轉義處理

【Vue】01 基礎文法

一般寫法:

簡寫文法:

注意,執行的函數隻能在Vue對象内的methods屬性對象中聲明

【Vue】01 基礎文法

輕按兩下事件使用dblclick

如果函數需要注入參數,指令綁定的時候可以這樣:

如果是鍵盤輸入的事件綁定,事件需要具體引用到某一個鍵入或者組合鍵入

官方文檔詳細:

為0時不可以減少

【Vue】01 基礎文法

為10時不可以再加

【Vue】01 基礎文法
【Vue】01 基礎文法

或者直接使用取反指派實作切換

繼續閱讀