1. 程式人生 > >Vue2.0 render:h => h(App)

Vue2.0 render:h => h(App)

1 new Vue({
2 
3   router,
4   store,
5   //components: { App }  vue1.0的寫法
6   render: h => h(App)    vue2.0的寫法
7 }).$mount('#app')

render函式是渲染一個檢視,然後提供給el掛載,如果沒有render那頁面什麼都不會出來

vue.2.0的渲染過程:

1.首先需要了解這是 es 6 的語法,表示 Vue 例項選項物件的 render 方法作為一個函式,接受傳入的引數 h 函式,返回 h(App) 的函式呼叫結果。

2.其次,Vue 在建立 Vue 例項時,通過呼叫 render 方法來渲染例項的 DOM 樹。

3.最後,Vue 在呼叫 render 方法時,會傳入一個 createElement 函式作為引數,也就是這裡的 h 的實參是 createElement 函式,然後 createElement 會以 APP 為引數進行呼叫,關於 createElement 函式的引數說明參見:Element-Arguments

結合一下官方文件的程式碼便可以很清晰的瞭解Vue2.0 render:h => h(App)的渲染過程。

[官方文件][1]

1 render: function (createElement) {
2     return createElement(
3       'h' + this
.level, // tag name 標籤名稱 4 this.$slots.default // 子元件中的陣列 5 ) 6 }

相關推薦

Vue2.0 render:h => h(App)

1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的寫法 6 render: h => h(App) vue2.0的寫法 7 }).$mount('#app') render函式是渲染一個檢視,然後

Vue2.0 render:h => h(App)

.config component nbsp The out build vue 方法 bee 首先需要了解這是 es 6 的語法,表示 Vue 實例選項對象的 render 方法作為一個函數,接受傳入的參數 h 函數,返回 h(App) 的函數調用結果; 其次,Vue

render函式介紹,以及 render: h => h(App)

1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的寫法 6 render: h => h(App) vue2.0的寫法 7 }).$mount('#app')render函式是渲染一個檢視,然後提供給

Vue2.0 全家桶開發的網頁應用(參照吾記APP)

gis 安裝 str lib 兼容 定義主題 國外 刪除 ces github鏈接 借鑒吾記APP,使用 vue2.0+vue-router+vuex 為主要技術棧,elementui做為ui框架,多模塊 spa 模式,webpack2.0 負責模塊打包,gulp 負責處

基於vue2.0的一個豆瓣電影App

即將 tle count webp bad string random current strong 1、搭建項目框架 使用vue-cli 沒安裝的需要先安裝 npm intall -g vue-cli 使用vue-cli生成項目框架 vue init webpack-s

vue2.0 練習項目-外賣APP(1)

復雜 router sel 進入 ica 必須 目錄介紹 登錄 -s 前言   vue這個框架現在挺流行的,作為一個專註前端100年的代碼愛好者,學習下目前流行的框架是必須的!在網上搜索vue的項目是比較少的,在官網進行了入門學習後,沒有一個項目練習鞏固下,學了就等於沒學,

vue2.0render函數

pla log 函數 html const 節點 efault 信息 element 雖然vue推薦用template來創建你的html,但是在某些時候你也會用到render函數。 虛擬DOM Vue 通過建立一個虛擬 DOM 對真實 DOM 發生的變化保持追蹤。請近距離看

vue2.0:(八)、外賣App彈窗部分知識點總結

leave service eas 總結 icon main 在線支付 false amp 本篇文章是對外賣App彈窗部分知識點的總結。 知識點一:如何從接口取出不同的圖片。      答:     1、header.vue:          代碼: <

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑(一)

前言:學習Vue.js高仿餓了麼課程過程中,總結了這個Web App專案從準備到開發完畢自己覺得很重要的知識點。這一篇主要介紹:專案準備、頁面骨架開發、header元件開發。 專案github地址:https://github.com/66Web/ljq_eleme,歡迎Star。  

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑(二) 【重點突破】—— 當better-scroll 遇見Vue

 前言:上一篇專案總結介紹了頁面骨架的開發、header元件的開發,這一篇主要梳理:商品元件開發、商品詳情頁實現。專案github地址:https://github.com/66Web/ljq_eleme,歡迎Star。 goods

Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑(一)

原文https://www.cnblogs.com/ljq66/p/9980372.html 前言:學習Vue.js高仿餓了麼課程過程中,總結了這個Web App專案從準備到開發完畢自己覺得很重要的知識點。這一篇主要介紹:專案準備、頁面骨架開發、header元件開發。 專案github地址:

vue2.0:專案開始,首頁入門(main.js,App.vue,import...from)

接下來,就需要對main.js App.vue 等進行操作了。   但是這就出現了一個問題:什麼是main.js,他主要幹什麼用的?App.vue又是幹什麼用的?main.js 裡面的import from又在幹嘛?newVue({})是幹嘛的?裡面又需要什麼引數,它到底能幹什麼。在網上搜

【音樂App】—— Vue2.0開發移動端音樂WebApp專案爬坑(二)

前言:上一篇總結了專案概況、專案準備、頁面骨架搭建、推薦頁面開發,這一篇重點梳理歌手頁面開發、歌手詳情頁。專案github地址:https://github.com/66Web/ljq_vue_music,歡迎Star。   一、歌手頁面開發--singer

【音樂App】—— Vue2.0開發移動端音樂WebApp專案爬坑(三)

前言:在學習《慕課網音樂App》課程的過程中,第一次接觸並實踐了資料的跨域抓取和圍繞音樂播放展開的不同功能,也是這個專案帶給我最大的收穫,前面的實踐記錄分別總結了:推薦頁面開發和歌手頁面開發。這一篇主要梳理一下:音樂播放器的開發。專案github地址:https://github.com/66Web/ljq_

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑(一)

@import "../../common/stylus/mixin" .star .star-item display: inline-block background-repeat: no-repeat &.st

【餓了麼】—— Vue2.0高仿餓了麼核心模組&移動端Web App專案爬坑(二)

methods: { dropMove(el) { // console.log(el) for(let i=0; i<this.balls.length; i++) { let ball = this.bal

vue2.0動態元件及render

<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>這裡是Boor</h2> <component v-bin

vue2.0巢狀路由實現豆瓣電影分頁功能(附加豆瓣web-app)

前言 最近練習Vue,看到官方文件中的巢狀路由, 不做不知道,實在是太坑了,網上資料demo少之又少,然後自己就做了一個demo,用了vue2.0巢狀路由實現豆瓣電影分頁功能,供大家學習學習,寫得不好望見諒。 demo截圖: douban.gif Demo

vue2.0:子組件調用父組件

mount -c nth 2.0 data outer nbsp tro target main.js文件添加如下: new Vue({ router, render: h => h(App), data: { eventHub: new Vue() }

vue2.0的常用功能簡介

span nbsp color -i highlight href out con router 路由跳轉 當我們想要實現點擊鏈接跳轉時,可以使用$router來進行跳轉 語法如下: this.$router.push({path:"/www",query:{id: