Vue中一個非常重要的概念就是數據,通過數據的綁定,我們可以把數據和視圖進行關聯。其中,Vue的數據驅動是指,當數據發生變化時,視圖也會隨之改變。這就是Vue的核心特性之一。
在Vue中,數據通常被儲存在一個對象上,我們稱之為Vue實例。這個對象包括了Vue應用中的所有數據屬性。其中,我們使用"data"屬性來定義Vue實例的數據,如下所示:
var vm = new Vue({ data: { message: 'Hello, Vue!' } })
在上面的示例代碼中,我們創建了一個新的Vue實例,并將其儲存到"vm"變量中。在這個Vue實例中,我們定義了一個"data"屬性,并給這個屬性賦了一個對象。這個對象包含了一個"message"屬性,它的值是"Hello, Vue!"。
現在,我們可以通過"vm.message"的方式來訪問這個數據屬性。例如,我們可以在HTML代碼中使用這個屬性來渲染一個文本:
<div id="app"> {{ message }} </div>
在上面的代碼中,我們使用了Vue的模板語法"{{ }}"來將"message"屬性的值顯示到HTML頁面中。當我們修改"message"的值時,頁面中顯示的文本也會隨之改變。
除了"message"屬性,我們還可以定義其他的數據屬性,例如以下代碼:
var vm = new Vue({ data: { count: 0, items: ['apple', 'banana', 'orange'], person: { name: 'Tom', age: 18 } } })
在這個代碼中,我們定義了四個數據屬性:"count"、"items"、"person.name"和"person.age"。這些屬性可以被Vue實例的各個方法所使用,例如"computed"和"methods"。