前面一篇我們建立應用程式的時候把資料呈現在頁面上的方法是使用兩個大括號包覆的方式，如下:

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

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

以下還有幾種方法我們可以把資料呈現在頁面上，並實現所謂的 MVVM 的概念，MVVM 可以自行 google 一下，這裡不贅述。
但 Vue 實際上並非採用 MVVM 的概念，它僅是受到 MVVM 的啟發，但操作上仍然是以資料為中心，畫面跟資料是雙向綁定的。

接下來我們在 HTML 元素新增一個 input 元素，並綁上一個 Vue 的指令 v-model

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
</div>

這時候頁面上的 input 欄位也會有文字
這是在 input 欄位顯示資料的方法之一

另外一種方法，我們可以在頁面上直接新增一個 HTML 標籤，並下一個 v-text 的指令，我們就能把資料帶進標籤內
如下:

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    <div v-text="text"></div>
</div>

除了把文字資料包覆進去，我們也可以包覆 HTML　標籤進去，這時候就要改成　v-html 的指令，這時候我們新增 span 標籤進去 data 內的 text 的值，就會發現標籤也一起被帶進去了

<div id="app">
    {{ text }}
    <input type="text" v-model="text">
    <div v-html="text"></div>
</div>

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