Vue.js是一個流行的前端開發框架之一，它的核心中包含了眾多API接口。今天，我們將通過實例來詳細講解Vue.js的基本API。

new Vue()

這是Vue.js最基本的API，用于構建Vue實例。它接受一個對象作為參數，在該對象中可以定義data屬性、methods方法、computed計算屬性、watch監聽等等。

data

這個屬性定義了Vue實例中的數據模型。可以通過單個變量也可以通過一個對象來定義。如下所示：

data: {
message: 'Hello Vue!'
}

也可以這樣：

data() {
return {
message: 'Hello Vue!'
}
}

不管哪種方式，都可以通過在Vue實例中訪問該數據模型來進行修改和讀取。

methods

methods屬性中定義的方法可以在Vue實例中被調用。它接受一個方法名和一個函數作為參數。如下：

methods: {
myMethod() {
console.log('Hello Vue!')
}
}

可以使用Vue實例中的myMethod方法來調用該函數。

computed

computed屬性中定義的計算屬性可以在Vue實例中被訪問和調用。例如：

computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}

在Vue實例中，可以通過訪問reversedMessage來獲得message的倒序字符串。

watch

watch屬性中定義的函數可以在數據模型被修改時被調用。如下所示：

watch: {
message(newVal, oldVal) {
console.log('New message: ' + newVal + ', Old message: ' + oldVal)
}
}

當message屬性被修改時，Vue實例的watch函數會自動被調用，并輸出新舊值。

el

el屬性定義Vue實例掛載的元素。它是一個必選屬性，必須設置為一個CSS選擇器或一個DOM元素。如下所示：

el: '#app'

表示將Vue實例掛載到id為app的元素上。

template

template屬性定義了Vue實例生成的HTML模板。它接受一個字符串或一個DOM元素作為參數。如下：

template: '
Hello {{ message }}
'

或者

template: '#my-template'

其中，#my-template是一個HTML模板元素的id，使用該方式可以用一個模板元素來替代template屬性中的字符串。

Vue.js的基本API就是這些，深入了解這些API對于用Vue.js進行開發是很有幫助的。