zoukankan      html  css  js  c++  java
  • 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
    
     
  • 相关阅读:
    Codeforces 1166 D. Cute Sequences 构造
    ZOJ 4103 浙江省第16届大学生程序设计竞赛 D题 Traveler 构造
    ZOJ 4100 浙江省第16届大学生程序设计竞赛 A题 Vertices in the Pocket 线段树+并查集
    若干结论和定理(持续更新)
    三类经典贪心问题
    2018 ICPC Asia Xuzhou Regional M. Rikka with Illuminations
    Educational Codeforces Round 99
    2018 CCPC-Final K
    2020浙江省赛 Huge Clouds
    BZOJ1030 文本生成器(AC自动机+DP)
  • 原文地址:https://www.cnblogs.com/cfsxgogogo/p/12573963.html
Copyright © 2011-2022 走看看