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

QiuyueZhong 发布于2019-08-01 18:23 / 3377人阅读

摘要：例子与各自的属性和方法修饰符用途默认绑定到节点的上，使用修饰符后，会绑定到注意事项使用获取最新的值设置的自定义属性会在渲染后的标签里显示，不会。修饰符用途通过自定义属性存储变量，避免暴露数据防止污染结构例如标签结构的值标签结构

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

使用例子：

那么，具体的原理和用法是什么呢？这要从 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 对象里以键值对的方式存在。

例子：

打印的 attribute 对象（NamedNodeMap 对象表示元素属性节点的无序集合）：

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 :

// input.attributes.src.value:

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

例子：


// 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.data === undefined
// input.attributes.data === this.inputData


// 标签结构: 
// input.data === this.inputData
// input.attributes.data === undefined

云服务器 GPU云服务器指令的交互详解修饰符 python修饰符 javaclass修饰符

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51695.html

详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

itvincent 2019-08-23 15:38 评论0 收藏0
Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

malakashi 2019-08-30 15:56 评论0 收藏0
Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

Richard_Gao 2019-08-02 14:25 评论0 收藏0