vue中的attribute和property分别是什么呢？

2021年的第一天，准备开始着手学习 Vue 了，主要其实还是为了拓展一下自己的知识面，再加上现在前端找工作，大多数都是要会 Vue 或者 React 的，所以准备趁着假期时间充足，学习一下 Vue 框架。

其实简单来说，Vue 的官方教程已经很明确了，但是毕竟人家是开发语言的，就算再怎么细致，也会有想不到的，就像我们想不到居然有人不会写 for 循环一样。 Vue 的官方文档

Vue 的官方文档写得非常详细了，但是还是有好多不懂的，比如说 Vue 中的 attribute 和 property。其实我也才看到实例部分，这个是边查边写的，主要是记录一下自己的学习状态。

简单来说，attribute 和 property 分别是有关 HTML 中的内容。attribute 是元素标签的属性，而 property 则是元素对象的属性。实际上之所以会引出 attribute 和 property，是因为 Vue 可以直接修改 HTML 网页中的变量，比如说最简单的那个例子：

<div id="s1_on">
  <p>{{message}}</p>
  <input type="button" value="反转" v-on:click="rever">
</div>

var s1_on = new Vue({
  el: "#s1_on",
  data: {
    message: "abcdefg"
  },
  methods: {
    rever: function() {
      this.message = this.message.split("").reverse().join("")
    }
  },
})

通过点击按钮使得本来已经设置的变量进行反转，这就是修改本来的值。当然其实说实在的，还是有更简单的，比如说我们直接在控制台输入创建的 Vue 的名字，后面跟上要修改的属性值，就能进行修改了。比如说我要修改 message，那么我可以直接使用 s1_on.message="asdasdad" 来进行修改。

而我们在 Vue 中对数据进行处理的时候，大多情况下都是默认的对 attribute 进行处理，而如果要对 property 进行处理的话，需要在后面加上 .prop。

• 变量作为 attribute 和 property 的 value 的绑定关系会在用户发生交互更新值后失效
• Vue.js 一般使用 :value 即可让 value 作为 property
• Vue.js 动态模版需要使用 :value.prop 才可让 value 作为 property

好了，今天的介绍就到这里了，如果想要知道更多的 Vue 的内容，推荐直接去 Vue 的官方文档进行查看。当然，如果有什么不会的也可以在评论区留言，我会在看到的第一时间进行回复的。