vm.$refs及$el

ref 主要有两种用法：

1、ref 加在普通的元素上，获取页面中所有含有ref属性的DOM元素。

使用的时候用this$refs（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this refs（ref值）方法（） 就可以使用了。

每个组件都有$el属性，用于获取该组件内的html元素，在mounted生命周期中才有效。

vm el获取Vue实例关联的DOM元素)，在mounted生命周期中才有效。

比方说上述想获取自定义组件tabControl，并获取它的OffsetTop。

则需要先获取该组件 , 再取OffsetTop。

在组件内设置 属性 ref='一个名称(tabControl2)', 然后通过 this el来获取组件中的DOM元素

打印ref="chatContent"的dom元素

this refsbot$el拿到组件内的html元素

van-field被当做组件对待,一直以为它得到是dom元素

el 是Vue实例的挂载目标。在实例挂载之后，元素可以用 vm$el 访问。

挂载阶段还没开始的时候， $el 属性是不可见的。Vue生命周期mounted阶段， el 被新创建的 vm$el 替换,这个时候Vue实例的挂载目标确定， DOM渲染完毕。在这个Vue实例当中，也就可以使用 vm$el 访问到 el 了。具体参考 Vue文档API

el 的作用，用于指明 Vue 实例的挂载目标。

重点关注：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版

参考 >

和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法

PS: 生命周期钩子 = 生命周期函数 = 生命周期事件

    21创建期间的生命周期方法beforeCreate:

        created:

        beforeMount:

        mounted:

    22运行期间的生命周期方法beforeUpdate:

        updated:

    23销毁期间的生命周期方法beforeDestroy:

        destroyed：

1Vue特殊特性Vue特点: 数据驱动界面更新, 无需 *** 作DOM来更新界面

也就是说Vue不推荐我们直接 *** 作DOM, 但是在企业开发中有时候我们确实需要拿到DOM *** 作DOM

那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM

在Vue中如果想要拿到DOM元素我们可以通过ref来获取2ref使用21在需要获取的元素上添加ref属性 例如: <p ref="mypp">我是段落

22在使用的地方通过 this$refsxxx获取, 例如this$refmyppp

3ref特点ref添加到元素DOM上, 拿到的就是元素DOM

ref添加到组件上, 拿到的就是组件

1Vue渲染组件的两种方式

    11先定义注册组件, 然后在Vue实例中当做标签来使用

    12先定义注册组件, 然后通过Vue实例的render方法来渲染

2两种渲染方法的区别

    11当做标签来渲染, 不会覆盖Vue实例控制区域

    12通过render方法来渲染, 会覆盖Vue实例控制区域

在组件上定义ref="名字",可以通过this$refs名字，，，获取dom元素。。例如下面：

<div id="out">

    <h2>组件 *** 作</h2>

    <hr/>

    <p ref="tit">组件 *** 作组件 *** 作v组件 *** 作组件 *** 作组件 *** 作</p>

    <button @click="tap">点击</button>

</div>

</body>

<script type="text/javascript">

var vm = new Vue({

        el:'#out',

        data:{

        },

methods:{

        tap(){

             consolelog(this$refstitinnerHTML)//获取dom元素把dom元素的内容拿了出来

        }

    }

})

v-model,,,在输入框，单选框，多选框等等，添加v-model=“tit”的时候v-model的值必须在data里面声明；

v-model的值是他们的value值

在 vue2 中，我们通过 ref 为节点添加一个名称，然后用 this$refs['节点名称'] 就可以获取到DOM节点，

例：

在 vue3 中，我们一样可以通过为节点添加一个 ref 名称 ，但是接下来的步骤和 vue2 有些区别

1为节点添加一个 ref 名称

2创建 ref 响应式常量并且与 DOM 节点名称一致 ，且值为 null

3在 mounted 之后通过 常量的 value 即可获取到 DOM 节点

例：

OK，今天就写这么多~！

以上就是关于vm.$refs及$el全部的内容，包括:vm.$refs及$el、ref(null)vue3获取子元素泛型怎么定义、Vue生命周期方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！