Vue.js是一款非常流行的JavaScript框架，它的主要目的是為了讓Web開發(fā)變得更加簡單、高效、靈活和直觀。Vue.js的優(yōu)點包括易于上手、漸進式、模塊化、自適應、高效、靈活等等。其中，Vue.js 2.0作為Vue.js的最新版本，提供了更多的特性和強化了其性能、可維護性和可擴展性。

在Vue.js 2.0中，我們可以使用appendChild方法來添加DOM元素，這是因為Vue.js使用了虛擬DOM來管理DOM的更新，將數(shù)據(jù)變化同步到虛擬DOM上后再進行實際的DOM操作，從而提高了頁面的渲染效率和性能。

var appDiv = document.querySelector('#app');
var p = document.createElement('p');
p.innerText = 'Hello Vue.js!';
appDiv.appendChild(p);

上面的代碼演示了如何使用appendChild方法向id為app的元素添加一個p元素，并將其內(nèi)部文字內(nèi)容設置為'Hello Vue.js!'。其中，querySelector方法用于獲取指定選擇器的元素，createElememt方法用于創(chuàng)建一個指定標簽名的元素，innerText屬性用于設置元素內(nèi)部文字內(nèi)容。

如果我們想讓上述代碼與Vue.js結合使用呢？我們可以借助Vue.js提供的生命周期函數(shù)來處理組件的渲染和更新。

Vue.component('hello', {
template: '
Hello {{name}}!
',
data() {
return {
name: 'Vue.js'
}
},
mounted() {
var p = document.createElement('p');
p.innerText = 'Hello DOM!';
this.$el.appendChild(p);
}
})

上面的代碼演示了如何使用Vue.js的component方法創(chuàng)建一個組件hello，其模板內(nèi)容為'Hello {{name}}!'，其中name是一個數(shù)據(jù)屬性，初始值為'Vue.js'；在生命周期函數(shù)mounted中，我們創(chuàng)建另一個p元素，將其內(nèi)部文字內(nèi)容設置為'Hello DOM!'，并使用this.$el.appendChild(p)添加到組件的根元素中。

無論我們使用純HTMLElement對象還是Vue組件對象來操作DOM，我們都要遵循以下幾個原則：

1. 盡量使用Vue.js提供的指令和方法來操作DOM，例如v-for、v-if、v-bind、v-on、$set等；
2. 避免直接操作DOM，因為這樣會使代碼更加復雜、難以維護、容易引起性能問題；
3. 如果必須操作DOM，盡量使用基于組件的方式來組織代碼，這樣可以將DOM操作封裝在組件內(nèi)部，提高了代碼的可讀性和可維護性。

綜上所述，使用Vue.js 2.0的appendChild方法能夠方便地向DOM中添加元素，但是我們需要遵循一定的原則來保證代碼的正確性、可維護性和可擴展性。