vue 2.x 的 v-bind 指令的 .prop 事件修饰符详解

将臣

vue 官方文档对 .prop 修饰符的解释是:

clipboard.png

使用例子:

clipboard.png

那么,具体的原理和用法是什么呢?这要从 html 的 DOM node 说起。


在 html 标签里,我们可以定义各种 attribute。在浏览器解析 DOM 树渲染页面后,每个标签都会生成一个对应的 DOM 节点。节点是一个对象,所以会包含一些 properties,attributes 也是其中一个property。

定义

Property:节点对象在内存中存储的属性,可以访问和设置。
Attribute:节点对象的其中一个属性( property ),值是一个对象,可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取,通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。

例子:

<input id="input" type="foo" value="11" class="class"></input>

打印的 attribute 对象(NamedNodeMap 对象表示元素属性节点的无序集合):

attribute


Property 与 Attribute 的差别

1、Attribute 对象包含标签里定义的所有属性,Property 只包含 HTML 标准的属性,不包含自定义属性(eg: data-xxx)。

2、Attribute 里的属性的值是 html 标签上原始的值,除非使用 setAttribute() 方法更改,不会根据用户输入而改变(eg: input 标签)。Property 在页面初始化时会映射并创建 Attribute 对象里的标准属性,从而节点对象能以对象的访问方式获取标准属性。在用户输入内容修改了原始值后,Property 里对应的属性会随之变化。即,查看原始值使用 Attribute,查看最新值使用 Property。(input 的 value 值也可以通过 input.defaultValue 查看原始值)

3、Property 与 Attribute 的某些属性名称是完全一样的,例如 ref, id ;某些名称有些轻微差别,例如 Attribute 里的 for、class 属性映射出来对应 Property 里的 htmlFor、className;某些属性名称一样,但是属性值会有限制或者修改,不会完全一样,相关的属性有 src, href, disabled, multiple 等。

例子:

<input src="test.html"></input>

// input.src :
图片描述
// input.attributes.src.value:
图片描述

4、由于 Property 不能读取自定义属性,如果标签在开始的时候对标准属性定义了非标准范围内的值,Property 会默认选择一个标准值代替,导致与 Attribute 里的属性不完全相等。

例子:

<input id="input" type="foo"></input>
// input.type === 'text'
// input.attributes.type === 'foo'

Property 与 Attribute 各自的属性和方法

Property: http://www.w3school.com.cn/js...
Attributes: http://www.w3school.com.cn/js...


.prop 修饰符用途

v-bind 默认绑定到 DOM 节点的 attribute 上,使用 .prop 修饰符后,会绑定到 property

注意事项:

  • 使用 property 获取最新的值;
  • attribute 设置的自定义属性会在渲染后的 HTML 标签里显示,property 不会。

修饰符用途:

通过自定义属性存储变量,避免暴露数据
防止污染 HTML 结构

例如:

<input id="input" type="foo" value="11" :data="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11" data="inputData 的值"></input>
// input.data === undefined
// input.attributes.data === this.inputData

<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11"></input>
// input.data === this.inputData
// input.attributes.data === undefined
阅读 8.4k

学习、分享技术

2.3k 声望
97 粉丝
0 条评论

学习、分享技术

2.3k 声望
97 粉丝
文章目录
宣传栏