Vue基礎之資料繫結

2021-09-12 22:19:25 字數 969 閱讀 5983

我們學習一門新語言或者框架時,第一件事是什麼呢,那必然是向世界say hello。

建立乙個vue應用

話不多說,先上**,讓我們感受一下vue的核心功能

data: 

})

當修改輸入框內容時,h1標籤內容也做相應改變,雖然**很簡單,還是能體會到雙向繫結的精髓。

雙向繫結(面試考點)

傳入el,el是vue物件中必不可少的,需要把el掛載到頁面已存在的dom(可以是dom元素,或者是css選擇器)上;

}) 在input標籤上有乙個v-model指令,它的值和vue例項中data裡的message對應,input可以修改message的值,同時當message改變時也可以體現在檢視上;

生命週期(開發時必了解)

每個vue例項在被建立之前都要經過一系列的初始化過程,這個過程就vue的生命週期。下面是vue的幾個鉤子函式:

beforecreate: function () ,

created: function () ,

beforemount: function () ,

mounted: function () ,

beforeupdate: function () ,

updated: function () ,

beforedestroy: function () ,

destroyed: function ()

下圖是vue生命週期過程中el、data以及data裡面的message欄位的變化

以上是本期全部內容,欲知後事如何,請聽下回分解

vue基礎語法之樣式繫結

屬性一般是以is開頭的 作為標誌位 是布林型別的 v bind class div 通常適用於需要加多個類名的場景 或者是需要取消類樣式 v bind class activeclass,errorclass div 示例 box v bind class 測試樣式div v on click ha...

vue基礎之樣式繫結(class,style)

陣列 class red thin 這是乙個 的h1h1 陣列中使用三元表示式 class red thin isactive?active 這是乙個 的h1h1 陣列中巢狀物件 class red thin 這是乙個 的h1h1 直接使用物件 class 這是乙個 的h1h1 直接在元素上通過 s...

vue資料繫結

單向資料繫結 data流入頁面,data一變,頁面也變 雙向資料繫結 data與頁面雙向繫結,互相影響,v model value v model 只有輸入dom才有value,v model會預設收集輸入類dom的value,所以可以去掉 value v model類似react中的受控元件 re...