【Vue】零基础学习Vue: 第26课 Vue中标签元素节点的获取$refs方法：

 

ref=“定义标签获取名” this.$refs.标签名 //获取对应的标签元素

this.$refs //获取所有定义好的标签

首先我们使用代码来简单的获取一个标签：

    
    ref获取节点
    
    





  
我是一波段落



    let vm = new Vue({
        el:'#app',
        mounted(){  //mounted生命周期函数(数据以挂在到页面上时触发)
          console.log(this.$refs.aaa)	//这里我们打印获取结果
        }
    })

运行结果如下：

使用this.$refs获取多个标签

接下来我们来一次性获取多个标签：

    
    ref获取节点
    
    




  
  
  
我是div aaa段落
  
我是p aaa段落
  我是span
  
  我是组件




    

      
我是子组件div
      
我是子组件p
    



    //定义子组件son
    let son = {
        template:'#son'
    }

    let vm = new Vue({
        el:'#app',
        components:{	//在根组件内注册子组件son
            son
        },
        mounted(){  //mounted生命周期函数(数据以挂在到页面上时触发)
          console.log(this.$refs) //获取所有定义可获取的标签名
        }
    })

运行结果如下：

接下来我们获取v-for遍历的标签：

    
    ref获取节点
    
    




  
  

    
我是遍历出来的第{{item}}个li
  



    let vm = new Vue({
        el:'#app',
        mounted(){  //mounted生命周期函数(数据以挂在到页面上时触发)
          console.log(this.$refs) //获取所有定义可获取的标签名
          this.$refs.aaa[3].style.color = "red"	//我们动态给第4个li设置以下字体颜色
        }
    })

运行结果如下：

本节课总结：

this.$refs获取

1.获取所有含有ref标记的单个节点
2.如果使用v-for获取相同的ref标记  则会获取到多个节点
3.如果ref标记到组件上  则获取的是整个组件