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

请关注我，定时更新前端相关知识及项目案例

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

關鍵字: 跳槽那些事儿 HTML 标签