Vue 的引入跟 jQuery 一樣，這裡就不多贅述，版本一樣有壓縮版本跟開發人員版本。
當引入好 Vue 之後，我們就可以先來建立第一個應用程式。

首先我們先在 script 的部分宣告一個新的應用程式

<script>
    var app = new Vue({})
</script>

裡面會是一個物件，接著我們就要綁定網頁上的 HTML 元素，這裡建議使用 id
這時候頁面上的程式碼會變成如下:

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

<script>
    var app = new Vue({
        el: '#app',
    })
</script>

el 的值即是要綁定的元素，亦即 element(元素) 的縮寫
接著我們想要在頁面上顯示 Hello World!
於是我們再寫入一個 data 的方法，裡面也是物件

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

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: 'Hello World!'
        }
    })
</script>

接著我們在我們綁定的 HTML 元素上，寫入要顯示出來的文字

<div id="app">
    {{ text }}
</div>

這裡是用兩個大括號包著在 data 內的 text
這時候頁面上就會顯示 Hello World!

接著我們來探討兩種情況，我們想在網頁上新增第二個應用程式，是可行的嗎？
另外應用程式內還可以在包一個應用程式嗎？ (亦即巢狀撰寫)

如果這時候，我們分別有兩個元素:

<div id="app">
    {{ text }}
</div>

<div id="app2">
    {{ text }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: 'Hello World!'
        }
    });
    var app2 = new Vue({
        el: '#app2',
        data: {
            text: 'Hello World!2'
        }
    })
</script>

這時候會發現，頁面上分別會顯示 Hello World! 和 Hello World!2
所以兩個應用程式頁面上是可行的。

如果今天改成巢狀撰寫呢？

<div id="app">
    {{ text }}
    <div id="app2">
        {{ text }}
    </div>
</div>

這時候就會發現，console 會跳錯誤出來，所以 Vue 的應用程式是不可以巢狀撰寫的。