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 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
简单实现js拖拽效果
Jul 25 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 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
php 中include()与require()的对比
2006/10/09 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
室内设计自我鉴定
2013/10/15 职场文书
大门门卫岗位职责
2013/11/30 职场文书
平安校园建设方案
2014/05/02 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
银行实习推荐信
2015/03/27 职场文书
看上去很美观后感
2015/06/10 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
tree shaking对打包体积优化及作用
2022/07/07 Java/Android