在使用Vue.js之前，我們需要確保在HTML代碼中正確引用Vue.js文件。通常我們將Vue.js文件添加到HTML頁面的頭部。
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>接下來，我們需要創建一個Vue實例。我們可以通過Vue構造函數創建一個Vue實例，并將配置對象傳遞給它。
const app = new Vue({
// 配置選項
})配置對象可以包含各種配置選項來定義Vue實例的行為。例如，我們可以指定Vue實例應該綁定到哪個元素：
const app = new Vue({
el: '#app'
})在上面的示例中，我們將Vue實例綁定到id為“app”的元素上。此時，Vue將自動管理該元素及其內部的所有內容。
除了el選項，Vue實例還可以具有data和methods選項。data選項包含Vue實例的數據。在Vue實例中，我們可以像使用普通JavaScript對象一樣訪問和更新數據。
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})在上面的示例中，我們將message屬性添加到Vue實例的data選項中。我們可以使用雙花括號{{}}在HTML中將其呈現：
<div id="app">
{{ message }}
</div>methods選項包含Vue實例的方法。我們可以使用methods選項添加自定義方法來處理用戶交互或執行其他操作。
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})在上面的示例中，我們將reverseMessage方法添加到Vue實例中。該方法將反轉message字符串并將其更新為Vue實例中的data屬性。我們可以使用v-on指令將此方法綁定到按鈕上：
<div id="app">
{{ message }}
<button v-on:click="reverseMessage">Reverse Message</button>
</div>在上面的示例中，我們將v-on指令添加到按鈕上并將其設置為調用reverseMessage方法。當用戶單擊按鈕時，Vue將調用該方法并更新message屬性以反轉字符串。