【前端】main.js中app.vue中 render函数的作用及使用背景

news2024/11/18 9:30:21

vue.js中的main.js中的作用是将app组件挂载到页面中,其中app组件是汇总所有组件元素的组件。main.js的创建vue实例。

#认为的版本
import APP from './App.vue';

new Vue({
    el:'#root',
    template:'<App></App>',
    components:{App},
})

#实际的版本
/*
整个项目的入口文件
*/
//引入vue
import Vue from ‘vue’  //引入的是残缺版的vue,

//引入app组件,所有组件的父组件
import App from './App.vue'

//关闭生产提示
Vue.config.productionTip = false

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

/*
这里的new Vue({}).$mount('#app') 就等同于 new Vue({ el:'#app' })
*/

上述两个版本之间的区别在于用了render函数和没有用render函数,render的作用是将js中所搭建的标签模版渲染到页面中。
认为的版本在vue脚手架创建的项目里是不可运行的,因为脚手架中到实际运行的js中是没有模版解析器的,只是在开发阶段有,打包成浏览器所认识的版本是没有的。如果想使用需要引入完整版的vue.js 但是这会导致vue内容多。可能会导致性能降低。

Vue = 核心+模版解析器(1/3) 带有runtime的vue.runtime.xxx.js都是运行时vue 没有模版解析器的文件。

在这里插入图片描述

最简单的render函数的使用

render函数

