第七十六篇：ref引用(在vue中引用Dom的方法)

好家伙，

 

引子:

jQuery简化了程序员操作DOM的过程

vue 优势：MVVM 在vue中，程序员不需要操作DOM。程序员只需要把数据维护好即可！（数据驱动视图）

那么若要在vue中操作dom,这时就要用到"ref"了,

 

1.什么是ref引用，

ref用来辅助开发者在不依赖与jQuery的情况下，获取DOM元素或组件的引用

每个vue中的组件实例上，都包含一个$refs对象，里面存储着对应额DOM元素或组件的引用.

默认情况下,组件的$refs指向一个空对象.

 

好了,现在我又要开始给自己提需求了

假设：在vue中，需要操作DOM了，需要拿到页面上某个DOM元素的引用，此时怎么办？

用户需求:点击按钮,文本字体改色,

dom.style.color=''red"

现在问题来了:

如何拿到dom

 

先来试着看:

 

这里this指向vue实例,我们直接打印this来看看会出现什么:

App.vue组件代码如下:

<template>
  <div id="app">
    <h1>App根组件
    </h1>

    <button @click="showthis">点我展示this</button>
    
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  methods:{
    showthis(){
      //当前App组件的实例对象
      console.log(this);
    }
  },
  components: {
    HelloWorld
  }
}
</script>

 

我们来看看控制台:

 

 可以看见$refs指向一个空对象

 

接下来我们来为h1绑定一个ref元素:

<h1 ref="h1style">App根组件
</h1>

再次来到控制台:

 

 

可以看到h1style的值指向了h1

 

接下来,我们只要$refs.h1style就可以拿到<h1>的dom了(妙啊)

 

现在我们继续在代码中添加:

showthis(){
      //当前App组件的实例对象
      console.log(this);
      this.$refs.h1style.style.color='red';
}

 

来看看效果:

 

 点击按钮成功变红,

 

成功解决了用户需求,(用户竟是我自己)