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>
    <input
      id="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>