$data是Vue實例中的一個內置屬性，它是一個包含Vue實例數據的對象。在Vue中，我們可以通過Vue實例的$data屬性來訪問和修改Vue實例的數據。在Vue的模板中，我們也可以使用特殊的語法來訪問Vue實例中的數據。
下面是一個簡單的Vue示例，它包含了一些基本的數據和方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>在這個示例中，我們創建了一個Vue實例并將其掛載到頁面上的一個DOM元素上。Vue實例中定義了一個數據屬性message，它的初始值是"Hello Vue!"。同時，我們還定義了一個方法reverseMessage，用于將message的值翻轉。
在Vue模板中，我們使用雙大括號語法{{ }}來訪問Vue實例中的數據。在這個示例中，我們在一個p標簽中使用了message屬性，它會渲染出"Hello Vue!"。另外，我們使用了v-on指令來監聽按鈕的點擊事件，當按鈕被點擊時會調用reverseMessage方法來翻轉message屬性的值。
Vue框架的魅力在于其響應式設計，$data屬性正是這種響應式的核心所在。當我們修改Vue實例中的數據時，頁面上綁定的相關內容會自動更新。在這個示例中，當我們點擊按鈕時，message屬性中的內容會被翻轉，并且立即更新到頁面上。