vue1.x如何获取 DOM?

答案是使用 v-el

在 vue1.x 中,在一个组件中,为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素。

注意:
因为 HTML 不区分大小写,cameCase 名字比如 v-el:someEl 将转为全小写。可以用 v-el:some-el 设置 this.$els.someEl

示例:

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>

// 调用
this.$els.msg.textContent  // -> "hello"
this.$els.otherMsg.textContent  // -> "world"

在 vue1.x 中还有一个 v-ref 指令,有必要提一下

在 vue1.x 中,在父组件上注册一个子组件的索引,便于直接访问。不需要表达式。必须提供参数 id。可以通过父组件的 $refs 对象访问子组件。

注意:
因为 HTML 不区分大小写,camelCase 名字比如 v-ref:someRef 将全转为小写。可以用 v-ref:some-ref 设置 this.$refs.someRef

示例:

<comp v-ref:child></comp>
<comp v-ref:some-child></comp>

// 使用
this.$refs.child
this.$refs.someChild

如果 v-refv-for 一起用时,ref 是一个数组或对象,包含相应的子组件。

示例:

<comp v-ref:list v-for="item in list"></comp>

// 使用
this.$refs.list  // 值是一个数组

结论:在 vue1.x 中:
v-el 给 DOM 元素注册一个索引,便于通过所属实例的 $els 访问这个元素。
v-ref 子组件注册一个索引,便于直接访问,可以通过父组件的 $refs 对象访问子组件。


vue2.x如何获取 DOM?

那么,在 vue2.x 中,上面两种情况要如何处理呢?

一个 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 comp instance -->
<child-comp ref="child"></child-comp>

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

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


扩展:
这意味着原来
v-el:my-element 将写成这样:ref="myElement"
v-ref:my-component 变成了这样:ref="myComponent"
绑定在一般元素上时,ref 指 DOM 元素,绑定在组件上时,ref 为一组件实例。

因为 v-ref 不再是一个指令而是一个特殊的属性,它也可以被动态定义了。这样和 v-for 结合的时候是很有用的:

<p v-for="item in items" v-bind:ref="'item' + item.id"></p>

以前 v-el / v-refv-for 一起使用将产生一个 DOM 数组或者组件数组,因为没法给每个元素一个特定名字。现在你还仍然可以这样做,给每个元素一个同样的 ref

<p v-for="item in items" ref="items"></p>

和 1.x 中 不同,$refs 不是响应的,因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能是它们响应。

另一方面,设计 $refs 主要是提供给 js 程序访问的,并不建议在模版中过度依赖使用它。因为这意味着在实例之外去访问实例状态,未被了 Vue 数据驱动的思想。

---------------------------(正文完)------------------------------------
一个 Vue 的学习交流群,想进来面基的,可以点击这个logoVue学习交流,或者手动search群号:685486827


写在最后: 约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

Logo

前往低代码交流专区

更多推荐