vue中ref标签属性和$ref的关系,

javascript原生语法和jquery都是属于操作DOM节点元素,去实现功能的.

Vue给我们提供了一个专门用来获取DOM节点的方法 ，使用元素的ref属性，使用起来非常方便

(这只是用于偶尔vue需要操作节点时候才使用)

vue的ref属性
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

vm.$refs

一个对象，持有 注册过 ref 特性 的所有 DOM 元素和组件实例。

以上是官方文档里面的内容,总结为下面的:

1. 给要获取的元素节点添加ref属性，使用有意义的驼峰命名
2. 通过vue实例.$refs.属性名即可获取标记的元素，我们在mounted钩子函数中调用可以直接使用this指向当前vue实例，这个才是vue推荐的元素获取方式
3. 如果ref重名后面的会把前面的覆盖
   4.元素使用v-for,返回dom节点数组

下面举例验证

<div id="app">
        <div>
            <h2 ref="name1">这是name1节点元素</h2>
            <p ref="name2">这是name2节点元素</p>
        </div>
 </div>

 mounted() {
                console.log(this);   //vue实例对象
                console.log(this.$refs.name1);   //上面的h2标签元素
                console.log(this.$refs.name1.textContent);  //标签内容
                console.log(this.$refs.name2);  //上面的p标签元素                
            },

如果ref值重复时,会打印出哪个DOM节点? 根据上面的知识点,我们知道,后面的会覆盖前面的,下面验证一下:

     <div id="app">       
        <h2 ref="name1">这是name1节点元素</h2>
        <p ref="name2">这是name2节点元素</p>
       
   		 <span ref="name1">这是ref的name1值重复的节点元素</span><br>
   		 <i ref="name2">这是ref的name2值重复的节点元素</i><br>
	  </div>	  

一样在代码中执行以下命令

mounted() {
                console.log(this);   //vue实例对象
                console.log(this.$refs.name1);   //上面的h2标签元素
                console.log(this.$refs.name1.textContent);  //标签内容
                console.log(this.$refs.name2);  //上面的p标签元素                
            },

打印结果是span和i标签元素,覆盖了前面的h2和p标签

如果把ref值设置ul标签

<ul  ref="veg">
   <li>水果1</li>
   <li>水果2</li>
   <li>水果3</li>
</ul>

执行console.log(this.$refs.veg);

直接打印出整个DOM对象

当v-for用于元素和组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

 <div id="app">
        <ul>
            <li ref="fruits" v-for="(item,index) in arr" :key="index">水果{{item}}</li>
        </ul>
   </div>

 const app = new Vue({
            el: '#app',
            mounted() {               
                console.log(this.$refs.fruits); //打印的是li标签数组
                console.log(this.$refs.fruits[1].textContent);
            },
            data: {
                arr: [1, 2, 3, 4, 5],
            },
        });

运行 console.log(this.$refs.fruits);以后得到的数组

以上就是本人关于DOM节点 的总结 组件的下次再总结