如何解析Vue脚手架生成的main.js文件

使用Vue CLI生成一个项目后,会在项目根目录中生成main.js文件,其主要内容如下。

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

初学者往往会对上述代码感到疑惑。这里对这段代码进行以下解析。

1. Vue实例

上述代码中,使用Vue()构造函数创建Vue应用的一个根实例。每个Vue应用都必须从一个根实例开始。

2. 在选项对象中指定渲染函数

实例化时应该为Vue()构造函数传入一个选项对象,其中可以包含各种各样的选项,例如el、data、methods、computed、render等等。

render用于指定Vue实例的渲染函数,其类型为:(createElement: () => VNode) => VNode,createElement的返回值为VNode,即虚拟节点。作为Vue生态系统的惯例,使用h作为createElement的别名。

渲染函数给出字符串模板的代替方案,可以使开发者发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建虚拟节点。如果在Vue 选项中存在 render 函数,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

上述代码中,渲染函数以ES6箭头函数形式给出,如果改用ES5语法,则应写成以下形式:

function(createElement) {return cerateElement(App) //App为从App.vue文件中导入的组件}

3. 挂载Vue实例

创建Vue实例后,调用该实例的$mount()方法挂载该实例,并为其传入元素或选择器作为参数,上述代码中为id选择器。

如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,即没有关联的 DOM 元素。在这种情况下,可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

郑重声明:本文内容及图片均整理自互联网,不代表本站立场,版权归原作者所有,如有侵权请联系管理员(admin#wlmqw.com)删除。
(0)
用户投稿
上一篇 2022年6月28日
下一篇 2022年6月28日

相关推荐

  • 微信第二扣款顺序在哪设置(微信支付顺序设置方法)

    我们在使用微信支付的时候,经常遇到支付顺序的问题,就是扣款渠道的顺序,有零钱、银行卡等多种不同的支付扣款方式。 也许系统自动设置的或者以前设置的不符合现在的习惯,那么我们应该怎么去…

    2022年10月31日
  • IIC驱动?C语言使用面向对象来实现

    一.简述 使用面向对象的编程思想封装IIC驱动,将IIC的属性和操作封装成一个库,在需要创建一个IIC设备时只需要实例化一个IIC对象即可,本文是基于STM32和HAL库做进一步封…

    2022年6月13日
  • 明日方舟终末地官网代码内容解析,游戏模式提前曝光?

    《明日方舟终末地》(以下简称终末地)在3月份上线了官网,而有细心的网友通过查看官网的代码,发现了一些跟终末地有关的内容,笔者就针对代码中一些有用的信息进行拆解并进行针对性的解析。 …

    2022年8月14日
  • 全栈自动化测试之python基础基本数据类型数值类型及序列类型

    文章末尾给大家留了大量的福利 前言: 大家都知道学习软件测试需要必须要掌握一门开发语言,对于测试小白来说我们都是推荐python进行学习,因为比较简单,那么今天笔者想给大家唠唠py…

    2022年8月11日
  • 看看别人后端API接口性能优化的11个方法,那叫一个优雅

    1.索引 接口性能优化大家第一个想到的可能是:优化索引。 没错,优化索引的成本是最小的。 你通过查看线上日志或者监控报告,查到某个接口用到的某条sql语句耗时比较长。 这时你可能会…

    2022年6月20日
  • Linux下载及安装jdk1.8

    一、下载jdk1.8 # wget –no-check-certificate –no-cookies –header “Cooki…

    2022年7月18日
  • Flask博客实战 – 实现全站导航菜单及首页数据展示

    Flask上下文处理器 我们博客的设计是全站顶部菜单为通用菜单,调用的数据为文章的分类,那么如何将文章分类数据传递到每个页面的上下文呢? 为了将新变量自动注入模板的上下文中,Fla…

    2022年7月4日
  • 新电脑买回来要怎么做?这4个操作设置后电脑不卡顿

    新电脑买回来要怎么做?大部分人可能会选择先下载新软件。很多人的教训告诉你,千万别这样做,即使是新电脑也会因为你的不当操作出现卡顿的情况。 因此,拿到新电脑要提前做好保护策略,预防你…

    2022年7月28日
  • 如何在Excel中自动录入时间数据?

    我是Excel大全。“4个函数,2组快捷键”这就分享给你! Excel中,可以录入静态时间,也可以录入动态时间。 静态时间,就是录入当前的时间和日期,一旦录入,时间就不会改变; 动…

    2022年4月14日
  • 你今天玩游戏了吗?游戏道具了解下

    【面试题】 某游戏的某促销活动,会向玩家推荐一个道具,同时会得到该道具的折扣券。折扣券无有效期,但购买道具一次后失效。推荐一个新的道具,也会导致旧的折扣券失效。 假设道具推荐、查看…

    2022年7月4日

联系我们

联系邮箱:admin#wlmqw.com
工作时间:周一至周五,10:30-18:30,节假日休息