Vue中jsx不完全应用指南小结

然后在Vue的模板语法中是不区分DOM属性和HTML属性的，例如：

<template>
 <div>
 <div>输入的值：{{ title }}</div>
 <input type="text" value="我是DOM属性值" v-model="title" @input="logTitle" />
 </div>
</template>
<script>
export default {
 data() {
 return {
  title: ''
 }
 },
 methods: {
 logTitle(e) {
  // 输出DOM属性
  console.log(e.target.value)
  // 输出HTML属性
  console.log(e.target.getAttribue('value'))
 }
 }
}
</script>

运行示例可以看到input的初始值被设置为了“我是DOM属性值”，当我们在输入框中添加或者删除文字时，HTML属性始终没有变化，而绑定的DOM值一值在变动。然后再看一下在jsx中的实现：

<div>输入值：{ this.title }</div>
<input type="text" value="我是DOM属性" v-model={this.title} onInput={this.logTitle} />

同样运行后会发现在jsx写法中并没有直接将HTML属性初始化为DOM属性值，即输入框中当前值为空字符串，这符合预期的行为。

此外在模板语法中是无法区分HTML属性和DOM属性命名一样的场景，但是在jsx中可以很好的区分：

<Demo title="我是组件属性" domPropsTitle="我是DOM属性" />

结果会就是在HMTL中显示title=”我是DOM属性，而”我是组件属性”传递给了组件。

在React中CSS的样式写义在jsx中的语法是以className=”xx”的形式，而在Vue的jsx中可以直接写成class=”xx”。实际上由于class是Js的保留字，因此在DOM中其属性名为className而在HTML属性中为class，我们可以在Vue中这样写，经过Babel转译后得到正确的样式类名：

<div domPropsClassName="mt__xs"></div>

注意：如果同时写了class=”xx” domPropsClassName=”yy”那么后者的优先级较高，和位置无关。所以尽量还是采用class的写法。

有使用过Bootstrap经验的可能会注意到它里面包含了很多ARIA属性，这些属性并不属于DOM，在jsx中可以通过attrsXX或者直接aria-xx的方式来添加:

<label aria-label="title"></label>
<label attrsAria-label="title"></label>

但是上面的换成domPropsAria-label就没有任何效果。

注意：在jsx中所有DOM属性(Property)语法为domPropsXx, HTML特性(Attribute)语法为attrsXx。更多的时候建议还是少使用，或者说合理使用。

在jsx中还可以使用混用的写法，例如在组件中写了<Demo title=”demo” />，还可以定义一个属性对象，然后使用{…props}的方式写在一起，这个时候就会出现属性合并的问题，同样的事件多个地方声明事件处理函数，都会触发。