JSX語法如何在vue中使用

1、什麼是JSX?

　　JSX就是Javascript和XML結合的一種格式。React發明了JSX，利用HTML語法來建立虛擬DOM。當遇到<，JSX就當HTML解析，遇到 { 就當JavaScript解析。vue中大部分場景是不需要用render函式的，還是用模板更簡潔直觀。

　　vue template語法簡單明瞭，資料操作與檢視分離，開發體驗友好。但是在某些特定場合中，會限制一些功能的擴充套件，如動態使用過濾器、解析字串型別的模板檔案、動態渲染機器人互動等。以上功能的實現可以藉助vue的render語法，render語法比template更偏底層，允許在HTML中使用js語法，可以極大的擴充套件HTML的能力。注意：vue+jsx

2、props傳參

props:子元件接收父元件傳遞的資料，使用onInput監聽輸入框變化實現資料雙向繫結，把輸入框事件操作交給父元件，子元件動態監聽輸入框資料

　　/views/home.vue父元件：元件引用後直接在函式中使用，無需使用components

詳解在vue專案中使用render函式

Vue 推薦在絕大多數情況下使用模板來建立你的 HTML。然而在一些場景中，你真的需要JavaScript的完全程式設計的能力。這時你可以用渲染函式，它比模板更接近編譯器。

基礎

如何使用：

render: function (createElement) {
// createElement函式返回結果是VNode
return createElement(
tag, // 標籤名稱
data, // 傳遞資料
children // 子節點陣列
)
}、

詳解

render函式涉及到vue裡的一個核心思想：虛擬DOM。

Vue 通過建立一個虛擬 DOM來追蹤自己要如何改變真實 DOM。請仔細看這行程式碼：

return createElement('h1', this.blogTitle)

createElement 到底會返回什麼呢？其實不是一個實際的 DOM 元素。它更準確的名字可能是 createNodeDescription，因為它所包含的資訊會告訴 Vue 頁面上需要渲染什麼樣的節點，包括及其子節點的描述資訊。我們把這樣的節點描述為“虛擬節點 (virtual node)”，也常簡寫它為“VNode”。“虛擬 DOM”是我們對由 Vue 元件樹建立起來的整個 VNode 樹的稱呼。

render方法的實質就是生成template模板；

render函式生成的內容相當於template的內容，所以使用render函式時，在.vue檔案中需要先把template標籤去掉。只保留邏輯層。

意思很明白，在腳手架生成的專案中，.vue檔案是通過template渲染的虛擬dom，template底層也是使用的render函式。一個元件最終的模板只能有一個，所以如果在專案中（.vue檔案）使用render函式，就要去掉template標籤；並且你只能作為元件來使用，不可能整個頁面都用render函式js手寫頁面吧~

vue 動態元件

• 動態元件就是幾個元件放在一個掛載點下，然後根據父元件的某個變數來決定顯示哪個，或者都不顯示。
• 在掛載點使用 component 標籤，然後使用 is =“元件名”，它會自動去找匹配的元件名，如果有，則顯示；

<component v-for="(item,index) in componentList" :key="index" :is="item"></component>