我們在網頁設計中經常會遇到需要點擊一個按鈕，然后動態新增一些內容的需求。Vue 框架提供了一個非常方便的方式來實現這一點，下面我們來詳細講述如何用 Vue 實現點擊新增 div 的功能。

首先，我們需要在我們的 HTML 文件中引入 Vue。我們可以直接使用 CDN 引入 Vue。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

接下來，我們需要創建一個 Vue 實例，在實例中定義一個 data 對象。

<div id="app">
<button v-on:click="addBox">新增</button>
<div v-for="box in boxes">
<div class="box">{{ box }}</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
boxes: []
},
methods: {
addBox: function () {
this.boxes.push('Box ' + (this.boxes.length + 1));
}
}
})
</script>

在上面的代碼中，我們在 app 實例中定義了一個名為 boxes 的數組，并且用 v-for 指令循環渲染這個數組中的數據。在 addBox 方法中，我們可以通過 this.boxes.push() 來向數組添加一個新的元素。

現在我們已經定義好了我們的 Vue 實例和數據，接下來我們需要通過 CSS 來定義新增的 div 標簽的樣式。

.box {
width: 100px;
height: 100px;
background-color: #eee;
display: inline-block;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 24px;
}

我們可以將新建的 div 的一些基本樣式定義好，比如背景色、寬度、高度等等。

最后，我們就可以在網頁中看到我們的效果了。點擊按鈕，就可以新增一個 div 標簽了。這個功能非常實用，在網頁開發中十分常見。

至此，我們已經詳細介紹了如何用 Vue 實現點擊新增 div 的功能。Vue 框架給我們帶來了很多便利，使得我們的網頁開發變得更加高效、簡單。