TSX语法简单封装一个Icon组件
jsx VS template
jsx语法相比较template语法 怎么说呢 适应场景不一样吧
template更适合页面的排版 清晰可见的页面布局 vue的官方也推荐template语法
jsx更适合业务逻辑的处理 更像是js里面写html代码 而template更像是html里写js代码
优缺点
jsx:
优点:可以更加专注与业务逻辑的实现 业务逻辑的表达十分清晰 (更适合写业务逻辑)
缺点:页面排版布局不清晰 同时需要放弃vue的部分语法糖(v-if v-for v-model 等等)也放弃了vue编译阶段的优化(静态提升)
讲点题外话 v-model的实现:取值,事件和赋值。
template:
优点:页面排版布局清晰可见 (更适合写布局)
缺点:在处理复杂的业务逻辑的时候明显感到吃力
结论:在平常项目中建议使用template语法 感觉工作中大部分时间都是在写布局 哈哈 也没那么多的业务逻辑需要写(大量第三方插件 类库的出现 解放了大部分程序员的劳动力)
jsx更适合造轮子的程序员使用
vue3.0 tsx写法
setup里
变量在当前作用域
或者render里
变量在vue实例上 需要this访问
icon.tsx
引入iconfont并全局挂载组件Icon
使用组件
效果(组件还有待完善。。。)
OK 打完收工
持续更新。。。欢迎关注
接下来将以更多实战 来讲解vue3.0高阶用法