vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)

render函数的作用

render函数是vue通过js渲染dom结构的函数createElement,约定可以简写为h

官方文档中是这样的,createElement 是 Vue.js 里面的 函数,
这个函数的作用就是生成一个 VNode节点,
render 函数得到这个 VNode 节点之后,
返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。

render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数

vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)_第1张图片 

 

import Vue from 'vue'
import App from './App.vue'
import store from "@/store";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在使用vue cli生成的vue项目,里面的main.js里面。默认用了render函数。不太懂。所以学一下、

这个是一种简写的方法。

 render 函数用法:

$mount()手动挂载

当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;

假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。

比如挂在路由的时候。这样写:

vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)_第2张图片

$mount()手动挂载

当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;

 

假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。例如:

new Vue({
 
//el: '#app',
 
router,
 
render: h => h(App)
 
// render: x => x(App)
 
// 这里的render: x => x(App)是es6的写法
 
// 转换过来就是: 暂且可理解为是渲染App组件
 
// render:(function(x){
 
// return x(App);
 
// });
 
}).$mount("#app");

资料:

终于搞懂了vue 的 render 函数(一) -_-|||_Amy的博客-CSDN博客_render函数文章目录render 函数作用render 函数讲解render 函数的返回值(VNode)render 函数的参数(createElement)createElement 函数的返回值(VNode)createElement 函数的参数(三个)结合代码vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了。建议配合文档阅读,本文也是根据文档加上自己的理解。注:本文代码都是在单文件组件中...https://blog.csdn.net/sansan_7957/article/details/83014838

new Vue({ render: h => h(App), }).$mount('#app')什么意思 - 轻轻的往前走 - OSCHINA - 中文开源技术交流社区用 HBuilder-x 建立vue项目,默认vue2.6.1+vue-cli 然后突然发现main.js下结构和以前不一样了。 new Vue({ render: h => h(App), }).$mount('#app') 然后,不懂了。百度下,特此记录。。。 export default 打包的......https://my.oschina.net/qingqingdego/blog/4469918

你可能感兴趣的:(前端开发,vue.js,elementui,javascript)