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