new Vue({ el: '#app', router,//实例化,表示会使用 render: h => h(App)//vue2.0写法 //以下是vue1.0的写法 //components: { App },//注册组件信息 // template: '<App/>'//简写的模板调用组件的标签 }) 将render: h => h(App) 根据es6语法分解为: render: h => h(App); 等价于 render: h => {return h(App);} 等价于 render: function(h) { return h(App);} 等价于 render: function(createElement) { return createElement(App); } render函数用来渲染视图,也提供给el挂载,所以使用render函数就是为了页面显示出来。 1.render 方法是一个函数,在接受传入的参数 h 函数后,返回 h(App) 的函数调用结果。 2.在创建 vue 实例时,通过调用 render 方法来渲染实例页面的 DOM 结构。 3.当vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,h 的实参是 createElement 函数,然后 createElement 会以 App为参数进行调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>createElement方法应用</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <p>下面会使用createElement方法创建DOM结点</p> <div id="vue-app"></div> <script type="text/javascript"> var app=Vue.component('app',{ template:'<h1>test</h1>' }) new Vue({ el: '#vue-app', render: function (createElement) { // return createElement('h1', '一则头条');//这个方式也可以 return createElement(app);//使用调用组件 }, }); </script> </body> </html>