什么是JSX/TSX
什么是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) => <option label={item[label]} value={item[value]}></option>);
}
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标签
作者:ywjbalabala
出处:https://www.cnblogs.com/ywjbalabala/
本文版权归作者和博客园所有,欢迎转载。转载请在留言板处留言给我,且在文章标明原文链接,谢谢!
如果您觉得本篇博文对您有所收获,觉得我还算用心,请点击右下角的 [推荐],谢谢!