这篇文章主要介绍了vue3中如何使用JSX的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3中如何使用JSX文章都会有所收获，下面我们一起来看看吧。在绝大多数情况下，Vue 推荐使用模板语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。Vue 提供了一个 h() 函数用于创建 vnodes虚拟dom。如下示例：
import{h}from'vue'
constvnode=h(
'div',//type
{id:'foo',class:'bar'},//props
[
/*children*/
]
)
在组件中如何使用呢？
在组件中如何使用呢？
之前当组合式 API 与模板一起使用时，setup() 钩子的返回值是用于暴露数据给模板。但是当使用h()的时候，setup() 钩子返回的是渲染函数：
import{ref,h}from'vue'
exportdefault{
props:{
/*...*/
},
setup(props){
constcount=ref(1)
//返回渲染函数
return()=>h('div',props.msg+count.value)
}
}
手写的 h 函数，可以处理动态性更高的场景。但是如果是复杂的场景，h 函数写起来就显得非常繁琐，需要自己把所有的属性都转变成对象。并且组件嵌套的时候，对象也会变得非常复杂。不过，因为 h 函数也是返回虚拟 DOM 的，所以有没有更方便的方式去写 h 函数呢？答案是肯定的，这个方式就是 JSX。
手写的 h 函数，可以处理动态性更高的场景。但是如果是复杂的场景，h 函数写起来就显得非常繁琐，需要自己把所有的属性都转变成对象。并且组件嵌套的时候，对象也会变得非常复杂。不过，因为 h 函数也是返回虚拟 DOM 的，所以有没有更方便的方式去写 h 函数呢？答案是肯定的，这个方式就是 JSX。
JSX 是 JavaScript 的一个类似 XML 的扩展，有了它，我们可以用简单方式来创建vnodes：
constvnode=hello
这种在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展。上面的代码直接在 JavaScript 环境中运行时，会报错。JSX 的本质就是下面代码的语法糖。
constvnode=createVnode('div',{id:"app"},'hello')
其实h 函数内部也是调用 createVnode 来返回虚拟 DOM。
这种在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展。上面的代码直接在 JavaScript 环境中运行时，会报错。JSX 的本质就是下面代码的语法糖。
其实h 函数内部也是调用 createVnode 来返回虚拟 DOM。
那么，如何在Vue项目中使用JSX呢？默认的情况下，vue3+vite的项目不支持jsx，如果想支持jsx，需要安装插件@vitejs/plugin-vue-jsx安装
npmi@vitejs/plugin-vue-jsx-D
在vite.config.js中进行配置：
importvueJsxfrom"@vitejs/plugin-vue-jsx";//配置vue使用jsx
exportdefaultdefineConfig({
plugins:[
vue(),
vueJsx()
],
});
然后就可以在Vue组件中使用了：
//render.vue
在vite.config.js中进行配置：
然后就可以在Vue组件中使用了：
这篇文章主要介绍了vue下axios怎么封装get和post方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue下axios怎么封装get和post方法文章都会有所收获，下面我们一起来看看吧。vue 2.x axios 封装的…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
