vue中使用tsx语法

中英文

DOM引入：

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

图片引入

tsx语法

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

tsx注释

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

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

tsx样式绑定

1. 绑定class

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

2. 绑定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 = newValue
            console.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>
        )
    }

条件渲染

1. 三元运算符
2. 与运算符 &&
3. 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>
        )
    }

插槽的使用

1. 定义插槽

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>
        )
    }
})

2. 使用插槽

 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>
        )
    }