vue jsx css,vuex基本用法
本文主要介绍了在Vue 3.0中jsx语法的使用，帮助你更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。
Vue 3.0正式发布，我喜欢。新的语法需要反复学习，但需要在生产环境中广泛使用。可能要等到它的周边工具：vuex，vue-router等。都升级了。
Vue 3.0特别使用了新的编译器vite，彻底改变了webpack的生活。看完文档，发现支持jsx语法。由于这期间所有的项目都是用react开发的，所以jsx有着完全不同的体验，更加纯粹和灵活。
项目创建
npm init vite-app vite-vue
cd vite-vue
npm安装
npm运行开发
我们发现对创建的目录的解构非常简单。
使用 JSX
VU3.0直接支持jsx语法，创建一个新的demo.jsx
导出默认函数JsxTemp() {
退货部门
h3jsx/h3
/div
}
引入App.vue可以完整显示
请再次尝试绑定数据。
从“vue”导入{ ref }
导出默认函数JsxTemp() {
const state=ref(0)
const onClick=()={
状态.值；
console.log(状态.值)
}
退货部门
h3state: {state.value}/h3
按钮onClick={onClick}单击/按钮
/div
}
我们发现状态数并没有像我们想象的那样一直增加。
这是因为我们需要使用Vue 3.0中的defineComponent包，使其成为一个双向绑定数据的组件。
参数设置功能对象
从“vue”导入{ defineComponent，ref }
导出默认定义组件(()={
const state=ref(0)
const onClick=()={
状态.值；
console.log(状态.值)
}
return ()=(
差异
h3state: {state.value}/h3
按钮onClick={onClick}单击/按钮
/div
)
})
可以看到现在是实时点击，达到自增的效果。
组件通信
如何实现组件之间的价值沟通？
我们需要使用对象方法来输入通信数据。
App.vue
jsx temp site= imondo . cn @ onGet= onGet /
导出默认值{
.
方法：{
onGet(e)
console.log(emit:，e)
}
}
}
.
导出默认定义组件({
道具：{
站点：字符串
},
设置({站点}) {
const state=ref(0)
const onClick=()={
状态.值；
console.log(状态.值)
context.emit(onGet ， Mondo )；
}
return ()=(
差异
h1属性：{site}/h1
h3state: {state.value}/h3
按钮onClick={onClick}单击/按钮
/div
)
}
})
实现效果
总结
我们已经尝试了如何在Vue 3.0中使用jsx，它帮助我们在项目中更灵活地共享我们的组件，从而区分我们在项目中使用它们的方式。
无状态组件可以用纯函数来演示。
有状态组件的逻辑和数据绑定的组件需要使用Vue 3.0提供的一系列组件API。
以上是Vue 3.0中使用的jsx语法的详细内容。更多关于Vue 3.0 jsx语法的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。