xml中else if写法_如何在Vue中使用 JSX 语法？

在Vue中使用JSX语法。可以让我们回到更接近模板的语法上。

JSX == JS + XML(html)

1、插值表达式

2、指令

在JSX中，一些指令并不存在，所以我们可以换一种方式来处理。

1）v-text

2）v-html

3）v-show

jsx支持v-show指令。

4）v-if

使用v-if、v-else-if 与 v-else配合。

5）v-for

6）v-on

- 元素监听事件

- 组件监听事件

- 监听事件传参

7）v-bind

在JSX中可以直接使用class="xx"来指定样式类，内联样式可以直接写成style="xxx"。

8）v-model

有相应的插件 支持 v-model，所以可以直接使用。

9）v-slot

10）自定义指令

第一种写法：

第二种写法：

11）v-pre、v-cloak、v-once

不常用，无替代方案。

3、Ref 引用

当遍历元素或组件时，如：

会发现从 this.$http://refs.xxx 中获取的并不是期望的数组值，此时就需要将refInFor属性设置为true了。

4、过滤器

正常使用过滤器:

在jsx中使用过滤器:

5、插槽

模板写法：

JSX写法：

- 作用域插槽：

模板写法：

JSX写法：