vue初學總結 一 基礎語法

2021-09-23 01:38:54 字數 880 閱讀 2847

vue學習總結:

引入vue:

}: 插值表示式,簡單理解用來獲取vue中定義的屬性值並渲染,可以接受乙個js表示式,但是必須有結果返回

}: 當網速較慢時,會產生插值閃爍,所以可以使用v-text和v-html來代替

v-text: 將所有資料當做字串輸出 ** 當沒有資料時,會顯示空白

v-html: 如果要輸出的資料中含有html**,會直接渲染 ** 當沒有資料時,會顯示空白

v-model: 雙向繫結,檢視中的操作會影響vue中的屬性,vue中的屬性也會影響檢視的渲染

vue應用都是從建立vue物件開始

// 物件中接受各種引數,方法

// 你要操作的元素節點

el:"元素的id",

// vue例項建立的時候,會獲取data中定義的所有屬性來渲染頁面

// 並且會見識屬性的變化,當屬性變化時,會同步渲染頁面中的屬性

// 需要注意,如果乙個屬性沒有在vue初始化的時候定義,那麼該變數的改變並不會渲染在頁面上

data: ,

// vue中自定義的方法都會在methods物件中

methods:

} // 鉤子函式: 在vue的各個生命週期中呼叫的方法

// 初始化方法

beforecreated: function(),

// 建立物件後呼叫,一般使用這個方法

created: function()

// 頁面渲染完成後要執行的方法

mounted: function()

// 銷毀例項前呼叫

beforedestroy: function()

});

Vue的基礎語法(一)

v once h2 v html url h2 data 123h2 v text message 123h2 h2 v pre h2 v cloak h2 v cloak style 動態繫結class 物件語法 class h2 class getactive h2 methods 動態繫結cl...

Vue模版基礎語法 Vue筆記 一

在vue模版中資料寫在 內,可以與vue例項data中的資料實現單向繫結,資料改變檢視改變 可為以下型別 1 js 資料 2 表示式輸出表示式執行結果 3 三元運算子運算結果 4 data中的key的vlaue 5 methods中函式執行的return返回值 data vue例項下的物件,valu...

Vue基礎語法

指令 1.1 資料繫結指令 v pre 填充原始資訊 1.顯示原始資訊跳過編譯過程 v once 只編譯一次 應用場景 顯示的資訊後續不需要修改。1.2 雙向資料繫結type text v model username 1.3 事件繫結type button v on click num type ...