Vue 3.0中jsx语法的使用


Posted in Javascript onNovember 13, 2020

Vue 3.0 正式发布了,喜大普奔?。新的语法又要学习一阵阵,不过需要在生产环境下大面积使用,可能需要等到它的周边工具:vuex,vue-router 等等全部升级完毕。

Vue 3.0 中尤大使用的了新的编译工具 vite,革了 webpack 的命?。尝试看了下文档,发现支持 jsx 语法,由于这段时间都是在使用 react 来开发项目,jsx 完全不同的体验,更加的纯粹与灵活。

项目创建

npm init vite-app vite-vue
cd vite-vue
npm install
npm run dev

我们发现创建的目录解构很简单

Vue 3.0中jsx语法的使用

使用 JSX

Vue 3.0 直接支持 jsx 语法,新建 demo.jsx

export default function JsxTemp() {
 return <div>
 <h3>jsx</h3>
 </div>
}

引入到 App.vue 中可以完整显示

Vue 3.0中jsx语法的使用

再尝试绑定数据

import { ref } from 'vue'

export default function JsxTemp() {
 const state = ref(0)
 const onClick = () => {
 state.value++;
 console.log(state.value)
 }
 return <div>
 <h3>state: {state.value}</h3>
 <button onClick={onClick}>点击</button>
 </div>
}

我们发现没有像我们想的那样 state 数一直自增?

Vue 3.0中jsx语法的使用

这是因为我们在 Vue 3.0 中需要使用 defineComponent 包裹来使其变成一个双向绑定数据的组件
参数 为 setup function | object

import { defineComponent, ref } from 'vue'

export default defineComponent(() => {
 const state = ref(0)
 const onClick = () => {
 state.value++;
 console.log(state.value)
 }
 return () => (
 <div>
  <h3>state: {state.value}</h3>
  <button onClick={onClick}>点击</button>
 </div>
 )
})

可以看到现在是实时点击实现自增效果

Vue 3.0中jsx语法的使用

组件通信

组件间传值通信该怎么来实现呢?

我们需要改用对象的方式来传入通信数据

App.vue
<JsxTemp site="imondo.cn" @onGet="onGet" />
export default {
 ...
 methods: {
 onGet(e) {
  console.log('emit:', e)
 }
 }
}
...
export default defineComponent({
 props: {
 site: String
 },
 setup({ site }) {
 const state = ref(0)
 const onClick = () => {
  state.value++;
  console.log(state.value)
  context.emit('onGet', 'Mondo');
 }
 return () => (
  <div>
  <h1>props: {site}</h1>
  <h3>state: {state.value}</h3>
  <button onClick={onClick}>点击</button>
  </div>
 )
 }
})

实现效果

Vue 3.0中jsx语法的使用

总结

我们尝试了在 Vue 3.0 中如何使用 jsx ,这有助于我们在项目中更灵活的公用我们组件,由此也可以区分我们在项目中使用的方式

  • 无状态组件 我们完全可以使用纯函数来展示
  • 有状态组件 存在逻辑与数据绑定的组件则需要使用 Vue 3.0 提供的一系列组件 API

以上就是Vue 3.0 中 jsx 语法使用的详细内容,更多关于Vue 3.0 jsx 语法的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 #Javascript
PHP 502bad gateway原因及解决方案
Nov 13 #Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 #Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 #Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 #Javascript
在vue中嵌入外部网站的实现
Nov 13 #Javascript
You might like
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
使用PHP开发留言板功能
2019/11/19 PHP
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
python实现可视化动态CPU性能监控
2018/06/21 Python
Django forms组件的使用教程
2018/10/08 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Python调用Windows命令打印文件
2020/02/07 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
Hotels.com南非:酒店预订
2017/11/02 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
军训口号
2014/06/13 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
基层党员对照检查材料
2014/08/25 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
安全保证书格式
2015/02/28 职场文书
二胎满月酒致辞
2015/07/29 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers