我們之前說過,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...