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

番茄炒蛋少放糖發表於2019-04-01
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入門指南-08 Vue中的標籤/如何獲取DOM元素(快速上手vue)
幸好，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)

相關文章