什么是JSX/TSX？
JSX是JavaScript XML的简写，其实是函数调用和表达的语法糖，最终会转化为生成虚拟DOM 的js代码。而TSX是TypeScript XML的简写，是基于ts代码开发。
使用JSX/TSX优点？
写代码更快、提高开发效率
组件库代码比业务代码具有更强的动态性，可以很灵活地控制动态 DOM 片段
类型安全，在渲染之前会转义，防止注入攻击（XSS攻击）
可以利用 js/ts 来表达各种各样的逻辑，十分灵活
用 tsx 编写的组件，可以享受到 props 的类型提示
执行更快，因为它在编译为 JavaScript/typsScript代码后进行了优化
JSX/TSX写法注意点
- @ 替换成 on，方法首字母大写；如：@click 改为 onCLick，onClick={() => this.fun()}；
- v-bind:ceshi="值" 替换成 ceshi=
- 不能使用if else语句，使用三元运算（conditional）替代
- 不支持vue修饰符
- 不支持$attrs和$listeners
- render()中的注释要写在{}内
- 允许模板中插入数组{arr}，数组会自动展开
arr = [
<h1>1</h1>,
<h2>2</h2>,
]
- 数组循环不用v-for，直接写this.fun(); 如select的option
<select>
{this.renderOption(this.list, 'label', 'value')}
</select>
renderOption(data: any[], label: string, value: string) {
return data.map((item) => );
}
9、v-model: 使用value={this.value}
render() {
return (
<div class="input__wrap">
<div>initValue的值:{this.value}</div>
<el-input
value={this.initValue}
on-input={val => {
this.initValue = val
}}
/>
</div>
)
}
}
render语法
props 、class、on(事件)、slots属性
render(h) {
return h(
'div',
{
class: {
default: true,
first: this.type == 1,
second: this.type == 2,
third: this.type == 3
},
props:{
value: this.value,
type: 'border-card'
}
on: {
click: this.onShowTypeClick
}
},
[this.$slots.default, this.$slots.tag]
)
},
methods: {
onShowTypeClick() {
console.log(this.type)
}
}
render函数的功能创建虚拟节点就是代替template所以 在.vue 文件中必须省略template标签