render(createElement){
    return createElement(‘h1’,'你好啊’);
}

ps: 简单来说,render函数字符串模版的代替方案,接收createElement创建的标签来将所创建的dom元素渲染到页面上。

大家加油,不要让潜在堕落期的自己打败向上的自己。

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

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

相关文章

基于imx6ull平台opencv的图像采集和显示屏LCD显示功能(带Qt界面)

目录 一、概述二、环境要求2.1 硬件环境2.2 软件环境三、开发流程3.1 编写测试3.2 验证功能一、概述 本文档是针对imx6ull平台opencv的图像采集和显示屏LCD显示功能,创建Qt工程,在工程里面通过点击按钮,实现opencv通过摄像头采集视频图像,将采集的视频图像送给显示屏LCD进…

docker-compose elasticsearch 集群搭建(用户登录+https访问)

文章目录 前言docker-compose elasticsearch 集群搭建(用户登录+https访问)1. 效果2. 制作elasticsearch + 分词器镜像2.1. 拉取elasticsearch:7.11.12.2. 制作特定版本镜像3. docker-compose elasticsearch 集群制作4. es账户密码初始化前言 如果您觉得有用的话,记得给博主点…

<Python>基于python使用PyQt6编写一个延迟退休计算器

前言 这两天关于延迟退休的话题比较火&#xff0c;官方也退出了延迟退休计算器的小程序&#xff0c;我们使用python来实现一个。 环境配置 系统&#xff1a;windows 平台&#xff1a;visual studio code 语言&#xff1a;python 库&#xff1a;pyqt6 程序依据 程序的算法依据…

常见本地大模型个人知识库工具部署、微调及对比选型

文章目录 常见本地大模型个人知识库工具部署、微调及对比选型知识库侧AnythingLLMMaxKBRAGFlowFastGPTDifyOpen WebUI小结大模型侧OllamaLM StudioXinference小结大模型侧工具安装部署实践Ollama部署Windows部署OllamaLinux部署OllamaOllama使用技巧模型更换存储路径导出某个模…

外国车牌字符识别与分类系统源码分享

外国车牌字符识别与分类检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Co…

【Java面试】第九天

&#x1f31f;个人主页&#xff1a;时间会证明一切. 目录 Spring中如何开启事务&#xff1f;编程式事务声明式事务声明式事务的优点声明式事务的粒度问题声明式事务用不对容易失效 Spring的事务传播机制有哪些&#xff1f;Spring事务失效可能是哪些原因&#xff1f;代理失效的情…

Ubuntu下beanstalkd无法绑定局域网IP地址以及消息队列beanstalkd上的error: JOB_TOO_BIG的解决

一、ubuntu下beanstalkd无法绑定局域网IP地址 今天因为业务需要&#xff0c;我把之前安装的beanstalkd所绑定的IP地址由127.0.0.1改成局域网IP地址&#xff0c;但是怪了&#xff0c;显示beanstalkd已经启动&#xff0c;查看端口监控也显示IP地址变了&#xff0c;但是使用telnet…

matlab绘制不同区域不同色彩的图,并显示数据(代码)

绘图结果如下&#xff1a; 代码如下&#xff1a; A为绘图的数据&#xff0c;每个数据对应着上图中的一个区域&#xff0c;数据大小决定区域的颜色 % 假设有一系列的数据点 Arand(5,6); %A为绘图的数据&#xff0c;数据大小决定颜色 wei_shu%.3f; %代表数据保留三位小…

[Golang] Channel

[Golang] Channel 文章目录 [Golang] Channel什么是Channelchannel的初始化channel的操作双向channel和单向channel为什么有channel有缓冲channel和无缓冲channlechannel做一把锁 从之前我们知道go关键字可以开启一个Goroutine&#xff0c;但是Goroutine之间的通信还需要另一个…

Recyclerview实现滑动居中缩放菜单

最近项目中需要的一个滑动菜单效果:要求当前居中选项放大、滑动时有缩放效果、点击两边的选项滑动到屏幕中央、停止滑动选项停留在屏幕中间(类似viewPager的效果),为了直观,先上最终实现效果图: 大体思路: Recyclerview item头尾添加空数据,让第一个和最后一个item也能…

计算机组成原理(第二次笔记)

各种码 真值 (书写用)&#xff1a; 将用“”、“-” 表示正负的二进制数称为真值 机器不能识别书写格式&#xff0c;故用“0/1”表示“/-”符号。 机器码 (机器内部使用)&#xff1a; 将符号和数值一起编码表示的二进制数称为机器码。 常用机器码&#xff1a;原码、 反码、 补…

Linux网络编程 --- 高级IO

前言 IO Input&&Output read && write 1、在应用层read && write的时候&#xff0c;本质把数据从用户层写给OS --- 本质就是拷贝函数 2、IO 等待 拷贝。 等的是&#xff1a;要进行拷贝&#xff0c;必须先判断读写事件成立。读写事件缓冲区空间满…

Kafka+PostgreSql,构建一个总线服务

之前开发的系统&#xff0c;用到了RabbitMQ和SQL Server作为总线服务的传输层和存储层&#xff0c;最近一直在看Kafka和PostgreSql相关的知识&#xff0c;想着是不是可以把服务总线的技术栈切换到这个上面。今天花了点时间试了试&#xff0c;过程还是比较顺利的&#xff0c;后续…

破解AI生成检测:如何用ChatGPT降低论文的AIGC率

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 降低论文的“AIGC率”是个挑战&#xff0c;但有一些策略可以尝试。使用ChatGPT逐步调整和改进内容&#xff0c;使其更加自然和原创&#xff0c;降低AI检测工具识别出高“AIGC率”的概率…

专访阿里云:AI 时代服务器操作系统洗牌在即,生态合作重构未来

编者按&#xff1a;近日&#xff0c;2024 龙蜥操作系统大会已于北京圆满举办。大会期间&#xff0c;CSDN 采访了阿里云基础软件部资深技术总监、龙蜥社区技术委员会主席杨勇&#xff0c;前瞻性宏观解读面向 AI 智算时代&#xff0c;服务器操作系统面临的挑战与机遇。以下为采访…

云曦2024秋考核

真正的hacker 进去以后一眼就能看出来&#xff0c;是ThinkphpV5漏洞&#xff0c;只是版本不能确定&#xff0c;一开始考核的时候是&#xff0c;抓包看了php的版本&#xff0c;是7.23&#xff0c;是手注了几个尝试出来的&#xff08;后面才发现报错信息里面就有&#xff09;。漏…

记录word转xml文件踩坑

word文件另存为xml文件后&#xff0c;xml文件乱码 解决方法&#xff1a; 1.用word打开.docx文件 2.另存为xml文件 3.点击工具 -> Web选项 -> 编码&#xff0c;选择UTF-8 4.点击确定 5.使用notpad打开xml文件 6.使用xml tool进行xml格式化即可。

【免费资料推荐】数据资产管理实践白皮书(6.0版)

荐言&#xff1a;随着数字经济的快速发展&#xff0c;数据已成为企业最重要的资产之一。为有效管理和利用数据资产&#xff0c;各行业纷纷推出数据管理框架和标准。数据资产管理实践白皮书&#xff08;6.0版&#xff09;由中国信息通信研究院联合相关企业共同编写&#xff0c;是…

利士策分享,细品礼仪之美:在日常中优雅相处的艺术

利士策分享&#xff0c;细品礼仪之美&#xff1a;在日常中优雅相处的艺术 在当今这个快节奏、高压力的社会里&#xff0c;人与人之间的交往似乎被简化成了快餐式的信息交流。 然而&#xff0c;根植于文化深处的礼仪之花&#xff0c;依然是促进社会和谐、深化人际关系的宝贵财富…

python使用Pandas读取excel的行列内容

我的Excel文件名称是“测试.xlsx” 首先读取excle的文件内容 import pandas as pd dfpd.read_excel(测试.xlsx) #这个会直接默认读取到这个Excel的第一个sheet print(df)可以看看输出的是什么&#xff1a; 2. df.loc[0]&#xff0c;表示读取Excel的第一行&#xff08;这里…