获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开。
vue2.0的方式操作ref----数组场景
vue2.0
总结：
1.Vue2中可以通过ref直接操作单个DOM和组件 this.$refs.info.innerHTML
2.Vue2中可以批量通过ref操作DOM和组件 this.$refs.fruit[0].innerHTML
操作数据
vue3.0中通过ref操作单个DOM元素
先声明一个变量
return 出来
绑定在模板上
通过定义的变量操作DOM元素
vue3.0里面模板的ref是跟着定义走的（先定义再使用，模板中的名字和定义的名字要一致）先返回再使用
vue2.0里面的使用是跟着模板走（先模板中用，然后根据模板使用ref，获取DOM的ref要和模板的一样）
总结：操作单个DOM或者组件的流程
1.定义一个响应式变量
2.把变量返回给模板使用
3.模板中绑定上述返回的数据
4.可以通过info变量操作DOM或者组件实例
获取v-for遍历的DOM或者组件----ref批量操作元素
1.定义操作DOM的函数----通过形参获取单个DOM元素
定义
ref也可以是函数
模板绑定
结果呈现
总结：ref批量操作元素的流程
1.定义一个操作DOM的函数
2.把该函数绑定到模板上（必须动态绑定）
3.在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中
4.通过上述数组即可操作批量的元素
网友评论