这期内容当中小编将会给大家带来有关怎么在vue中使用jsx语句，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
创新互联主打移动网站、成都做网站、成都网站设计、成都外贸网站建设、网站改版、网络推广、网站维护、国际域名空间、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。
什么是JSX?
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.
我为什么要在vue中用JSX?
想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,废话不多说,先来用代码来看下两者的区别吧.
ps:vue中大部分场景是不需要用render函数的,还是用模板更简洁直观.
使用template
// item.vue
item组件中就是接收父组件传过来的id值来显示不同的h标签,v-if可以说用到了"极致",而且写了很多个冗余的slot
使用render函数和jsx
// item.vue
再加上父组件来控制props的值。父组件不做对比还用传统的template格式，
// list.vue
Hello World
下一个
运行后页面就渲染出了h2 or h3 or h4标签，同时slot也只有一个，点击切换props的值，也会显示不同的h标签。第二种写法虽然不是很直接，但是省去了很多冗余代码，页面一下清爽了很多。
没了v-if,v-for,v-model怎么办？
不要着急，这些指令只是黑魔法，用js很容易实现。
v-if
render(){
return (
{this.show?'你帅':'你丑'}
)
}写三元表达式只能写简单的，那么复杂的还得用if/else
render(){
let ifText
if(this.show){
ifText=你帅
}else{
ifText=你丑
}
return (
{ifText}
)
}v-for
data(){
return{
show:false,
list:[1,2,3,4]
}
},
render(){
return (
{this.list.map((v)=>{
return
{v}
})}
在jsx中｛｝中间是没办法写if/for语句的只能写表达式，所以就用map来当循环，用三元表达式来当判断了
v-model
最近在帮公司面试招人发现v-model很多人都不知道语法糖是什么？然后有些人说我可以用原生js实现，但是他们竟然不知道在vue中怎么实现，好吧，两个点：传值和监听事件改变值。
怎么用自定义组件？
很简单，只需要导入进来，不用再在components属性声明了，直接写在jsx中比如
事件，class,style,ref等等怎么绑定？
来看下面的写法
render (h) {
return (
)
}上面有个地方需要注意，当给自定义组件绑定事件时用nativeOnClick,而模板格式是用
@click.native，另外当用到给函数式组件绑定事件时就有点小坑了下面说。
JSX中的函数式组件
函数式组件无状态，无this实例，下面是vue文档中提到的一段话：
因为函数式组件只是一个函数，所以渲染开销也低很多。然而，对持久化实例的缺乏也意味着函数式组件不会出现在 Vue devtools 的组件树里。
我个人理解因为没了状态(data)，少了很多响应式的处理，还有生命周期等过程会提高速度和减少内存占用吧？
函数式组件也可以在模板格式中用只需要这样
那jsx中的函数式组件呢？也很简单只需增加配置functional: true就可以了
那函数式组件没有了this 实例怎么绑定事件怎么获取props呢？
组件需要的一切都是通过上下文传递，包括：
上面我只列举了部分属性，这些是非函数式组件的东西，对于函数式组件
vue 增加了context对象，需要作为render(h,context) 第二个参数传入，this.$slots.default更新为context.children props原本是直接挂在this上的，现在变为context.props挂在了context.props上。this.data变为了context.data
需要注意的是对于函数式组件，没有被定义为prop的特性不会自动添加到组件的根元素上,意思就是需要我们手动添加到组件根元素了，看个例子吧
//父组件
...省略无关代码
render(){
return (
)
}
//Item.vue组件
export default {
functional:true,
name: "item",
render(h,context){
return (
{context.props.data}
