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 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
通过html表格发电子邮件
2006/10/09 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
php输出图像的方法实例分析
2017/02/16 PHP
php给数组赋值的实例方法
2019/09/26 PHP
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
javascript使用prototype完成单继承
2014/12/24 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
解决PyCharm中光标变粗的问题
2017/08/05 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
物流管理毕业生自荐信
2013/10/24 职场文书
电子商务毕业生求职信
2013/11/10 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
银行批评与自我批评
2014/02/10 职场文书
商务助理求职信范文
2014/04/20 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
团组织推荐意见
2015/06/05 职场文书
未婚证明格式
2015/06/15 职场文书
婚宴领导致辞
2015/07/28 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
Redis 限流器
2022/05/15 Redis