render:h => h(App) 是什麼意思?

來源:互聯網
上載者:User

標籤:一行代碼   怎樣   hello   dom   func   disable   conf   int   方法   

在學習vue.js時,使用vue-cli建立了一個vue項目,main.js檔案中有一行代碼不知道什麼意思。在網上搜尋得到如下解答:

參考一:https://www.cnblogs.com/longying2008/p/6408753.html

參考二:https://www.cnblogs.com/whkl-m/p/6970859.html

main.js檔案內容

import Vue from ‘vue‘import App from ‘./App‘Vue.config.productionTip = false    // 設定false,封鎖vue在啟動時產生生產提示/* eslint-disable no-new */ new Vue({  el:‘#app‘,  render: h => h(App)    })

 註:/* eslint-disable no-new */這不是一句注釋,在js裡面,new一個對象,需要賦值給某個值(變數),用Vue執行個體化時,不需要賦值給某值(變數),所以需要單獨給配一條規則,給new Vue這行代碼上面加這個注釋,把這行代碼規則的校正跳過,通過eslint-disable。是eslint的常用技巧之一。

言歸正傳:

render: h => h(App)   這是是一個箭頭函數是肯定的,那對應的es5形式是怎樣的呢???

  如下:

{   render: h => h(App)}

  等價於:

{   render: h =>{        return h(App)    } }

  等價於:

{    render: function(h) {        return h(App);    }}

  即:

{    render: function(createElement) {        return createElement(App);    }}

  createElement 參數

其實看了createElement的官方文檔,我還是不明白createElement的用法。createElement方法的參數有幾個?各個參數的含義、類型是什嗎?

例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id="app"></div>    <script type="text/javascript" src="https://unpkg.com/vue"></script>    <script type="text/javascript">        var app = new Vue({            el: ‘#app‘, // 提供一個在頁面上已經存在的 DOM 元素作為 Vue 執行個體掛載目標            render: function (createElement) {                return createElement(‘h2‘, ‘Hello Vue!‘);            }        });    </script></body></html>

  

render:h => h(App) 是什麼意思?

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.