vue.js

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

Vue中提供的標籤

• component

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

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

• template

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

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

• transition

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

<code>
    <transition>        
我是有動畫效果的
    /<transition>
/<code>

• transition-group

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

<code>
    <transition-group>        
            
我是有動畫效果的
        
    /<transition-group>
new Vue({    el: "#app",    data: {        list:[            {name:"fanqie", id: 1},            {name: "chaofan", id: 2}        ]    }})/<code>

• keep-alive

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

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

<code>// 主要用於保留組件狀態或避免重新渲染。<keep-alive>  <component>/<keep-alive><keep-alive>  <comp-a>  <comp-b>/<keep-alive><transition>  <keep-alive>    <component>  /<keep-alive>/<transition>/<code>

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

• solt

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

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

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

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

<code>Vue.component('custom', {  template: `    
      Error!      <slot>    
  `})/<code>

Vue中獲取DOM元素

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

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

vue不提倡我們操作DOM元素，因此在引用第三方插件或者項目中，儘量少的不要出現操作DOM元素。

請關注我，定時更新前端相關知識及項目案例

閱讀更多 番茄學前端 的文章

關鍵字: 標籤 跳槽那些事兒 動畫