Vue 3.0中jsx語法的使用
Vue 3.0 正式發(fā)布了，喜大普奔😁。新的語法又要學(xué)習(xí)一陣陣，不過需要在生產(chǎn)環(huán)境下大面積使用，可能需要等到它的周邊工具：vuex，vue-router 等等全部升級完畢。
Vue 3.0 中尤大使用的了新的編譯工具 vite，革了 webpack 的命😂。嘗試看了下文檔，發(fā)現(xiàn)支持 jsx 語法，由于這段時(shí)間都是在使用 react 來開發(fā)項(xiàng)目，jsx 完全不同的體驗(yàn)，更加的純粹與靈活。
項(xiàng)目創(chuàng)建
npm init vite-app vite-vue cd vite-vue npm install npm run dev
我們發(fā)現(xiàn)創(chuàng)建的目錄解構(gòu)很簡單
使用 JSX
Vue 3.0 直接支持 jsx 語法，新建 demo.jsx
export default function JsxTemp() {
return <div>
<h3>jsx</h3>
</div>
}
引入到 App.vue 中可以完整顯示
再嘗試綁定數(shù)據(jù)
import { ref } from 'vue'
export default function JsxTemp() {
const state = ref(0)
const onClick = () => {
state.value++;
console.log(state.value)
}
return <div>
<h3>state: {state.value}</h3>
<button onClick={onClick}>點(diǎn)擊</button>
</div>
}
我們發(fā)現(xiàn)沒有像我們想的那樣 state 數(shù)一直自增😅
這是因?yàn)槲覀冊?Vue 3.0 中需要使用 defineComponent 包裹來使其變成一個(gè)雙向綁定數(shù)據(jù)的組件
參數(shù) 為 setup function | object
import { defineComponent, ref } from 'vue'
export default defineComponent(() => {
const state = ref(0)
const onClick = () => {
state.value++;
console.log(state.value)
}
return () => (
<div>
<h3>state: {state.value}</h3>
<button onClick={onClick}>點(diǎn)擊</button>
</div>
)
})
可以看到現(xiàn)在是實(shí)時(shí)點(diǎn)擊實(shí)現(xiàn)自增效果
組件通信
組件間傳值通信該怎么來實(shí)現(xiàn)呢😮
我們需要改用對象的方式來傳入通信數(shù)據(jù)
App.vue
<JsxTemp site="imondo.cn" @onGet="onGet" />
export default {
...
methods: {
onGet(e) {
console.log('emit:', e)
}
}
}
...
export default defineComponent({
props: {
site: String
},
setup({ site }) {
const state = ref(0)
const onClick = () => {
state.value++;
console.log(state.value)
context.emit('onGet', 'Mondo');
}
return () => (
<div>
<h1>props: {site}</h1>
<h3>state: {state.value}</h3>
<button onClick={onClick}>點(diǎn)擊</button>
</div>
)
}
})
實(shí)現(xiàn)效果
總結(jié)
我們嘗試了在 Vue 3.0 中如何使用 jsx ，這有助于我們在項(xiàng)目中更靈活的公用我們組件，由此也可以區(qū)分我們在項(xiàng)目中使用的方式
- 無狀態(tài)組件 我們完全可以使用純函數(shù)來展示
- 有狀態(tài)組件 存在邏輯與數(shù)據(jù)綁定的組件則需要使用 Vue 3.0 提供的一系列組件 API
以上就是Vue 3.0 中 jsx 語法使用的詳細(xì)內(nèi)容，更多關(guān)于Vue 3.0 jsx 語法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了深入理解Vue.js輕量高效的前端組件化方案 ,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue引用外部JS的兩種種方案,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題
這篇文章主要介紹了vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue實(shí)現(xiàn)PopupWindow組件詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)PopupWindow組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
Vue實(shí)現(xiàn)動態(tài)圓環(huán)百分比進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動態(tài)圓環(huán)百分比進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項(xiàng)目上有一個(gè)需求,頁面上有50、60個(gè)數(shù)據(jù)變量,是依次排序遞增的變量,中間有個(gè)別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
下面小編就為大家分享一篇基于Vuejs的搜索匹配功能實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue CLI3.0中使用jQuery和Bootstrap的方法