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 相关文章推荐
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
javascript 实现map集合
Apr 03 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
Vue中props的使用详解
Jun 15 Javascript
微信小程序人脸识别功能代码实例
May 07 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
MySQL相关说明
2007/01/15 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
php链表用法实例分析
2015/07/09 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
vue绑定class与行间样式style详解
2017/08/16 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue实现购物车列表
2020/06/30 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python configparser模块操作代码实例
2020/06/08 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
师德自我剖析材料范文
2014/10/06 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
技能培训通讯稿
2015/07/18 职场文书
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android
Oracle中DBLink的详细介绍
2022/04/29 Oracle
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android