详解Vue中的render: h => h(App)

news2024/11/28 0:53:08

声明:只是记录,会有错误,谨慎阅读

我们用脚手架初始化工程的时候,main.js的代码如下

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  // 把app组件放入容器中
   render: h => h(App),
}).$mount('#app')

但是我之前学的是这样的

new Vue({
	template:`<h1>dsaad</h1>`
})

一运行,好家伙,报错
在这里插入图片描述
翻译过来的意思就是引入的是一个阉割的vue,他没有模版解释器这东西,他给出的解决办法有两个:

  1. 用render函数
  2. 引入包含模版解释器的vue即完整版本的vue

先看看第二种办法
回到main.js中,我发现我引入了vue,但就是这句话报错的

import Vue from 'vue'

开始顺藤摸瓜,看看他引入的是哪一个(按住ctrl键,点击import Vue from 'vue’中单引号的vue)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
把main.js中的import Vue from 'vue’换成import Vue from 'vue/dist/vue’即可

再来看看第一种办法,

render: h => h(App)

比如说我要用render来实现下面代码所显示的效果

<h1> dasdasdsa</h1>

按照如下方式走

render:(createElement){
	return createElement('h1','abc')
}
由于没有用到vm,直接缩写为箭头函数
render:(createElement)=>{
	return createElement('h1','abc')
}

只有{}中只有一句话,再省
render(createElement)=>	 createElement('h1','abc')

createElement太长了,缩写成c
到了下面这里就有点像了
render(c)=>	 c('h1','abc')
		 'h1'表示是html的内置元素,若是组件的话需要把单引号去掉
		 c(App)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/968506.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PaddleNLP使用Vicuna

LLaMA 模型 LLaMa 是一个大型语言模型&#xff0c;由 Meta 开源。它的全称是 Large Language Model Meta AI&#xff0c;参数量从 70 亿到 650 亿不等。例如&#xff0c;130 亿参数的 LLaMA 模型在大多数基准上可以胜过参数量达 1750 亿的 GPT-3&#xff0c;而且可以在单块 V1…

Vue框架--Vue中的事件

1.事件处理 事件的基本使用: (1).使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名; (2).事件的回调需要配置在methods对象中,最终会在vm上; (3).methods中配置的函数,不要用箭头函数!否则this就不是vm了; (4).methods中配置的函数,都是被Vue所管理的函数,this的…

python 之import与from import 导入库的解析与差异

文章目录 1. **使用import导入整个模块**&#xff1a;2. **使用from import导入特定内容**&#xff1a;注意事项别名的使用 在Python中&#xff0c;import和from import是用于导入模块中内容的两种不同方式。下面详细介绍它们的用法和差异&#xff1a; 1. 使用import导入整个模…

python in excel 如何尝鲜 有手就行

众所周知&#xff0c;微软在8月下旬放出消息python已入驻excel&#xff0c;可到底怎么实现呢。 今天我就将发布python in excel的保姆级教程&#xff0c;开始吧&#xff01; 获取office 365 账号 首先我们要有微软office365 这时候需要再万能的某宝去找一个账号&#xff0c;…

梯度下降算法入门

提到梯度下降我们知道梯度下降算法是很多机器学习算法、深度学习算法的基础。 首先我们需要明确一些概念什么是梯度&#xff1a; 梯度的本意是一个向量&#xff08;矢量&#xff09;&#xff0c;表示某一函数在该点处的方向导数沿着该方向取得最大值&#xff0c;即函数在该点处…

嵌入式学习笔记(10)mkv210_image.c代码详解

第1步&#xff1a;检验用户传参是不是3个。 第2步&#xff1a;分配16KB buffer并且填充为0. 第3步&#xff1a;打开源bin&#xff08;led.bin&#xff09;&#xff0c;判断bin长度是否不大于16KB-16Bytes 第4步&#xff1a;以16个字符串填充0~15这16个Bytes 第5步&#xff…

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书成都理工大学图书馆

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书成都理工大学图书馆

Zabbix部分避坑知识点

一、密码重置 在使用zabbix的过程中由于默认密码过于简单&#xff0c;往往会修改密码并配置为自动登录&#xff0c;时间一长往往忘记密码&#xff0c;造成无法登录的情况&#xff0c;这种情况就需要重置密码。Zabbix的密码存储在数据库中&#xff0c;可通过数据库重置。在Zabb…

Jpeg文件格式详解

摘要&#xff1a;之前做过一些Jpeg相关的需求&#xff0c;对Jpeg进行了一些了解但是不够系统&#xff0c;因此整理下Jpeg文件相关的内容。本文描述了Jpeg文件格式的详细构成以及JPEG/JFIF&#xff0c;JPEG/EXIF的区别。   关键字&#xff1a;JPEG,JFIF,EXIF 1 简介 JPEG&…

瑞吉外卖简历也许可以这样写

项目描述&#xff1a; 瑞吉外卖是一款专门为餐饮企业&#xff08;餐厅、饭店&#xff09;定制的软件产品&#xff0c;包括系统管理后台和移动端应用两部分。系统管理后台主要提供给餐饮企业内部员工使用&#xff0c;用于对餐厅的分类、菜品、套餐、订单、员工等进行管理维护。…

unity2022版本 实现json读取保存 list自定义对象的读取与保存

1.序列化对象 通过unity自带的JsonUtility中的ToJson方法来序列化对象 public static string ToJson(object obj, bool prettyPrint) ToJson返回一个序列化后的json字符串&#xff0c; 参数一 要序列化的对象 参数二 设置是否返回结果是否带有可读性 默认是false就是不带…

Python中怎么解决内存管理的问题? - 易智编译EaseEditing

Python有自动的内存管理机制&#xff0c;这意味着大部分情况下你不需要手动管理内存&#xff0c;因为Python的垃圾回收机制会自动处理不再使用的对象。然而&#xff0c;有时候你仍然需要关注内存管理&#xff0c;特别是在处理大数据、长时间运行的应用或需要最大化性能的情况下…

04-Apache Directory Studio下载安装(LDAP连接工具)

1、下载 官网下载Apache Directory Studio 注意Apache Directory Studio依赖于jdk&#xff0c;对jdk有环境要求 请下载适配本机的jdk版本的Apache Directory Studio,下图为最新版下载地址 Apache Directory Studio Version 2.0.0-M16 基于 Eclipse 2020-12&#xff0c;最低要…

开源项目如何推进人工智能

推荐&#xff1a;使用 NSDT场景编辑器快速搭建3D应用场景 对于那些不熟悉这个概念的人来说&#xff0c;开源软件或项目是那些向公众提供源代码的软件或项目&#xff0c;允许他们查看、使用和修改它。使用开源软件和工具具有多种优势&#xff0c;尤其是在构建复杂的基于 AI 的产…

Unity中Shader的时间_Time

文章目录 前言一、_Time.xyzw分别代表什么二、_Time怎么使用 前言 Unity中Shader的时间_Time 一、_Time.xyzw分别代表什么 _Time.y 代表当前时间 二、_Time怎么使用 在需要使用的地方直接 * _Time.y 或 x / z / w 测试代码&#xff1a; Shader "MyShader/P0_9_5&qu…

当众讲话紧张不敢说话怎么办?

当在公众场合讲话时&#xff0c;紧张和不敢说话是很常见的问题。这种情况下&#xff0c;以下是一些帮助你克服紧张并提高自信的技巧和建议&#xff1a; 1. 准备充分&#xff1a;充分的准备是克服紧张的关键。在讲话前&#xff0c;确保你对主题有足够的了解&#xff0c;并进行适…

c语言tips-c语言的虚函数实现

0. 前言 学过面对对象的同学都知道虚函数是面向对象编程中的一个重要概念&#xff0c;它允许在基类和派生类之间实现多态性&#xff08;polymorphism&#xff09;。我们可以在基类去定义一个成员函数&#xff0c;然后再派生类再去覆盖写它&#xff0c;这样在不同派生类使用相同…

Vivado 添加FPGA开发板的Boards file的添加

1 digilent board file 下载地址 下载地址 &#xff1a; https://github.com/Digilent/vivado-boards 2 下载后 3 添加文件到 vivado 安装路径 把文件复制到 Vivado\2019.1\data\boards\board_files4 创建工程查看是否安装成功

微信小程序修改vant组件样式

1 背景 在使用vant组件开发微信小程序的时候&#xff0c;想更改vant组件内部样式&#xff0c;达到自己想要的目的&#xff08;van-grid组件改成宫格背景色为透明&#xff0c;默认为白色&#xff09;&#xff0c;官网没有示例&#xff0c;通过以下几步修改成功。 2 步骤 2.1 …

zabbix模版和监控项、触发器

zabbix添加监控主机的流程 自定义监控项实现流程 被控端添加监控项 /etc/zabbix_agent2.d/xxx.conf UserParameterkey , 命令 ; restart服务器端测试 zabbix_get -s 主机 -k keyweb 创建模板web 在模板添加监控项web 模板关联至主机观察数据和图形 创建监控项名称 获取监控项…