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 while语句和do while语句的区别分析
Dec 08 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
javascript 实现map集合
Apr 03 Javascript
详解React-Todos入门例子
Nov 08 Javascript
Ajax基础知识详解
Feb 17 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
JS实现可切换图片的幻灯切换效果示例
May 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代码
2006/12/06 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
pycharm无法安装cv2模块问题
2022/05/20 Python