中英文

DOM引入：

import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
<div>{t('hello')}</div>

图片引入

tsx语法

class 写成 className (react)
lable 内的 for 写成 htmlFor (react)
自定义属性名写成小驼峰
标签内无内容写成单闭合
用到js语法加{}

tsx注释

单行注释和多行注释，都需要在大括号｛｝中编写

{//我是单行注释
}
{/*我是一段注释*/}

tsx样式绑定

绑定class

<div className={"box title " + (active ? "active": "")}>我也是div元素</div>

绑定style

<div style={{color: "red", fontSize: "50px"}}>我是div,绑定style属性</div>

tsx事件绑定

注意：事件后跟函数，并非函数的调用

 setup() {let num = ref<number>(10)const add = (event:any)=> {console.log(event);num.value++}const changeNum = (newValue:number,event:any)=>{num.value = newValueconsole.log(event);}return ()=>(<div><h2>event-dmeo</h2>{/*无传参*/}<button onClick={add}>num++</button>{/*有传惨，e为事对象*/}<button onClick={(e)=>changeNum(100,e)}>changeNumber</button><p>num:{num.value}</p></div>)}

tsx列表渲染

利用map来生成dom

 setup() {interface user {name: string,age: number}let arr: user[] = reactive([{ name: 'wl', age: 18 }, { name: 'whb', age: 19 }])return () => (<div class="list-demo"><ul>{arr.map(el => <li key={el.name}>{el.name}--{el.age}</li>)}</ul></div>)}

条件渲染

三元运算符
与运算符 &&
v-show效果（主要是控制html标签的display属性是否为none）

setup() {const show = ref<boolean>(false)const changeShow = () => {show.value = !show.value}return () => (<div className="vif-demo"><h2>条件判断</h2><button onClick={changeShow}>显示隐藏</button>{show.value && <div style={{ width: '200px', height: '200px', backgroundColor: 'red' }}></div>}</div>)}

插槽的使用

定义插槽

const Slots = defineComponent({setup(props,{slots}) {interface user {name:string,age:number}let user = reactive<user>({name:'wl',age:18})return ()=>(<div class="slots"><h2>插槽</h2>{slots.center&&slots.center(user)}</div>)}
})

使用插槽

 setup() {const slots = {center:(props:any)=>(<div class='center'><h2>111</h2><ul><li>{props.name}</li><li>{props.age}</li></ul></div>)}return ()=>(<div class="slots-demo"><h2>slots demo</h2><Slots v-slots = {slots}></Slots></div>)}

vue中使用tsx语法相关推荐

Vue中如果关闭语法检查
Vue中如果关闭语法检查在Vue中随便写一个变量,没有使用就会报错,太烦了. == 只需在vue.configs.js文件中配置一下就行了== const { defineConfig } = r ...
Vue中如何关闭语法检查
Vue中如何关闭语法检查首先先创建一个js文件,不可以改名字,就叫vue.config.js vue.config.js中的内容 module.exports={pages:{index:{//入口 ...
在tsx里写html模板,在Vue中写TSX有哪些需要注意的地方
v-html 使用domPropsInnerHTML来替代v-html domPropsInnerHTML={this.topicDetail.content} class="markdow ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
VUE中的模板语法以及过滤器和双向数据绑定
目录: 1. 模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令 1.2.1 核心指令 1.2.1.1 v-if |v-else-if| ...
在Vue 中使用 JSX 语法
Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom,正常情况下用render函数的参数createElement方法构建虚拟Dom的语法比较繁琐,更方便的是用更接近于模板的JSX语法. Vue ...
vue中的ES6语法整理1
1.箭头函数 ES6允许使用"箭头"(=>)定义函数 var f = v => v;//等价于var f = function(v){return v; }; 如果箭头 ...
vue中使用pug语法调用函数传参 mixin
npm i -D pug pug-html-loader pug-plain-loadermodule.exports = {chainWebpack: config => {config.mo ...
【jsx开发Vue】在Vite+Vue3.0中使用jsx语法开发。
所有内容首发微信公众号[WEB前端李志杰],未经允许禁止转载! 可能大家要问我为什么要使用jsx语法开发Vue? 首先要说明的是:个人认为jsx语法和模板语法并不存在优劣之分,在实际项目中应该优先选择 ...
Vue 中如何配置项目支持 JSX 语法
Vue 是使用的的模板语法,Vue的模板实际上就是编译成了 render 函数,同样支持 JSX 语法.在 Vue 官网中,提供 createElement 函数中使用模板中的功能. createEl ...

vue中使用tsx语法

中英文

图片引入

tsx语法

tsx注释

tsx样式绑定

tsx事件绑定

tsx列表渲染

条件渲染

插槽的使用

vue中使用tsx语法相关推荐

最新文章

热门文章