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 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
javascript流程控制语句集合
Sep 18 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 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 图片上传类代码
2009/07/17 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
实例讲解PHP表单处理
2019/02/15 PHP
php实现的顺序线性表示例
2019/05/04 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
vue观察模式浅析
2018/09/25 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
从运行效率与开发效率比较Python和C++
2018/12/14 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python字符串Intern机制详解
2019/07/01 Python
python实现图片压缩代码实例
2019/08/12 Python
python实现人脸签到系统
2020/04/13 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
蛋白质世界:Protein World
2017/11/23 全球购物
主题教育活动总结
2014/05/05 职场文书
办公室日常管理制度
2015/08/04 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL