前言

公司新项目使用了jsx,简单整理了下自己在开始做项目时想要知道的内容，后期会再做补充。vue版本^3.2.37

基础模板

const vnode = <div>hello</div>

动态值

const vnode = <div id={dynamicId}>hello, {userName}</div>

v-if

<div>{ok.value ? <div>yes</div> : <span>no</span>}</div>

v-for

<ul>{items.value.map(({ id, text }) => {return <li key={id}>{text}</li>})}
</ul>

v-on

以 on 开头，并跟着大写字母的 props 会被当作事件监听器。比如，onClick 与模板中的 @click 等价。

<buttononClick={(event) => {/* ... */}}
>click me
</button>

v-model

//官网看到的是要监听Update事件<input value={inputVal.value}onUpdate:current={(val) => {inputVal.value = val}}/>//不过直接用指令语法糖还是可以正常使用的<input v-model:value={inputVal.value} onPressEnter={handleClick} />

事件修饰符

对于 .passive、.capture 和 .once 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面：

<inputonClickCapture={() => {}}onKeyupOnce={() => {}}onMouseoverOnceCapture={() => {}}
/>

组件

使用jsx模板定义的组件被其他模块引入，可以直接使用无需注册组件，在给组件创建 vnode 时，传递给渲染函数的第一个参数应当是组件的定义。

import Foo from './Foo.vue'
import Bar from './Bar.jsx'
function render() {return (<div><Foo /><Bar /></div>)
}

渲染插槽

// 默认插槽
<MyComponent>{() => 'hello'}</MyComponent>// 具名插槽
<MyComponent>{{default: () => 'default slot',
foo: () => <div>foo</div>,
bar: () => [<span>one</span>, <span>two</span>]
}}</MyComponent>

总结

文章当前内容参考网站：https://cn.vuejs.org/guide/extras/render-function.html

vue3+jsx入门必看（一）相关推荐

95后数据科学家教你从零自学机器学习，这有3本入门必看书籍
晓查发自凹非寺量子位编译 | 公众号 QbitAI 厌倦了现在的工作,想转行做数据科学,但是却没有计算机专业的相关学历,应该怎样才能入门? 这类的教程已经有很多.最近一位22岁的数据科学家D ...
python基础教程书籍推荐-初学者python入门必看书籍推荐（上）
随着最近Python的热度上涨,学习的人数也在增多,也因为Python这门语言的简短.易学.语言优美的优点,吸引了很多人来学习它.初学者想要入门,就必须先通过阅读,学习大量的理论知识对Python有一 ...
arduino开发ESP8266配置方法，入门必看，esp8266开发板库离线安装包package2.7.1
公众号关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 群里经常有朋友问arduino开发ESP8266的配置方法,今天在之前的文章基础上, ...
200528更新arduino开发ESP8266配置方法，入门必看，esp8266开发板库离线安装包package2.7.1...
公众号关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 群里经常有朋友问arduino开发ESP8266的配置方法,今天(200528)在之 ...
怎么安装python_零基础入门必看篇：浅析python,PyCharm，Anaconda三者之间关系
今天为大家带来的内容是:零基础入门必看篇:浅析python ,PyCharm,Anaconda三者之间关系众所周知,Python是一种跨平台的计算机程序设计语言,简单来说,python就是类似于C, ...
powershell 开发入门_详谈Ubuntu PowerShell(小白入门必看教程)
早在去年八月份PowerShell就开始开源跨平台了,但是一直没有去尝试,叫做PowerShell Core. 这里打算简单介绍一下如何安装和简单使用,为还不知道PowerShell Core on ...
IntelliJ IDEA 最常用配置详细图解，新手入门必看
转载自 IntelliJ IDEA 最常用配置详细图解,新手入门必看刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工. 比如:设置文件字体大小,代 ...
五分钟教你使用vue-cli3创建项目（三种创建方式，小白入门必看）
五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看) 一.搭建vue环境安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support) ...
语音识别从菜鸟到入门必看的参考书目
原标题:语音识别从菜鸟到入门必看的参考书目此前研究这一方面的容,搜罗了些资料,在这里整理如下,做毕业设计,写毕业论文的朋友购书时可以参考一下: 一.<MATLAB数字信号处理> 编者:王 ...

vue3+jsx入门必看（一）

这里写目录标题

前言