vue2.x 中如何获取 DOM

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-ref 和 v-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-ref 和 v-for 一起使用将产生一个 DOM 数组或者组件数组，因为没法给每个元素一个特定名字。现在你还仍然可以这样做，给每个元素一个同样的 ref ：

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

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

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

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

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

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

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