Vue $refs用法（vuerefs详解）

$refs获取dom元素
今天我们主要说一下几点
1、vue 获取普通元素（基础）
2、vue 获取列表（基础）
一、vue获取dom节点 （普通元素）
我们之前获取页面上的dom元素，很容易，
比如原生js的
document.getElementsByClassName
jqurey的
$('类名')
而vue是一个MVVM框架，数据驱动，尽量能不操作dom层就不要操作，但是对于一些场景，我们不得不操作，那么怎么操作呢，其实也很简单 用ref
首先我们先将需要获取的那个元素绑定ref属性，例如input，然后我们在页面渲染完后，获取这个元素节点

<div>
<input type="text"  value="123"  ref="input">
</div>

export  default {
data(){
    return{
    }
},
mounted()    {
    console.log(this.$refs.input)
}
}

打印出来的和我们原生js获取出来的一样，可以直接操作input的属性和方法

二、获取列表
获取列表和元素一样，同理我们在li上绑定ref

<ul >
        <li v-for="(item,index) in  list" :key="index"  ref="list">
            {{item}}
        </li>
    </ul>

然后在页面渲染完成后，通过this.$refs.list 获取li信息，并添加随机字体颜色

export  default {

data(){

return{

    list:[1,2,4,5,6,7,8]

    }

},

mounted(){

    console.log(this.$refs.list)

    //添加随机颜色

    this.$refs.list.forEach((v)=>{

    v.style.color ='#' + Math.floor(Math.random()*1000000)

    })

    }

}

我们看一下效果：

我把获取组件这一部分放在了下一节，子父组件之间属性和方法的操作，这样更好理解