zoukankan      html  css  js  c++  java
  • render: h => h(App) 是什么意思?

    背景

    在学习Vue.js时,使用vue-cli创建了一个Vue项目,main.js文件中有一行代码不知道是什么意思。在网上搜索了下,得到了答案,在此记录下。

    main.js 文件内容

    import Vue from 'vue'
    import App from './App.vue'
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    

    h => h(App)这是什么,完全看不懂啊!!!So Google

    解惑释疑

    {
    	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>
    
  • 相关阅读:
    作业十一
    作业十
    作业九
    作业八
    作业七
    作业六
    作业五
    作业四
    eclipse+maven+web服务,实现对hdfs的目录浏览展示
    Eclipse+hadoop伪态式分布+API
  • 原文地址:https://www.cnblogs.com/longying2008/p/6408753.html
Copyright © 2011-2022 走看看