詳解Vue中的render:?h?=＞?h(App)示例代碼
更新時間：2023年09月04日 14:52:28 作者：Just?right
這篇文章主要介紹了Vue中的render:?h?=＞?h(App),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
聲明:只是記錄，會有錯誤，謹(jǐn)慎閱讀
我們用腳手架初始化工程的時候，main.js的代碼如下
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
// 把a(bǔ)pp組件放入容器中
render: h => h(App),
}).$mount('#app')但是我之前學(xué)的是這樣的
new Vue({
template:`<h1>dsaad</h1>`
})一運(yùn)行，好家伙，報錯
翻譯過來的意思就是引入的是一個閹割的vue，他沒有模版解釋器這東西，他給出的解決辦法有兩個:
- 用render函數(shù)
- 引入包含模版解釋器的vue即完整版本的vue
先看看第二種辦法回到main.js中，我發(fā)現(xiàn)我引入了vue，但就是這句話報錯的
import Vue from 'vue'
開始順藤摸瓜,看看他引入的是哪一個(按住ctrl鍵,點擊import Vue from 'vue’中單引號的vue)
把main.js中的import Vue from 'vue’換成import Vue from 'vue/dist/vue’即可
再來看看第一種辦法,
render: h => h(App)
比如說我要用render來實現(xiàn)下面代碼所顯示的效果
<h1> dasdasdsa</h1>
按照如下方式走
render:(createElement){
return createElement('h1','abc')
}
由于沒有用到vm，直接縮寫為箭頭函數(shù)
render:(createElement)=>{
return createElement('h1','abc')
}
只有{}中只有一句話，再省
render(createElement)=> createElement('h1','abc')
createElement太長了，縮寫成c
到了下面這里就有點像了
render(c)=> c('h1','abc')
'h1'表示是html的內(nèi)置元素，若是組件的話需要把單引號去掉
c(App)到此這篇關(guān)于詳解Vue中的render: h =＞ h(App)的文章就介紹到這了,更多相關(guān)Vue中render: h =＞ h(App)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
通常開發(fā)vue我們使用的是模板語法，其實還有和react相同的語法，那就是render函數(shù)，同樣支持jsx語法。Vue 的模板實際是編譯成了 render 函數(shù)。2017-05-05
vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
今天小編就為大家分享一篇vue實現(xiàn)重置表單信息為空的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在支付寶賬單頁面有這樣一個特效切換過渡動效滑入滑出效果，非常方便實用，那么這個功能如何實現(xiàn)的呢？下面小編通過vue實現(xiàn)路由切換過渡動效滑入滑出效果，感興趣的朋友一起看看吧2022-03-03
這篇文章主要介紹了vue 路由嵌套高亮問題的解決方法，主路由通過v-for循環(huán)出來，次路由通過url拼接的方式導(dǎo)航到子路由頁面，具體實現(xiàn)代碼大家參考下本文2018-05-05
vue-cli 項目打包完成后運(yùn)行文件路徑報錯問題
這篇文章主要介紹了vue-cli 項目打包完成后運(yùn)行文件路徑報錯問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本文主要介紹了vue 防止多次點擊，可以有效防止惡意點擊，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue.js實戰(zhàn)之組件之間的數(shù)據(jù)傳遞
這篇文章主要介紹了Vue.js實戰(zhàn)之組件之間的數(shù)據(jù)傳遞的相關(guān)資料，文中通過示例代碼和圖文介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
VUE訪問接口的時候,很可能出現(xiàn)跨域請求,從而被提供接口的服務(wù)器拒絕,下面這篇文章主要給大家介紹了關(guān)于Vue如何解決跨域問題的相關(guān)資料,需要的朋友可以參考下2022-02-02
本文主要介紹了在VueRouter中,meta對象的使用和配置方式,meta對象可以包含任何你希望附加到路由的自定義信息,這些配置信息可以靈活的滿足你的應(yīng)用需求,使得路由配置更具靈活性和可擴(kuò)展性2024-10-10