vue .prop修饰符

一、官网概念

.prop - 强制绑定为 DOM property
原本自定义属性默认会绑定在DOM的attributes上，加上prop之后会绑定在property，attributes上就不存在咯

在页面上的一个明显区别就是：不加prop时，DOM渲染后自定义属性和值都是暴露在节点上，而加上之后是隐藏了。这应该也是最主要的一个功能，避免数据暴露！

二、什么是property？什么是attributes？

property：DOM元素的属性（property）值，是DOM对象原生实现的，例如.obj.id obj.class 这样直接获取目标对象的值
attributes：是HTML中的特性（attribute），而这些特性有的未必会被内置为的DOM元素的属性。比如自定义的特性，可以使用obj.getAttribute(‘id’)，的方法来获取目标对象的属性值。

三、写一写以下代码去理解！！！

代码示例

<template><div><h1>修饰符prop</h1><inputid="input"type="foo":myData.prop="888":myData2="666"/></div>
</template>
<script>
export default {mounted: function () {const input = document.getElementById("input");/**myData用了prop修饰符 myData2未使用根据上面的概念 property是可以拿到myData的值，但是拿不到myData2**///获取DOM上propery的值 console.log(input.myData, input.myData2); //888 undefined//获取DOM上attributes上的值(第一种方法)console.log(input.attributes.myData,input.attributes.myData2.value); //undefined 666//获取DOM上attributes上的值(第二种方法)console.log(input.getAttribute('myData'), input.getAttribute('myData2')); //null 666},
};
</script>