第三節 建立乙個Vue例項,超簡單

2021-08-17 07:39:01 字數 1153 閱讀 9213

我們之前說過,vue是資料驅動檢視的,只要model(模型層)的資料改變了,vue就會幫我們改變檢視上顯示的內容,不用我們自己去動手寫**更新。那麼,它是怎麼做到的,我們的**要怎麼寫才能做到這一點。

答案是:vue例項。

先確保你的專案安裝好vue.js,安裝教程:(去看

第二節、簡易安裝 和 快速入門vue.js

)安裝好之後,我們來看看怎麼建立和使用vue例項,我們把它分成 4 步走。

第1步  建立語法

建立乙個vue例項的語法很簡單,如下:

複製**

通過關鍵語句 new vue( )我們就可以建立乙個vue例項:vm了。我們注意到了我們給vue( )傳了乙個引數選項,是乙個空物件,我們接著往下看。

第2步  設定資料

沒錯,我們就是利用上面的物件引數,來建立這個vue例項wm的,比如,設定vm裡面的資料。

let vm = new vue(

});

複製**

寫法也很簡單,引數物件不再是乙個空物件,它包含乙個屬性:data,而data的值也是乙個物件,這個物件就是我們給例項vm設定的資料了。比如:name為張三,age為21等等。

第3步  掛載元素

建立了乙個例項vm,設定了vm的資料後,我們怎麼把資料展示在檢視上呢這就要通過我們的掛載元素了。我們看看怎麼用:

檢視view部分:

複製**

let vm = new vue(

});

複製**

第4步  渲染

例項vm建立好了,資料data有了,dom節點也關聯起來了,最後一步,就是把vm的資料繫結到指定的檢視上了,也就是資料渲染。

我是},

今年}歲

複製**

對,就是你看到的這麼簡單,我們只需要用乙個雙大括號:} 即可,你可以留意到,}  和 } 就是我們給例項vm設定的資料name和age,我們用}可以直接讀取到它們的值。

我們訪問頁面,就會看到vm的資料data就會被成功地渲染出來:

就這樣,我們就成功地建立了乙個vue例項,並把它的資料渲染在檢視上了,超簡單。

5 本節小結

建立並使用乙個vue例項並不難,僅需4步走:

當然,例項vm除了用於屬性el、data之外,還有很多很實用的屬性和方法,同樣很簡單,後面會繼續講解,今天先講到這裡。

第三節 定義乙個類 3

當你宣告乙個類,你需要列出物件應有的所有變數和所有函式 被稱為屬性和方法.3.1.1中顯示了乙個類的構成.注意在大括號 內你只能宣告變數或者函式.3.1.2中顯示了如何在乙個類中定義三個屬性和兩個方法.3.1.1 class name extends another class 3.1.2 www....

第一章 第三節

1.8 位址匯流排 位址匯流排上能傳送多少不同的資訊,cpu就可以對多少個儲存單元進行定址。64位的cpu 64位的作業系統 64位的軟體 64位的速度,缺一不可。64位就是64bit,也就是8byte 乙個cpu有n根位址匯流排,則可以說這個cpu的定址匯流排的寬度為n,這樣的cpu最多可以尋找2...

全網最簡單的shiro教程第三節

org.apache.shiro shiro all 1.4.2 commons logging commons logging 1.2 public class myrealm extends authorizingrealm 登入認證 指定realm與securitymanager之間的關聯 m...