13-Vue特殊属性-ref

ref ：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

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

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

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

在Vue中如果想要拿到DOM元素我们可以通过ref来获取

例如: <p ref="myP">我是段落</p>

例如 this$refmyP

refs : 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例

注意： refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs 结语

在讲ref特点之前我们先来回顾， 原生语法获取元素的特点

例如： 通过原生的语法 documentquerySelector 获取到的都是被渲染之后DOM元素， 也就是原生的元素

在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取

拿到了组件后, 还可以访问组件中的数据

请参照 css3 伪类选择器；

:first-child

选择某个元素的第一个子元素（IE6不支持）

:last-child

选择某个元素的最后一个子元素

:first-of-type

[CSS3]选择一个上级元素下的第一个同类子元素

:last-of-type

[CSS3]选择一个上级元素的最后一个同类子元素

:only-child

[CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）

:only-of-type

[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）

:nth-child()

[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）

:nth-last-child()

[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）

:nth-of-type()

[CSS3]选择指定的元素（IE6-8不支持）

:nth-last-of-type()

[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

<form name="form1" action=">

一、问题引入

原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用 documentgetElementById('id') 改为 ref 获取元素的形式。

单独创建一个 vue 组件，通过绑定传值，触发页面变化从而触发 beforeUpdate 。

然后发现 beforeUpdate() 中根本获取不到此元素，用原生js获取也不行。

三、解决

1、 beforeUpdate() 生命周期函数中，在获取元素语句外套用 this$nextTick(function(){}) 。（ mounted 无效，原因待查明）

官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。

为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 thisrefs[refName] 就会返回这个真实的 DOM 节点。

var MyComponent = ReactcreateClass({

handleClick: function() {

thisrefsmyTextInputfocus();

},

render: function() {

return (

<div>

<input type="text" ref="myTextInput" />

<input type="button" value="Focus the text input" onClick={thishandleClick} />

</div>

);

}

});

ReactDOMrender(

<MyComponent />,

documentgetElementById('example')

);

DOM全拼为DocumentObjectModel（文档对象模型）

是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

用来获取内容区的大小

PS：返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em

之类，它还是会返回px 的大小。(CSS 获取的话，是照着你设置的样式获取)。

1增加边框，无变化，为200；

2增加外边距，无变化，为200；

3增加滚动条，最终值等于原本大小减去滚动条的大小，为184；

4增加内边距，最终值等于原本大小加上内边距的大小，为220；

PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，他会得到

计算后的宽度和高度。

1增加边框，最终值会等于原本大小加上边框大小，为220；

2增加内边距，最终值会等于原本大小加上内边距大小，为220；

3增加外边据，无变化；

4增加滚动条，无变化，不会减小；

PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，它会得到

计算后的宽度和高度。

1增加边框，不同浏览器有不同解释：

a) Firefox 和Opera 浏览器会增加边框的大小，220 x 220

b) IE、Chrome 和Safari 浏览器会忽略边框大小，200 x 200

c) IE 浏览器只显示它本来内容的高度，200 x 18

2增加内边距，最终值会等于原本大小加上内边距大小，220 x 220，IE 为220 x 38

3增加滚动条，最终值会等于原本大小减去滚动条大小，184 x 184，IE 为184 x 18

4增加外边据，无变化。

5增加内容溢出，Firefox、Chrome 和IE 获取实际内容高度，Opera 比前三个浏览

器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。

以上就是关于13-Vue特殊属性-ref全部的内容，包括:13-Vue特殊属性-ref、css中如何获取dom元素、javascript中dom 如何获取表单字段数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！