Vue 的核心是允许是模板语法来声明式的将数据渲染进DOM系统

修改dom样式的思路，无非就是两步：

• 获取dom
• 修改样式

一、 vm.$el 修改dom样式

获取dom节点

根节点,即被挂载的dom

<div id="app">{{info}}</div>
  
  
1
2
3

创建一个vue 实例

let app = new Vue({    el: "#app",  // 页面中已经存在的dom元素作为挂载目标  data: {    info: 'hello vue!'  }})
  
  
1
2
3
4
5
6
7

通过vue实例，获取dom元素

// vue实例提供 $el 进行访问dom元素console.log('elem',app.$el)
  
  
1
2

代码示例

修改dom样式

// app.$el.style 获取dom的样式app.$el.style.color = 'red'
  
  
1
2
3

局限性：

这种方式只能修改vue实例挂载的dom样式。

如果要修改组件中某个dom的样式，那就有些费力。下面介绍第二种方式，也是日常开发最常用的方法。

二、$refs 修改dom样式

ref vs $refs

ref 目标对象：是单个dom元素或子组件。
$refs 目标对象： 任意组件都会注册$refs属性。

两者联系
当子组件中出现有ref的引用信息时，父组件中的$refs就可以获取到该子组件的引用。

ref

// 单个dom节点<div ref='singleDom'></div>// 子组件中<child-component ref="comp"></child-component>
  
  
1
2
3
4

$refs

// 父组件中console.log(this.$refs.singleDom) // this 指代父组件
  
  
1
2

示例代码

获取dom节点

// 通过 $refs 属性，获取子组件的domconsole.log(this.$refs.singleDom)
  
  
1
2

修改dom样式

this.$refs.singleDom.style.color = 'red'
  
  
1