Vue入門指南-08 Vue中的標籤/如何獲取DOM元素(快速上手vue)

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 這個兩個生命週期鉤子函數將會被對應執行。

// 主要用於保留組件狀態或避免從新渲染。
<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多個條件判斷的子組件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一塊兒使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>
複製代碼

注意，keep-alive 是用在其一個直屬的子組件被開關的情形。若是你在其中有 v-for 則不會工做。若是有上述的多個條件性的子元素，keep-alive 要求同時只有一個子元素被渲染。

• 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元素。

Vue入門指南(快速上手vue)