文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

教练,怎么在vue项目里写react?

2024-12-02 21:32

关注

1.前言

我承认了我是党,本篇文章是在vue项目里写tsx的一篇介绍。作为一个reacter,目前的业务天天使用vue2+ts让我十分的不舒服。我对于vue也不是很熟悉,想回到我的react时代。于是在查询官网之后发现在vue里面写jsx也挺有意思的,遂记录。

2.正文

vue2+ts的项目配置这里就不展开了,网上一搜一大推。

index.vue是页面路由,存放各个组件和公用逻辑。components文件夹中存放我的tsx组件。

接下来就开始写tsx。

你可以直接创建jsx/tsx文件

这次的项目结构是这样的:

在vue文件里这么使用

  1. // index.vue 
  2.  
  3.   
  4. "ts"
  5. import { Component, Vue } from "vue-property-decorator"
  6. import Common from "./components/Common"
  7.  
  8. @Component({ 
  9.   name: "App"
  10.   components: { 
  11.     Common, 
  12.   }, 
  13. }) 
  14. export default class App extends Vue { 
  15.   private list = ["我要去淘宝""我要去百度""我要去京东"]; 
  16.  

tsx这么写

  1. import { CreateElement } from 'vue'
  2. import { Component, Vue, Prop } from 'vue-property-decorator'
  3.  
  4. @Component({ 
  5.     name: 'Common' 
  6. }) 
  7. export default class Common extends Vue { 
  8.     @Prop(Object) opt!: any[] 
  9.  
  10.     render(h: CreateElement) { 
  11.         return  
  12.             { 
  13.                 this.opt.map((it) => { 
  14.                     return "marginRight:10px">{it} 
  15.                 }) 
  16.             } 
  17.          
  18.     } 

在来看一下页面

这该死的react既视感,竟是如此的诱人

可能有心者注意到了 我还引用了一个 CreateElement ,这是干嘛的呢。这玩意叫 渲染函数 。不喜欢读vue那么大串的文档的兄弟看这里。简单解释:这个东西可以渲染一个vnode节点。 它比模板更接近编译器。 什么意思呢?意思就是模板语法也会编译成渲染函数。所以我们直接用渲染函数不就相当于节省了模板语法到渲染函数的过程。四舍五入项目性能又是一个大的提升!

简单介绍一下传参:

第一个参数 : {String | Object | Function} 一个 HTML 标签名、组件选项对象,或者 resolve 了上述任何一种的一个 async 函数。必填项。

第二个参数 : Object 一个与模板中 attribute 对应的数据对象。

第三个参数 : {String | Array} 文本节点或子级虚拟节点 (VNodes)。

渲染函数给vue带来了很多的灵活性,以前你想自定义在子组件里插入东西,得写一大堆的插槽。  。有了渲染函数我们可以这么玩。

  1. // 改造一下上面的index.vue的data 
  2.  
  3.   private list = [ 
  4.     { render: () => ["a", { style: { color: "red" } }, "我要去淘宝"] }, 
  5.     { render: () => ["a", { style: { color: "green" } }, "我要去京东"] }, 
  6.     { render: () => ["a", { style: { color: "pink" } }, "我要去百度"] }, 
  7.   ]; 

tsx中这么写:

  1.                 this.opt.map((it) => { 
  2.                     return h(...it.render()) 
  3.                 }) 
  4.             } 

就可以渲染出花里胡哨的页面了

我们还可以这么玩:

  1. // tsx改造 
  2.  
  3.             { 
  4.                 this.opt.map((it) => { 
  5.                     return it.render(h) 
  6.                 }) 
  7.             } 
  8.  
  9.  
  10.  
  11. 在index.vue页面我们就可以这么玩: 
  12. // index.vue 
  13. private list = [ 
  14.     { 
  15.       render: (h: CreateElement) => 
  16.         h("a", { style: { color: "red", marginRight: "5px" } }, "我要去淘宝"), 
  17.     }, 
  18.     { 
  19.       render: (h: CreateElement) => 
  20.         h("a", { style: { color: "green", marginRight: "5px" } }, "我要去京东"), 
  21.     }, 
  22.     { 
  23.       render: (h: CreateElement) => 
  24.         h("a", { style: { color: "pink", marginRight: "5px" } }, "我要去百度"), 
  25.     }, 
  26.   ]; 

结果也是同样的花哨

我们同样可以渲染乱七八糟的标签!

  1. // index.vue改造 
  2.  { 
  3.       render: (h: CreateElement) => 
  4.         h( 
  5.           "h1"
  6.           { 
  7.             style: { color: "green", marginRight: "5px" }, 
  8.           }, 
  9.           "我要去京东" 
  10.         ), 
  11.     }, 

我们可以随心所欲的在渲染函数中定义事件:

  1. // index.vue 
  2. private list = [ 
  3.    { 
  4.       render: (h: CreateElement) => 
  5.         h( 
  6.           "a"
  7.           { 
  8.             style: { color: "red", marginRight: "5px" }, 
  9.             on: { 
  10.               click: () => this.iWillGoWhere("TB"), 
  11.             }, 
  12.           }, 
  13.           "我要去淘宝" 
  14.         ), 
  15.    }] 
  16.     
  17.  iWillGoWhere(type: string) { 
  18.     const goWhere: any = { 
  19.       TB: () => { 
  20.         alert("我要去淘宝!"); 
  21.       }, 
  22.       JD: () => { 
  23.         alert("我要去京东!"); 
  24.       }, 
  25.       BD: () => { 
  26.         alert("我要去百度!"); 
  27.       }, 
  28.     }; 
  29.     goWhere[type](); 
  30.   } 

这样就可以啦!

结尾

本次文章是对vue灵活性使用的入门。请各位vue大佬不要喷我~

来源:SegmentFault内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