Vue中提供了一些固定的標籤來方便我們在開發過程中使用，並且在開發過程中，我們很有可能因為要使用某些第三方庫而不得已要操作DOM元素，因此如何獲取並操作DOM元素的使用呢。

Vue中提供的標籤component

這個標籤是用來展示元件的

<div id="app">    <component :is="要展示的元件名稱"></component>     <custom></custom> // 直接通過自定義元件名稱當作標籤使用</div>new Vue({    el: "#app",    components: {        "要展示的元件名稱": {            template: `<div> // 注意自定義元件的模版物件需要有且只有一個根標籤。                <h1>我是自定的元件一</h1>            </div>`        }，        "custom": {            template: `<div>                <h1>我是自定義元件二</h1>            </div>`        }    }})

template

這個標籤用來定義元件的HTML結構

<div id="app">    <custom></custom></div><template id="tmp">    <div>        <h1>我是用template標籤定義元件的HTML模版</h1>    </div></template>new Vue({    el: "#app",    components: {        "custom": {            template: "#tmp"        }    }})

transition

這個標籤是用來把需要被動畫控制的元素包裹起來，展示自定義的動畫效果

<style>    // 一般情況下， 元素的其實狀態和終止狀態的動畫是一樣的。    // v-enter（這是一個時間點）是元素進入之前的其實狀態，此時還沒有開始進入。    // v-lealve-to（這是一個時間點）是動畫離開之後的終止狀態，此時動畫已經結束。    v-enter, v-leave-to{        opctity: 0 translateX(150px)    }    // v-enter-active是入場動畫的時間段    // v-leave-active是離場動畫的時間段    v-enter-active，v-leave-active{        transition： all 0.4s ease    }</style><div id="app">    <transition>        <h1>我是有動畫效果的</h1>    </transition></div>

transition-group

通過v-for渲染出來的標籤不能使用transition包裹， 需要使用transition-group包裹新增動畫。

<style>    // 一般情況下， 元素的其實狀態和終止狀態的動畫是一樣的。    // v-enter（這是一個時間點）是元素進入之前的其實狀態，此時還沒有開始進入。    // v-lealve-to（這是一個時間點）是動畫離開之後的終止狀態，此時動畫已經結束。    v-enter, v-leave-to{        opctity: 0 translateX(150px)    }    // v-enter-active是入場動畫的時間段    // v-leave-active是離場動畫的時間段    v-enter-active，v-leave-active{        transition： all 0.4s ease    }</style><div id="app">    <transition-group tag="ul">        <li v-for="item of list" :key="item.id">            <h1>我是有動畫效果的</h1>        </li>    </transition-group></div>new Vue({    el: "#app",    data: {        list:[            {name:"fanqie", id: 1},            {name: "chaofan", id: 2}        ]    }})

keep-alive

當前標籤包裹元件時，會快取不活動的元件例項，而不是銷燬它們，keep-alive是一個抽象元件：它自身不會渲染一個DOM元素，也不會出現在父元件中。

當元件在內被切換，它的 activated 和 deactivated 這個兩個生命週期鉤子函式將會被對應執行。

solt

slot 元素作為元件模板之中的內容分發插槽。slot 元素自身將被替換。

// 和HTML元素一樣，我們經常需要向元件傳遞內容，例如：// custom 是自定義的元件<custom>     <div>我是在元件內新增的標籤</div></custom> 

但是我們渲染出來的卻是這樣：

幸好，Vue 自定義的 元素讓這變得非常簡單：

Vue.component('custom', {  template: `    <div class="demo-alert-box">      <strong>Error!</strong>      <slot></slot>    </div>  `})

Vue中獲取DOM元素

在我們的vue專案中，難免會因為引用第三方庫而需要操作DOM標籤，vue為我們提供了ref屬性。 ref 被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 $refs 物件上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項：

<p ref="p"></p>// 現在在你已經定義了這個 ref 的元件裡，你可以使用：this.$refs.p 來操作這個DOM元素來。

vue不提倡我們操作DOM元素，因此在引用第三方外掛或者專案中，儘量少的不要出現操作DOM元素。