今天小編給大家分享一下Vue中怎么使用JSX的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
成都網(wǎng)站設(shè)計、成都網(wǎng)站制作,成都做網(wǎng)站公司-創(chuàng)新互聯(lián)已向1000多家企業(yè)提供了,網(wǎng)站設(shè)計,網(wǎng)站制作,網(wǎng)絡(luò)營銷等服務(wù)!設(shè)計與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗,合理的價格為您打造企業(yè)品質(zhì)網(wǎng)站。
Vue.js 具有簡單的 API 和幾個選項，可用于在我們的組件中定義HTML模板。
我們可以使用 標(biāo)簽選項，在根組件實例上定義 template 屬性，或者使用單文件組件。
上面的選項很棒并且可以完美地工作，但是，在您的應(yīng)用程序的生命周期中，有時會感到笨拙，設(shè)計過度或非常不靈活。
那么，我們?yōu)槭裁匆褂?JSX 而不是其他模板定義呢？
簡介
先舉一個例子來說明為什么 JSX 是好的。
我們要構(gòu)建一個 組件，該組件可以是普通的單行文本輸入或多行輸入（文本區(qū)域）。 我們的模板聲明可能看起來像這樣。
從上面的代碼片段中可以看到，我們很快就會遇到一些問題，比如重復(fù)代碼等等。想象一下，必須支持 input 上面所列的各種屬性。上面的這個小片段將會增長并成為一個難以維護(hù)的噩夢。
要解決這個問題，我們需要使用Vue進(jìn)行降級處理，因此需要使用理接近Vue的內(nèi)部API來解決這個問題。
render() 方法
注意:這里并不是說沒有JSX就沒有一種簡單的方法來處理上面的問題，只是說將這個邏輯移動到帶有JSX的 render() 方法可以使組件更直觀。
我們在 Vue 中創(chuàng)建的每個組件都有一個 render 方法。這個就是 Vue 選擇渲染組件的地方。即使我們不定義這個方法，Vue 也會為我們做這件事。
這意味著當(dāng)我們在 Vue 中定義 HTML 模板時，Vue 的模板編譯器將其編譯為一個 createElement 函數(shù)，該函數(shù)帶有幾個參數(shù)并從 render 函數(shù)返回結(jié)果。
為了修復(fù)上一節(jié)中的代碼，我們刪除了 template 屬性或 template 標(biāo)簽，并在組件上定義了 render() 方法。 如果在組件上定義了 render 方法，則 Vue 將忽略 template 定義。
...
export default {
name: 'TextField',
render (createElement) {
const tag = this.multiline ? 'textarea' : 'input'
return createElement(tag, {
class: {
'text-input': true,
'is-disabled': false
},
attrs: {
name: this.name,
placeholder: this.placeholder,
'aria-invalid': false
}
})
}
}
...上面的代碼做了幾件事：
render 方法從Vue獲取一個 createElement 助手。
我們以編程方式定義我們的標(biāo)簽。
然后，我們創(chuàng)建標(biāo)簽并將其屬性，類等作為對象傳遞。 我們可以傳遞給 createElement 的 選項 很多。
我們返回新創(chuàng)建的元素進(jìn)行渲染。
我們?yōu)?Vue 組件定義的每個模板都將轉(zhuǎn)換為可返回 createElement 函數(shù)的 render 方法。 因為這個原因， render 方法將優(yōu)先于模板定義。
舉個例子：
// HTML
Only you can stop forest fires
模板編譯器將把上面的 HTML 轉(zhuǎn)換成:
...
render (createElement) {
return createElement(
'div',
{},
createElement(
'p',
{},
'Only you can stop forest fires'
)
)
}
...現(xiàn)在你可能會問這個問題：“對可讀性來說這不好嗎？” 答案是肯定的。 一旦定義了具有許多元素嵌套級別或具有多個同級元素的組件，我們就會遇到這個新問題。
這就是 JSX 出現(xiàn)的原因，它可以很好的解決此類問題。
JSX 是什么
JSX 是 Facebook 工程團(tuán)隊創(chuàng)造的一個術(shù)語。
JSX 是 JavaScript 的類似XML的語法擴(kuò)展，沒有任何定義的語義。
JSX 不打算由引擎或瀏覽器實現(xiàn)。相反，我們將使用 Babel 之類的轉(zhuǎn)置器將JSX轉(zhuǎn)換成常規(guī)的 JS 。
// 此行是JSX的示例
const heading = Welcome to Scotch
;
基本上，JSX 允許我們在 JS 中使用類似 Html 的語法。
配置 Vue 以使用 JSX
如果使用的 Vue-cli 大于或等于 3.0 版本，那么就直接可以使用JSX的語法了。
如果您使用的是不支持 JSX 的Vue-cli較舊版本，則可以通過安裝 babel-preset-vue-app 來添加它，并將其添加到您的 .babelrc 文件中。
# Using npm
npm install --save-dev babel-preset-vue-app
# Using yarn
yarn add --dev babel-preset-vue-app
在 .babelrc 文件中，添加：
{
"presets": ["vue-app"]
}我們現(xiàn)在可以在組件的 render 函數(shù)中使用 JSX。
在 Vue 中使用 JSX 需要注意的地方
在 Vue 中使用JSX需要注意幾點。
要監(jiān)聽 JSX 中的事件，我們需要 “on” 前綴。 例如，將 onClick 用于單擊事件。
render (createElement) {
return (
)
}要修改事件，請使用
render (createElement) {
return (
)
}綁定變量，注意這里不是使用 :
render (createElement) {
return (
)
}將HTML字符串設(shè)置為元素的內(nèi)容，使用 domPropsInnerHTML 而不是使用 v-html
render (createElement) {
return (
)
}我們也可以展開一個大對象：
render (createElement) {
return (
)
}在 render 中使用JSX
回到我們最初的 “TextField” 組件。現(xiàn)在我們已經(jīng)在 Vue 應(yīng)用程序中啟用了 JSX，我們現(xiàn)在可以這樣做了。
render (createElement) {
const inputAttributes = {
class: 'input-field has-outline', // class definition
onClick: this.handleClick // event handler
backdrop: false // custom prop
}
const inputMarkup = this.multiline
?
:
return inputMarkup
}導(dǎo)入 Vue JS 組件
在 Vue 中使用JSX的另一個好處是，我們不再需要注冊所需的每個組件。 我們只是導(dǎo)入和使用。
import {Button} from '../components'
export default {
render (createElement) {
return Edit
}
}如何使 JSX 與 TypeScript 一起使用
TypeScript 用作一種向 JavaScript添加類型檢查的機(jī)制。要在 JSX 支持 TypeScript中，需要修改 tsconfig.json 。
要在 TypeScript 中啟用 JSX，請先將該文件另存為 .tsx 文件，然后將 tsconfig.json 修改為包括：
{
"compilerOptions": {
....
"jsx": "preserve",
}
}將 jsx 選項設(shè)置為 “preserve” 意味著 TypeScript 不應(yīng)處理JSX。 這樣做使 Babel 可以控制所有JSX 和 TypeScript 堅持使用類型，因為它尚不支持 Vue JSX。
然后在項目中創(chuàng)建一個 jsx.d.ts 文件，并為 Vue 添加 TypeScript JSX 聲明。
import Vue, {VNode} from 'vue'
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends Vue {}
interface ElementAttributesProperty {
$props: {}
}
interface IntrinsicElements {
[elemName: string]: any
}
}
}確保 TypeScript 可以加載聲明文件。 或者，可以通過以下方式在 tsconfig.json 中為其添加自動加載功能：
{
"compilerOptions": {
...
"typesRoot": ["./node_modules/@types", "./types"]
}
}代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug 。
以上就是“Vue中怎么使用JSX”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章題目：Vue中怎么使用JSX
網(wǎng)頁鏈接：
http://weahome.cn/article/jshgij.html
重慶分公司
重慶分公司
