vue2.x 中如何获取 DOM
来源:互联网 发布:java 对url encode 编辑:程序博客网 时间:2024/06/15 09:53
- vue1x如何获取 DOM
- vue2x如何获取 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.childthis.$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 数据驱动的思想。
- vue2.x 中如何获取 DOM
- watir中如何获取dom属性?
- 如何在javascript中获取dom对象
- 深入Vue2.x的虚拟DOM diff原理
- 如何创建Vue2.x+webpack项目
- vue---vue2.x中父组件如何触发子组件事件方法?
- vue---vue2.x中如何异步加载路由组件,webpack+vue实现组件懒加载
- vue1和vue2获取dom元素的方法
- vue---vue中如何操作dom获取节点?.vue组件中通过mounted获取节点操作
- 获取Dom元素的X/Y坐标
- VUE2.X 基础
- vue2.x的初始化
- vue2.x实例生命周期
- Vue2.x EDU学院
- vue2.x 项目搭建
- JavaScript DOM 中获取chilsnodes
- vue2.0中如何调用腾讯地图api?
- 10、vue2.0中如何使用better-scroll
- 六数码 关于EOF
- 顺序表
- Error:Could not run build action using Gradle installation解决办法
- Online Hard Example Mining
- 1-3 beanstalkd参数
- vue2.x 中如何获取 DOM
- Leetcode 368 Largest Divisible Subset
- 链表
- SSIS DSN contains an architecture mismatch between the Driver and Application
- 利用nodejs制作爬虫获取数据的案例
- LayoutInflater源码最简解读 带你轻松领略源代码之美
- string初始化
- 移植Linux 3.4.2 内核
- jsp/servlet 回顾学习