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

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

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

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew 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.mzph.cn/news/65304.shtml

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

相关文章

sql查找最晚一天/日期最大的一条记录 两种方法

例&#xff1a;查找最晚入职员工的所有信息 建表&#xff1a; CREATE TABLE employees ( emp_no int(11) NOT NULL, birth_date date NOT NULL, first_name varchar(14) NOT NULL, last_name varchar(16) NOT NULL, gender char(1) NOT NULL, hire_date date NOT NULL, PRIMA…

FPGA 学习笔记:Vivado 工程管理技巧

前言 当前使用 Xilinx 的 FPGA,所以需要熟悉 Xilinx FPGA 的 开发利器 Vivado 的工程管理方法 这里初步列举一些实际 Xilinx FPGA 开发基于 Vivado 的项目使用到的工程的管理技巧 代码管理 做过嵌入式软件或者其他软件开发的工程技术人员,都会想到使用代码管理工具,如 SVN 、…

Lua - 替换字符串中的特殊字符

//替换指定串 s string.gsub("Lua is good", "good", "bad") print(s) --> Lua is bad//替换特殊字符 a "我们使用$"; b string.gsub(a, "%$", "RMB"); print(b) --> 我们使用RMB//替换反斜杠 path …

Python入门教程 - 基本语法 (一)

目录 一、注释 二、Python的六种数据类型 三、字符串、数字 控制台输出练习 四、变量及基本运算 五、type()语句查看数据的类型 六、字符串的3种不同定义方式 七、数据类型之间的转换 八、标识符命名规则规范 九、算数运算符 十、赋值运算符 十一、字符串扩展 11.1…

AtCoder Beginner Contest 318

目录 A - Full Moon B - Overlapping sheets C - Blue Spring D - General Weighted Max Matching E - Sandwiches F - Octopus A - Full Moon #include<bits/stdc.h> using namespace std; const int N1e65; typedef long long ll ; const int maxv4e65; typedef …

Linux map type uncache 和 write combine区别

文章目录 前言一、定义二、隐含区别总结 前言 这段时间被Map Cache Type坑了一次。 GPU的PCI bar地址map成uncache 的还是 write combine&#xff1f; 一、定义 uncache(uc) &#xff1a; map后&#xff0c;CPU读写不经过Cache write combine(wb): map后&#xff0c;CPU读写同…

机器学习课后习题 ---数学基础回顾

(一)选择题 1.函数y=1/(x+1)是 A.偶函数 B.奇函数 C.单调函数 D.无界函数 2.设f(sin(x/2)=cosx+1,则f(x)为() A.2x-2 B.2-2x C.1+2 …

mac使用VsCode远程连接服务器总是自动断开并要求输入密码的解决办法

在mac中使用vscode远程连接服务器&#xff0c;时常会出现自动断开并要求重新输入服务器密码的问题&#xff0c;接下来让我们来解决它&#xff1a; 1、首先&#xff0c;在本地创建公钥&#xff1a; ssh-keygen 这条命令执行之后&#xff0c;出现提示直接回车即可&#xff1b;直…

内网穿透神器-frp的概念,搭建和使用,方便访问内网服务

FRP概念 FRP是什么(借助官网的描述)&#xff1f; frp 是一个专注于内网穿透的高性能的反向代理应用&#xff0c;支持 TCP、UDP、HTTP、HTTPS 等多种协议&#xff0c;且支持 P2P 通信。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。 为什么是用FR…

CSS流光按钮-圆形

主要思路 仅保留一条边框 border-radius 50%drop-shadow动画 animation keyframes 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …

计算机视觉工程师学习路线

1. 学习编程语言和基础库 学习Python语言,掌握基础语法、函数、面向对象编程等概念学习Numpy库,用于科学计算和多维数组学习OpenCV库,包含了许多图像处理和计算机视觉算法学习TensorFlow/PyTorch,主要的深度学习框架 2. 学习数字图像处理算法 图像的表示方式(像素、灰度、二…

WireShark流量抓包详解

目录 Wireshark软件安装Wireshark 开始抓包示例Wireshakr抓包界面介绍WireShark 主要界面 wireshark过滤器表达式的规则 Wireshark软件安装 软件下载路径&#xff1a;wireshark官网。按照系统版本选择下载&#xff0c;下载完成后&#xff0c;按照软件提示一路Next安装。 Wire…

线程、并发相关---第一篇

系列文章目录 文章目录 系列文章目录一、线程的生命周期?线程有几种状态二、sleep()、wait()、join()、yield()的区别一、线程的生命周期?线程有几种状态 1.线程通常有五种状态,创建,就绪,运行、阻塞和死亡状态。 2.阻塞的情况又分为三种: (1)、等待阻塞:运行的线程执行…

排盘程序算法探寻举例(陆先生八字)

算法实现&#xff1a; 1.庚生未月&#xff0c;燥土不能生金&#xff0c;日支申金为日主墙根&#xff0c;月干辛金比劫透出傍身&#xff0c;月干强。年干甲木自做寅木强根&#xff0c;又得月支乙木中气&#xff0c;甲木强旺有力&#xff0c;时干丙火七杀得未土余气&#xff0c;…

高频面试题:如何分别用三种姿势实现三个线程交替打印0到100

最近面试遇到的一道题&#xff0c;需要三个线程交替打印0-100&#xff0c;当时对多线程并不是很熟悉因此没怎么写出来&#xff0c;网上搜了之后得到现 synchronized wait/notifyAll 实现思路&#xff1a;判断当前打印数字和线程数的取余&#xff0c;不等于当前线程则处于等待…

前端常使用的一些网站

一.echarts Examples - Apache ECharts 身为一个资深的前端工程师 echarts 肯定是必不可少的呀 二. echarts社区 series-line折线图 - makeapie echarts社区图表可视化案例 这里面有各种大神 封装好的图例 拉下来直接使用即可 三. Element Element - The worlds most po…

MyBatis学习

一、Mybatis使用 1、新建mybatis配置文件 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd"> <configu…

微信小程序编辑器代码格式缩进设置

第一步点击这个编辑器设置&#xff1a; 然后设置tab为空格&#xff0c;并且设置占几个空格&#xff0c;这里是4个空格。 这样就好了&#xff0c;文件保存就会自动设置好缩进格式了。

QT串口助手:识别串口号,发送,接收,十六进制

1 摘要 本文主要讲述如何使用QT从零开始实现一个串口助手的基本功能&#xff0c;功能如标题所示&#xff0c;文末附有源码供大家参考。文中若有纰漏&#xff0c;烦请读者斧正。 2 环境 QT 5.14.1Window 11 3 功能 串口打开/关闭 启动软件时识别串口号打开按键随串口打开状…

机器学习之 Jupyter Notebook 使用

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…