在tsx里写html模板,在Vue中写TSX有哪些需要注意的地方

v-html

使用domPropsInnerHTML来替代v-html

domPropsInnerHTML={this.topicDetail.content}

class="markdown-body"

v-if

使用三元操作符来替代v-if

{this.preFlag ? ...... : ""}

v-for

使用map遍历替代v-for

{this.pageBtnList.map(page => {

return (

onClick={this.changePageHandler.bind(this, page)}

class={[{ currentPage: page === this.currentPage }, "pageBtn"]}

{page}

);

})}

render

注意：在render函数中的组件名一定用kebab-case命名

protected render() {

return (

码云笔记 >>

);

}

onClick事件传值(TSX)

使用template的时候，如果用v-on绑定事件，想要传参的话，可以直接这么写：

click me

但是在TSX中，如果直接这么写，就相当于立即执行了clickHandle函数：

render(){

// 这样写是不行的！！

return click me

}

因此，我们不得不使用bind()来绑定参数的形式传参：

render(){

return click me

}

结语

以上就是今天码云笔记为大家带来的关于在Vue中写TSX有哪些需要注意的地方，纯个人自学笔记，希望对大家有帮助。

在tsx里写html模板,在Vue中写TSX有哪些需要注意的地方相关推荐

vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
vue中写video中的视频播放按钮没有反映
<div class="contentPlay"><video src="Material/喜羊羊.mp4" style="widt ...
在Vue中使用JSX，很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
vue中echarts使用案例：饼图（可直接使用）
目录功能.效果图: 代码实现 1.下载echarts包:终端运行 2.代码 3.运行项目:终端运行 4.可能遇到的错误具体代码详解: 功能.效果图: 1.点击对应模块,放大并显示数据 2.点击下方 ...
Vue中slot与slot-scope的理解及使用
以前使用过vue,但是从来没有用过插槽slot,最近突然看到slot,发现有点不会用,因此决定系统的学习一下插槽slot. 但是在查看了vue文档后,感觉说的太笼统,让人难以理解,因此在网上查了很多资 ...
3d饼图 vue_3D 饼图在 VUE 中的实现
最近有多位读者反应,3D 饼图在 VUE 环境里跑不通.可我其实是一个先学 ECharts 后学 Javascript 的前端外行,再加上读者往往也没有告诉我具体的报错信息是什么,所以一时也没能帮读者 ...
vue中插槽solt的使用
solt就是插槽默认会把组件中间的内容渲染出来案例: 在app.vue中直接在组件模版里写内容是不会在页面中显示的这个时候就在card子组件里写上solt标签 solt标签就代表根组件里 ...
vue data为什么是函数_由 Vue 中三个常见问题引发的深度思考
(给前端大全加星标,提升前端技能) 作者: 前端序公号 / SimonWoo (本文来自作者投稿) 前言工作中我们通过搜索引擎或者官方文档很容易就会知道一个语法怎么使用,但是你知道其中的原理吗?我 ...

在tsx里写html模板,在Vue中写TSX有哪些需要注意的地方

在tsx里写html模板,在Vue中写TSX有哪些需要注意的地方相关推荐

最新文章

热门文章