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 的寫法，需要 摒棄 vue的部分特性
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>