這是一篇關于Vue寫的例子的文章。我們將展示一個基本的Vue應用程序示例，它將演示如何創建Vue實例、數據綁定和事件處理。
首先，讓我們創建一個HTML頁面并添加Vue的CDN鏈接:
<!DOCTYPE html>
<html>
<head>
<title>Vue Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>接下來，我們需要在其中添加Vue實例。讓我們為此創建一個
元素，并將其id設置為app:
<!DOCTYPE html>
<html>
<head>
<title>Vue Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>現在，我們將創建Vue實例并將其附加到
元素中。因此，讓我們編寫如下代碼:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})這段代碼創建了一個名為app的Vue實例，并將其綁定到appid的
元素中。內部的數據對象包含一個名為message的屬性，其值為"Hello, Vue!"。
現在，我們需要使用Vue的數據綁定機制將數據綁定到HTML元素中。讓我們在
元素中添加以下代碼:
<div id="app">
{{ message }}
</div>這段代碼使用Vue插值語法{{ ... }}將模板引擎綁定到內部的message屬性。當頁面加載時，Vue將用屬性值替換插值表達式。
現在，我們可以看到頁面上顯示了"Hello, Vue!"。
現在讓我們為message屬性添加一個按鈕，當用戶點擊它時，將其更改為"Vue is Awesome!"。為此，我們需要添加以下HTML代碼:
<div id="app">
{{ message }}
<button v-on:click="changeMessage">Change Message</button>
</div>這段代碼創建了一個按鈕，其中v-on:click指令告訴Vue在點擊按鈕時調用changeMessage方法。接下來，讓我們在Vue實例中添加此方法:
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
changeMessage: function () {
this.message = 'Vue is Awesome!'
}
}
})這段代碼添加了一個名為changeMessage的新方法，當按鈕被點擊時，它將內部message屬性更改為"Vue is Awesome!"
現在，我們已經完成了Vue應用程序的創建，可以在頁面上測試它了。
上一篇python 類名.方法
下一篇python 求積分算法