Vue是一款流行的JavaScript框架，常用于構建單頁面應用程序。Vue具有直觀的API和優美的模板語法，特別適合輕松實現數據綁定和DOM操作。

本文將通過實現一個簡單的數字相加Vue組件來介紹Vue的基本概念和使用：

Vue.component('addition', {
data: function () {
return {
num1: 0,
num2: 0
}
},
computed: {
sum: function () {
return parseInt(this.num1) + parseInt(this.num2);
}
},
template: `
Number 1:
Number 2:
Result:
`
})
new Vue({
el: '#app'
})

此Vue組件包含兩個數據屬性：num1和num2，以及一個計算屬性：sum。模板中通過v-model指令實現數據綁定，用戶輸入的數字會實時更新組件的data屬性，計算屬性sum則根據num1和num2的值返回對應的和。最終渲染成一個包含三個數字輸入框和一個只讀數字框的HTML元素。實現了數字相加的功能。

可以在HTML中使用該組件：

<div id="app">
<addition></addition>
</div>

運行結果：

以上代碼片段展示了如何快速構建并使用一個簡單Vue組件，并展示了Vue的數據綁定和計算屬性的強大功能。使用Vue可以方便地構建響應式的交互式Web應用程序，幫助我們快速實現各種復雜的界面效果。