$data是Vue的一個屬性,它表示Vue實例的數據對象。在Vue的開發中,$data是非常重要的一個屬性,它包含了當前Vue實例的所有數據以及相應的變化。通過訪問$data,可以讀取或修改Vue實例中的數據。
在Vue實例中,$data可以通過this.$data來訪問。例如,下面的代碼創建了一個Vue實例,并訪問了其中的$data:
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) console.log(app.$data.message) // 輸出:Hello Vue!
可以看到,使用$this.$data可以直接訪問Vue實例中的數據對象。
在Vue實例中,可以直接修改$data中的數據,從而改變UI展現。例如,下面的代碼通過修改$message屬性,改變了界面上的文本內容:
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) app.$data.message = 'Hello World!'
通過上面的代碼,頁面上的文本內容就從"Hello Vue!"變成了"Hello World!"。
需要注意的是,改變$data中的數據,會引起Vue實例所關聯的UI界面的更新。這個更新是自動完成的,無需手動調用更新函數。