重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
Vue中的JSX如何使用
今天小编给大家分享一下Vue中的JSX如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
为汉阳等地区用户提供了全套网页设计制作服务，及汉阳网站建设行业解决方案。主营业务为做网站、成都网站制作、汉阳网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
JSX简介
JSX是一种Javascript的语法扩展，即具备了Javascript的全部功能，同时又兼具html的语义化和直观性。它可以让我们在JS中写模板语法：
const el =
Vue 2;
上面这段代码既不是 HTML 也不是字符串，被称之为 JSX，是 JavaScript 的扩展语法。JSX 可能会使人联想到模板语法，但是它具备 Javascript 的完全编程能力。
什么时候使用JSX
当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：
这里用template模板并不是最好的选择，在每一个级别的标题中重复书写了部分代码，不够简洁优雅。如果尝试用 JSX 来写，代码就会变得简单很多：
const App = {
render() {
const tag = `h${this.level}`
return
或者如果你写了很多 render 函数，可能会觉得下面这样的代码写起来很痛苦：
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
特别是对应的模板如此简单的情况下：
这时候就可以在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上：
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render: function (h) {
return (
在开发过程中，经常会用到消息提示组件Message，可能的一种写法是这样的：
Message.alert({
messge: '确定要删除?',
type: 'warning'
})
但是希望message可以自定义一些样式，这时候你可能就需要让Message.alert支持JSX了（当然也可以使用插槽/html等方式解决）
Message.alert({
messge: 确定要删除,
type: 'warning'
})
此外，一个 .vue 文件里面只能写一个组件，这个在一些场景下可能不太方便，很多时候写一个页面的时候其实可能会需要把一些小的节点片段拆分到小组件里面进行复用，这些小组件其实写个简单的函数组件就能搞定了。平时可能会由于SFC的限制让我们习惯于全部写在一个文件里，但不得不说可以尝试一下这种方式。
// 一个文件写多个组件
const Input = (props) =>
比如这里封装了一个 Input 组件，我们希望同时导出 Password 组件和 Textarea 组件来方便用户根据实际需求使用，而这两个组件本身内部就是用的 Input 组件，只是定制了一些 props。在 JSX 里面就很方便，写个简单的函数组件基本上就够用了，通过 interface 来声明 props 就好了。但是如果是用模板来写，可能就要给拆成三个文件，或许还要再加一个 index.js 的入口文件来导出三个组件。
由于 JSX 的本质就是 JavaScript，所以它具有 JavaScript 的完全编程能力。再举个例子，我们需要通过一段逻辑来对一组 DOM 节点做一次 reverse，如果在模板里面写，那估计要写两段代码。
虽然这个例子可能不太常见，但是不得不承认，在一些场景下，JSX 还是要比模板写起来更加顺手。
从 Vue 2 开始，template 在运行之前，会被编译成 JavaScript 的 render function。
.jpg)
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，就需要使用 render 函数，它比 template 更加灵活。这些 render function 在运行时阶段，就是传说中的 Virtual DOM。
.jpg)
JSX在Vue2中的基本使用
配置
在 Vue 2 中，JSX 的编译需要依赖 @vue/babel-preset-jsx 和 @vue/babel-helper-vue-jsx-merge-props 这两个包。前面这个包来负责编译 JSX 的语法，后面的包用来引入运行时的 mergeProps 函数。
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
并在babel.config.js中添加配置：
module.exports = {
presets: ['@vue/babel-preset-jsx'],
}
文本插值
模板代码里文本插值默认是用双大括号:
{{ msg }}
在JSX中则需要使用单大括号：
const name = 'Vue'
const element =
Hello, { name }
和模板语法中的文本插值一样，大括号内支持任何有效的JS表达式，比如：2 + 2，user.firstName，formatName(user)等。
条件与循环渲染
在模板代码里面我们通过v-for去遍历元素，通过v-if去判断是否渲染元素，在JSX中，对于v-for，可以使用for循环或者array.map来代替，对于v-if，可以使用if-else语句，三元表达式等来代替
使用if-else语句
const element = (name) => {
if (name) {
return Hello, { name }
} else {
return Hello, Stranger
}
}
使用三元表达式
const element = icon ?
使用数组的map方法
const list = ['java', 'c++', 'javascript', 'c#', 'php']
return (
{list.map(item => {
return
)
属性绑定
在模板代码中，一般通过 v-bind:prop="value"或:prop="value"来给组件绑定属性，在JSX里面就不能继续使用v-bind指令了，而是通过单大括号的形式进行绑定：
const href = 'https://xxx.com'
const element =
const properties = {a: 1, b: 2}
此外，模板代码中能通过批量绑定标签属性。
在JSX中也有相应的替换方案：。
class绑定同样也是使用单大括号的形式
const element =
style绑定需要使用双大括号
const width = '100px'
const element =
事件绑定
在模板代码中通过v-on指令监听事件，在JSX中通过on + 事件名称的大驼峰写法来监听，且绑定事件也是用大括号，比如click事件要写成onClick，mouseenter事件要写成onMouseenter
const confirm = () => {
// 确认提交
}
有时候我们希望可以监听一个组件根元素上面的原生事件，这时候会用到.native修饰符，但是在JSX中同样也不能使用，不过也有替代方案，监听原生事件的规则与普通事件是一样的，只需要将前面的on替换为nativeOn，如下
render() {
// 监听下拉框根元素的click事件
return
除了上面的监听事件的方式之外，我们还可以使用对象的方式去监听事件
render() {
return (
对于 .passive、.capture 和 .once 这些事件修饰符，Vue 提供了相应的前缀可以用于 on：
.jpg)
例如：
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}
对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：
v-show与v-model
大多数指令并不能在JSX中使用，对于原生指令，只有v-show是支持的。
而v-model是Vue提供的一个语法糖，它本质上是由 value属性（默认） + input事件(默认)组成的，所以，在JSX中，我们便可以回归本质，通过传递value属性并监听input事件来手动实现数据的双向绑定：
export default {
data() {
return {
name: ''
}
},
methods: {
// 监听 onInput 事件进行赋值操作
handleInput(e) {
this.name = e.target.value
}
},
render() {
// 传递 value 属性 并监听 onInput事件
return
此外，在脚手架vue-cli4中，已经默认集成了对v-model的支持，可以直接使用，如果项目比较老，也可以安装插件babel-plugin-jsx-v-model来进行支持。
同样的，在JSX中，对于.sync也需要用属性+事件来实现，如下代码所示：
export default {
methods: {
handleChangeVisible(value) {
this.visible = value
}
},
render() {
return (
插槽
（1）默认插槽：
使用element-ui的Dialog时，弹框内容就使用了默认插槽，在JSX中使用默认插槽的用法与普通插槽的用法基本是一致的，如下
render() {
return (
这里是弹框内容
)
}
自定义默认插槽：
在Vue的实例this上面有一个属性$slots,这个上面就挂载了一个这个组件内部的所有插槽，使用this.$slots.default就可以将默认插槽加入到组件内部
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
render() {
return (
