Vue.js 教程
每個 Vue 應用都需要通過實例化 Vue 來實現(xiàn)。
語法格式如下:
var vm = new Vue({ // 選項 })
接下來讓我們通過實例來看下 Vue 構造器中需要哪些內(nèi)容:
點擊 "運行代碼" 按鈕查看在線實例
可以看到在 Vue 構造器中有一個el 參數(shù),它是 DOM 元素中的 id。在上面實例中 id 為 vue_det,在 div 元素中:
<div id = "vue_det"></div>
這意味著我們接下來的改動全部在以上指定的 div 內(nèi),div 外部不受影響。
接下來我們看看如何定義數(shù)據(jù)對象。
data 用于定義屬性,實例中有三個屬性分別為:site、url、alexa。
methods 用于定義的函數(shù),可以通過 return 來返回函數(shù)值。
{{ }} 用于輸出對象屬性和函數(shù)返回值。
<div id="vue_det"> ????<h1>site : {{site}}</h1> ????<h1>url : {{url}}</h1> ????<h1>{{details()}}</h1> </div>
當一個 Vue 實例被創(chuàng)建時,它向 Vue 的響應式系統(tǒng)中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發(fā)生改變時,html 視圖將也會產(chǎn)生相應的變化。
除了數(shù)據(jù)屬性,Vue 實例還提供了一些有用的實例屬性與方法。它們都有前綴 $,以便與用戶定義的屬性區(qū)分開來。例如: