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)