Vue2 ref 引用

jQuery很强 简化了开发人员对DOM的操作；

vue的优势：MVVM 在vue中，开发人员不需要操作DOM。只需要把数据维护好即可!（数据驱动视图）；

结论：在vue项目中，强烈不建议大家安装和使用jQuery ! ! !

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

1.什么是 ref 引用？

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

每个vue的组件实例上，都包含一个$ref对象，里面存储着对应的DOM元素或组件的引用。默认情况下，

组件的$refs指向一个空对象。

2.使用 ref 引用DOM元素

<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showThis">打印this</button>
    <hr ref='myh1'>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods:{
    showThis(){
        console.log(this.$refs.myh1);
        this.$refs.myh1.style.color='green'
    }
  }
};
</script>

<style scoped lang='less'>
.app-container {
  padding: 1px 20px 20px;
  background: pink;
}
</style>

3.使用 ref 引用组件的实例

<!-- 使用ref属性,为对应的"组件"添加引用名称 -->
<my-counter ref="counterRef"></my-counter>
<button @click="getRef">获取$refs引用</button>

methods:{
    getRef(){
        //通过this.$refs.引用的名称 可以引用组件的实例
        console.log(this.$refs.counterRef);
        //引用到组件的实例之后,就可以调用组件上的methods方法
        this.$refs.counterRef.add()
    }
}

4.this.$nextTick(cb)方法

        组件的$nextTick(cb)方法，会把cb回调推迟到下一个DOM更新周期之后执行。通俗的理解是：等组件的DOM更新完成之后，在执行cb回调函数。从而能保证cb回调函数可以操作到最新的DOM元素。