Vue是一個流行的前端框架，它能夠實現數據的綁定和渲染，讓我們在構建Web應用時變得更加簡單。在Vue中，通過data屬性來定義組件的數據源，并可以在組件中使用{{ }}語法將數據渲染到頁面上。下面我們來看一下如何在Vue中進行數據的讀取。

<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>

可以看到，我們定義了一個Vue實例，并在其data屬性中定義了一個message屬性。接著在html模板中使用{{ message }}將其渲染到頁面上。在頁面中顯示的就是Hello Vue!。

那么，如何在Vue中動態地獲取data中的數據呢？

<div id="app">
<p>{{ message }}</p>
<button @click="getMessage">Get Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
getMessage: function() {
var self = this;
axios.get('your api url').then(function(response) {
self.message = response.data.message;
}).catch(function(error) {
console.log(error);
});
}
}
});
</script>

這里我們新增了一個，并在它上面綁定了一個@click事件，當點擊按鈕時將會調用getMessage函數。該函數使用axios庫向后端發送Get請求，獲取數據后將其賦值給Vue實例中的message屬性。最后，我們將數據渲染到頁面中。

總結一下，Vue中data屬性是用于定義組件的數據源，可以通過{{ }}語法將數據渲染到頁面上。如果需要動態地獲取數據，可以通過綁定事件調用函數，從后端服務器獲取數據賦值給data中的屬性，最后渲染到頁面中。