最近事多，更新稍慢了點，距離第二節推送快一周了。

?

我們之前說過，Vue是數據驅動視圖的，只要model（模型層）的數據改變了，Vue就會幫我們改變視圖上顯示的內容，不用我們自己去動手寫代碼更新。那么，它是怎么做到的，我們的代碼要怎么寫才能做到這一點。

?

答案是：Vue實例。

?

先確保你的項目安裝好Vue.js，安裝教程：點擊這里

?

安裝好之后，我們來看看怎么創建和使用Vue實例，我們把它分成 4 步走。

?

第1步 ?創建語法

創建一個Vue實例的語法很簡單，如下：

?

? <script>
? ? ? let vm = new Vue({});
? ?</script>

?

?

通過關鍵語句 new Vue( )我們就可以創建一個Vue實例：vm了。我們注意到了我們給Vue( )傳了一個參數選項，是一個空對象，我們接著往下看。

第2步 ?設置數據

沒錯，我們就是利用上面的對象參數，來創建這個Vue實例wm的，比如，設置vm里面的數據。

?let vm = new Vue({
??? ?//實例vm的數據
?? data:{
??????? ? name: "張三",
??????? ? age :? 21
??? ?}
? });

寫法也很簡單，參數對象不再是一個空對象，它包含一個屬性：data，而data的值也是一個對象，這個對象就是我們給實例vm設置的數據了。比如：name為張三，age為21等等。

?

第3步 ?掛載元素

創建了一個實例vm，設置了vm的數據后，我們怎么把數據展示在視圖上呢這就要通過我們的掛載元素了。我們看看怎么用：

視圖view部分：

?<div id="app"></div>

視圖（html部分）上我們有一個id為”app”的div元素。

?

?let vm = new Vue({
??? //掛載元素
??el:'#app',
??? //實例vm的數據
??data:{
??????? name: "張三",
??????? age :? 21
??? }
? });

?

我們看到參數中我們不但有屬性“data”，還多了個屬性：“el”，el參數提供一個在頁面上已經存在的DOM元素，作為我們實例vm的掛載目標。表示我們的實例vm和id為“app”的DOM節點就關聯起來了。

?

第4步 ?渲染

實例vm創建好了，數據data有了，DOM節點也關聯起來了，最后一步，就是把vm的數據綁定到指定的視圖上了，也就是數據渲染。

?

?<div id="app">
??? 我是{{ name }}，
??今年{{ age }}歲
? </div>

對，就是你看到的這么簡單，我們只需要用一個雙大括號：{{? }}?即可，你可以留意到，{{ name }} ?和?{{ age }}?就是我們給實例vm設置的數據name和age，我們用{{? }}可以直接讀取到它們的值。

我們訪問頁面，就會看到vm的數據data就會被成功地渲染出來：

（ 數據渲染成功 ）

?

就這樣，我們就成功地創建了一個vue實例，并把它的數據渲染在視圖上了，超簡單。

5 本節小結

創建并使用一個Vue實例并不難，僅需4步走：

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

?

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

?2.《Vue2.0基礎》第1節：Vue.js?簡介

?3.《Vue2.0基礎》第2節：簡易安裝與快速入門

總結

以上是生活随笔為你收集整理的第三节：创建一个Vue实例，超简单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。