vue disabled 什麼意思?_如何在 Vue 中使用 JSX 以及使用它的原因
技術標籤:vue disabled 什麼意思?vue render return html物件錯誤vue render函式vue scss 使用 script 中的變數vue中使用echart橫向條形圖vue中使用plus報錯未定義
作者:JT
譯者:前端小智
來源:https://scotch.io/
Vue.js 具有簡單的 API 和幾個選項,可用於在我們的元件中定義HTML模板。
我們可以使用標籤選項,在根元件例項上定義
template
屬性,或者使用單檔案元件。
上面的選項很棒並且可以完美地工作,但是,在您的應用程式的生命週期中,有時會感到笨拙,設計過度或非常不靈活。
那麼,我們為什麼要使用 JSX 而不是其他模板定義呢?
JSX 更易讀,
的寫法一看就是比
this.$createElement('div', {}, […])
簡潔很多。JSX 也是 JavaScript。
Vue支援JSX。
JSX 使自定義 Vue 元件更容易匯入和管理。
簡介
先舉一個例子來說明為什麼 JSX 是好的。
我們要構建一個元件,該元件可以是普通的單行文字輸入或多行輸入(文字區域)。我們的模板宣告可能看起來像這樣。
<div>
<textareav-if="multiline"v-model="content":name="name":placeholder="placeholder":aria-invalid="false">
<inputv-elsev-model="content":name="name":placeholder="placeholder":aria-invalid="false">
div>
從上面的程式碼片段中可以看到,我們很快就會遇到一些問題,比如重複程式碼等等。想象一下,必須支援input
上面所列的各種屬性。上面的這個小片段將會增長併成為一個難以維護的噩夢。
要解決這個問題,我們需要使用Vue進行降級處理,因此需要使用理接近Vue的內部API來解決這個問題。
render() 方法
注意:這裡並不是說沒有JSX就沒有一種簡單的方法來處理上面的問題,只是說將這個邏輯移動到帶有JSX的
render()
方法可以使元件更直觀。
我們在 Vue 中建立的每個元件都有一個render
方法。這個就是 Vue 選擇渲染元件的地方。即使我們不定義這個方法,Vue 也會為我們做這件事。
這意味著當我們在 Vue 中定義 HTML 模板時,Vue 的模板編譯器將其編譯為一個createElement
函式,該函式帶有幾個引數並從render
函式返回結果。
為了修復上一節中的程式碼,我們刪除了template
屬性或template
標籤,並在元件上定義了render()
方法。如果在元件上定義了render
方法,則 Vue 將忽略template
定義。
...
exportdefault{
name:'TextField',
render(createElement){
consttag=this.multiline?'textarea':'input'
returncreateElement(tag,{
class:{
'text-input':true,
'is-disabled':false
},
attrs:{
name:this.name,
placeholder:this.placeholder,
'aria-invalid':false
}
})
}
}
...
上面的程式碼做了幾件事:
render
方法從Vue獲取一個createElement
助手。我們以程式設計方式定義我們的標籤。
然後,我們建立標籤並將其屬性,類等作為物件傳遞。我們可以傳遞給
createElement
的選項很多。我們返回新建立的元素進行渲染。
我們為 Vue 元件定義的每個模板都將轉換為可返回createElement
函式的render
方法。因為這個原因,render
方法將優先於模板定義。
舉個例子:
//HTML
<div>
<p>Onlyyoucanstopforestfiresp>
div>
模板編譯器將把上面的 HTML 轉換成:
...
render(createElement){
returncreateElement(
'div',
{},
createElement(
'p',
{},
'Onlyyoucanstopforestfires'
)
)
}
...
現在你可能會問這個問題:“對可讀性來說這不好嗎?” 答案是肯定的。一旦定義了具有許多元素巢狀級別或具有多個同級元素的元件,我們就會遇到這個新問題。
這就是 JSX 出現的原因,它可以很好的解決此類問題。
JSX 是什麼
JSX 是 Facebook 工程團隊創造的一個術語。
JSX 是 JavaScript 的類似XML的語法擴充套件,沒有任何定義的語義。
JSX 不打算由引擎或瀏覽器實現。相反,我們將使用 Babel 之類的轉置器將JSX轉換成常規的 JS 。
//此行是JSX的示例
constheading=<h1>WelcometoScotchh1>;
基本上,JSX 允許我們在 JS 中使用類似 Html 的語法。
配置 Vue 以使用 JSX
如果使用的 Vue-cli 大於或等於 3.0 版本,那麼就直接可以使用JSX的語法了。
如果您使用的是不支援 JSX 的Vue-cli較舊版本,則可以通過安裝babel-preset-vue-app
來新增它,並將其新增到您的.babelrc
檔案中。
#Usingnpm
npminstall--save-devbabel-preset-vue-app
#Usingyarn
yarnadd--devbabel-preset-vue-app
在.babelrc
檔案中,新增:
{
"presets":["vue-app"]
}
我們現在可以在元件的render
函式中使用 JSX。
在 Vue 中使用 JSX 需要注意的地方
在 Vue 中使用JSX需要注意幾點。
要監聽 JSX 中的事件,我們需要“on”
字首。例如,將onClick
用於單擊事件。
render(createElement){
return(
<buttononClick={this.handleClick}>button>
)
}
要修改事件,請使用
render(createElement){
return(
<buttononClick:prevent={this.handleClick}>button>
)
}
繫結變數,注意這裡不是使用 :
render(createElement){
return(
<buttoncontent={this.generatedText}>button>
)
}
將HTML字串設定為元素的內容,使用domPropsInnerHTML
而不是使用v-html
render(createElement){
return(
<buttondomPropsInnerHTML={htmlContent}>button>
)
}
我們也可以展開一個大物件:
render(createElement){
return(
this.largeProps}>
)
}
在 render 中使用JSX
回到我們最初的“TextField”
元件。現在我們已經在 Vue 應用程式中啟用了 JSX,我們現在可以這樣做了。
render(createElement){
constinputAttributes={
class:'input-fieldhas-outline',//classdefinition
onClick:this.handleClick//eventhandler
backdrop:false//customprop
}
constinputMarkup=this.multiline
?
:
returninputMarkup
}
匯入 Vue JS 元件
在 Vue 中使用JSX的另一個好處是,我們不再需要註冊所需的每個元件。我們只是匯入和使用。
import{Button}from'../components'
exportdefault{
render(createElement){
return<Buttonprimary={true}>EditButton>
}
}
如何使 JSX 與 TypeScript 一起使用
TypeScript 用作一種向 JavaScript新增型別檢查的機制。要在 JSX 支援 TypeScript中,需要修改 tsconfig.json
。
要在 TypeScript 中啟用 JSX,請先將該檔案另存為.tsx
檔案,然後將tsconfig.json
修改為包括:
{
"compilerOptions":{
....
"jsx":"preserve",
}
}
將jsx
選項設定為“preserve”
意味著 TypeScript 不應處理JSX。這樣做使 Babel 可以控制所有JSX 和 TypeScript 堅持使用型別,因為它尚不支援 Vue JSX。
然後在專案中建立一個jsx.d.ts
檔案,併為 Vue 新增 TypeScript JSX 宣告。
importVue,{VNode}from'vue'
declareglobal{
namespaceJSX{
interfaceElementextendsVNode{}
interfaceElementClassextendsVue{}
interfaceElementAttributesProperty{
$props:{}
}
interfaceIntrinsicElements{
[elemName:string]:any
}
}
}
確保 TypeScript 可以載入宣告檔案。或者,可以通過以下方式在tsconfig.json
中為其新增自動載入功能:
{
"compilerOptions":{
...
"typesRoot":["./node_modules/@types","./types"]
}
}
原文:https://scotch.io/tutorials/using-jsx-with-vue-and-why-you-should-care
交流
視訊課|在Vue中強制元件重新渲染的幾中方法
如何在Vue中動態新增類名
JavaScript中的型別檢查有點麻煩
看完這幾道 JavaScript 面試題,讓你與考官對答如流(下)