我們之前呢是使用Template去寫(xiě)我們模板。現(xiàn)在可以擴(kuò)展另一種風(fēng)格TSX風(fēng)格
vue2 的時(shí)候就已經(jīng)支持jsx寫(xiě)法，只不過(guò)不是很友好茸歧，隨著vue3對(duì)typescript的支持度罗标，tsx寫(xiě)法越來(lái)越被接受
1.安裝插件
npm install @vitejs/plugin-vue-jsx -D
vite.config.ts 配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),vueJsx()]
})
2.修改tsconfig.json 配置文件
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
配置完成就可以使用啦
在目錄新建一個(gè)xxxxxx.tsx文件
3.使用TSX
tsx不會(huì)自動(dòng)解包使用ref加.vlaue ! ! !
tsx支持 v-model 的使用
import { ref } from 'vue'
let v = ref<string>('')
const renderDom = () => {
return (
<>
<input v-model={v.value} type="text" />
<div>
{v.value}
</div>
</>
)
}
export default renderDom
v-show
import { ref } from 'vue'
let flag = ref(false)
const renderDom = () => {
return (
<>
<div v-show={flag.value}>景天</div>
<div v-show={!flag.value}>雪見(jiàn)</div>
</>
)
}
export default renderDom
v-if是不支持的
所以需要改變風(fēng)格
import { ref } from 'vue'
let flag = ref(false)
const renderDom = () => {
return (
<>
{
flag.value ? <div>景天</div> : <div>雪見(jiàn)</div>
}
</>
)
}
export default renderDom
v-for也是不支持的
需要使用Map
import { ref } from 'vue'
let arr = [1,2,3,4,5]
const renderDom = () => {
return (
<>
{
arr.map(v=>{
return <div>${v}</div>
})
}
</>
)
}
export default renderDom
v-bind使用
直接賦值就可以
import { ref } from 'vue'
let arr = [1, 2, 3, 4, 5]
const renderDom = () => {
return (
<>
<div data-arr={arr}>1</div>
</>
)
}
export default renderDom
v-on綁定事件 所有的事件都按照react風(fēng)格來(lái)
- 所有事件由on開(kāi)頭
- 所有事件名稱(chēng)首字母大寫(xiě)
const renderDom = () => {
return (
<>
<button onClick={clickTap}>點(diǎn)擊</button>
</>
)
}
const clickTap = () => {
console.log('click');
}
export default renderDom
Props 接受值
import { ref } from 'vue'
type Props = {
title:string
}
const renderDom = (props:Props) => {
return (
<>
<div>{props.title}</div>
<button onClick={clickTap}>點(diǎn)擊</button>
</>
)
}
const clickTap = () => {
console.log('click');
}
export default renderDom
Emit派發(fā)
type Props = {
title: string
}
const renderDom = (props: Props,content:any) => {
return (
<>
<div>{props.title}</div>
<button onClick={clickTap.bind(this,content)}>點(diǎn)擊</button>
</>
)
}
const clickTap = (ctx:any) => {
ctx.emit('on-click',1)
}
