JSX是JavaScript的语法扩展。JSX = JavaScript + XML，即，在JavaScript中写XML。由于JSX的特征，他具有JavaScript的灵活性，同时具有HTML的语义和直觉。
XML学习地址（可以免费学习和不学习，您可以理解）：https：//www.w3school.com.cn/xml/index.asp.asp
使用模板的缺点：https：//www.mk2048.com/blog/blog/blog_h1c2c2c22ihihaa.html
有时，我们使用渲染函数来抽象组件。渲染功能不是很清楚。请参阅官方文档，渲染功能有时很痛苦，因此只有一种理解。
渲染功能：https：//cn.vuejs.s.org/v2/guide/render-function.html＃％E5％9F％BA％E7％A1％80
相应的模板如下：
您会看到写作有多困难，此时JSX开始了。在VUE中使用JSX，您需要使用Babel插件。它使我们能够返回到模板附近的语法。接下来，让我们开始在Vue中编写JSX。
安装依赖性：
配置.babelrc（babel.config.js）：
配置后，我们开始项目：
演示结构图：
在配置了babel.config.js之后，我们更改了app.vue介绍的helloworld.vue，to helloworld.js，并在helloworld.js和脚本标签中删除了模板和样式。
这是在VUE中显示一些基本内容。
纯文本，动态内容，标签使用，自定义组件，样式和类
外部：创建组件的方法可以了解更多有关const.IT创建的按钮Counter组件的信息。
如果您这样看，在模板中写作没有太大的区别，标签不应该更改。（包括动态风格）
让我们将H3的课程绑定到Colorrard：
当发现直接编写审查制度时，可以直接审查类绑定：
那么如何写课堂风格？毕竟，在JS文件中写下
看来这不好！
1.全球风格
app.vue
2.介绍CSS文件或与样式装载机合作，以介绍较少的SASS和Stylus文件
注意：所有人都需要安装相应的加载程序。由于它们都是JSX，因此我们使用样式来解释它。我相信每个人和Sass都会拥有它。Stylus是CSS编译器，被省略{}省略并收紧以识别。（我不想使用样式跳过，样式可以是休闲的）
各种样式安装请参见：https：//www.cnblogs.com/jimc/p/10265198.html
安装完成后，创建一个新的helloworld.styl，然后引入它。
风格的使用：https：//www.jianshu.com/p/5fb15984f22d
Stylus官方网站：https：//stylus.zcopy.site/
请参阅控制台手写笔错误：https：//blog.csdn.net/csdn_zhoushengnan/article/details/1094483699
VSCODE编辑错误：安装编辑手写笔法语法插件，然后重新启动
影响：
行中的样式：
动态绑定类和样式
属性绑定与普通HTML相同
毕竟，类和样式都是HTML属性。我相信每个人都知道这一点。
影响：
通用说明
模板常用说明：V-HTML |v-Text，v-if，v-for，v-modal等。在JSX中不可用，因此您需要写一些方法，请参阅下面。
我已经构建了一个说明。
V-HTML |V文本
在JSX中，如果要设置DOM元素的InnerHTML，请使用DOMPROPS。
尽管V-Text具有DompropsInnertext，但这不是必需的。
v-if
简单而复杂。
简单的：
复杂的：
v-tor
地图方法与React中一样用于实现。
V-Modal
注意：在新版本的VUE-CLI4中，默认情况下已集成了JSX语法的支持，并且可以直接使用
如果您的项目年龄较大，您也可以安装插件Babel-Plugin-JSX-V模型以进行支持
我是Cli4，让我验证：
验证结果：（通过）
当然，您不想执行上述两种方法，也可以手动支持它，涉及监视事件，请低头看。
监视事件和事件修饰符
监视事件考虑使用OnChange，OnClick等。应该指出的是，OnClick = {this.removephone（params）}不能使用参数的数量，以便每次渲染时，您都会自动执行该方法。
上述监控事件用于实现V模式
此外，您还可以使用对象监视事件：
其他事件的使用是添加。
事件修改
像说明一样，除了个人外，大多数事件修改都不能在JSX中使用。目前，您必须习惯它，并且必须有其他选择。
。
。
.self：只有当事件是从侦听器本身限制的元素触发时，才会触发回调。利用以下条件来判断
.NTER和键代码：当特定键触发时触发回调
除了上面的这些修饰符外，尤其是为了照顾我们的简历，我仍然进行了一些优化。对于.once，.capture，.passive，.capture.once。
如果存在参数传递方法，则不能直接在页面中触发，我需要在以下内容中写下：
使用范围（与第三党UI组件合并）
不仅在渲染函数中使用JSX，而且在方法中还返回JSX，然后在渲染函数中调用此方法。还可以直接使用UI组件（例如ElementUI）。
JSX也可以直接分配给变量，例如使用ElementUI的El-Dialog。
插槽是在子组件中用于父组件的占位符。插槽分为默认插槽，名称插槽和域插槽。在下面，我将为您带来用法以及如何在JSX中使用每个用法。定义插槽。
默认插槽
使用默认插槽
使用元素-UI的对话框时，炸弹框架的内容使用默认插槽。JSX中默认插槽的使用基本上与普通插槽的使用相同。如以下代码所示：
自定义默认插槽
VUE的实例上有一个属性插槽，使用this.slots安装在该组件内的所有插槽上。
使用：
此外，Vshow等同于V-Show，这并不意味着其他任何东西都可以！
名称插槽
有时，我们需要多个名称插槽组件的插槽。目前，我们需要为每个插槽命名一个名称。例如，元素-UI炸弹框架可以定义底部按钮区域的内容。
自定义名称插槽
当提到上一节中默认插槽的定义时，提到了插槽。对于默认插槽，请使用this.slots，然后使用this.slots.default for默认插槽。
使用：
范围插槽
使用域插槽
有时，允许插槽内容的数据只能在子组件中使用。目前，有必要使用字段插槽。在JSX中，由于没有V-Slot指令，因此使用了字段插槽的字段插槽。它与模板代码的方式不同。例如，在Element-UI中，我们可以自定义该内容当我们使用El-Table时形成单元。目前，我们需要使用示波器插槽。
定制领域教师
在子组件中，插槽插槽的名称通过{this。当父组件标记子组件标签时，插入的位置是通过SpopeedSlots值指定的，并且用户值是通过恢复功能获得的获得子组件
注意：域插槽写在子组件标签中，类似于属性。
新创建了域slot.js的角色
影响：
功能组件是无状态和非代表组件。有关详细信息，请参阅官方网站说明。创建一个新的functionalComponent.js文件。内容如下：
在Helloworld.js中使用：
影响：
https://codechina.csdn.net/qq_32442973/vue2-jsx-demo.git
无论您是使用VUE2的JSX还是VUE3的JSX，VUE3之间都没有本质上的区别。毕竟，VUE3与VUE2兼容；如果您真的想学习VUE3的JSX，建议您学习学习Vue2并再次学习；建议在VUE中使用所有组件和页面中使用JSX。两者需要权衡优势和缺点；同时，不必担心JSX和模板的相互嵌套。两者可以彼此嵌套。
参考：
https://www.cnblogs.com/ainyi/p/13324222.html
https://www.jb51.net/article/205764.htm
https://cn.vuejs.org/v2/guide/render-function.html# event
https://www.cnblogs.com/htoooth/p/6973238.html
https://www.jiashu.com/p/84b708c80598
https://cloud.tencent.com/developer/article/1704608
作者：纸机。