12-render函数
render函数
一、render的作用
非单文件组件时,创建vm的写法:
new Vue({el: '#root',template: `<App></App>`,components: {App}
})
但是该写法在脚手架中会报错。因为脚手架默认引入的是个残缺版的vue。
如果要避免报错,有2种解决方案:
-
引入完整版的vue
-
或者使用rander
在脚手架中,引入的Vue:
import Vue from 'vue'
实际引入的是dist/vue.runtime.esm.js,是一个不含模板解析器的js。
引入的js是配置在vue模块package.json的module配置项中。
如果要引入完整版的vue:
// 引入完整版的vue
import Vue from 'vue/dist/vue.js'
这时就可以正常的在new Vue中使用template配置。
如果使用了残缺版的vue,就需要使用render替换template配置。
例如:
template: `<h1>Hello</h2>`
替换为:
render(createElement) {return createElement('h1', 'Hello')
}
因为render没有用this,就可以简写为:
render:h => h('h1', 'Hello')
如果模板中的内容不是html标签,而是引入的组件,就可以写为:
render: h => h(App)
二、Vue库文件
vue组价的dist下有很多vue库文件:
其中vue.js是最完整最原始的vue,包括了Vue的核心功能和模板解析;
vue.runtime.xxxx.js是运行时库,里面移除了模板解析功能。
xxxx.esm.js是使用ES6进行模块化的库(ES6 Module)
xxxx.common.js使用CommonJS进行模块化的库
因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容。
对于.vue后缀的组件文件中使用标签配置的模板:
<template>{{msg}}
</template>
vue通过在package.json引入了vue-template-compiler来进行解析
先赞后看,养成习惯!!!^ _ ^ ❤️ ❤️ ❤️
码字不易,大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦!
相关文章:
12-render函数
render函数 一、render的作用 非单文件组件时,创建vm的写法: new Vue({el: #root,template: <App></App>,components: {App} })但是该写法在脚手架中会报错。因为脚手架默认引入的是个残缺版的vue。 如果要避免报错,有2种解决…...
磨金石教育摄影技能干货分享|杨元惺佳作欣赏——诗意人文
一般来说,人文摄影总会体现现实性多些。但杨老师是个摄影诗人,他的内心总能将刻板的现实融入美好的光芒。你在他的照片里,看着现实的摄影素材,所感受到的是诗意的绵绵未尽。春网(中国)正所谓春水碧于天&…...
在Pandas中通过时间频率来汇总数据的三种常用方法
当我们的数据涉及日期和时间时,分析随时间变化变得非常重要。Pandas提供了一种方便的方法,可以按不同的基于时间的间隔(如分钟、小时、天、周、月、季度或年)对时间序列数据进行分组。 在Pandas中,有几种基于日期对数据进行分组的方法。我们将…...
基于SPI的增强式插件框架设计
很久之前,为了诊断线上的问题,就想要是能有工具可以在线上出问题的时候,放个诊断包进去马上生效,就能看到线上问题的所在,那该是多么舒服的事情。后来慢慢的切换到 java 领域后,这种理想也变成了现实&#…...
176、【动态规划】leetcode ——1143. 最长公共子序列(C++版本)
题目描述 原题链接:1143. 最长公共子序列 题目描述 本题和 718. 最长重复子数组(动态规划) 的区别在于此时不要求令一个数组中元素连续。 动态规划五步曲: (1)dp[i][j]含义: 截止到text1[i …...
16行代码采集原神官网角色全图+全语音
嗨害大家好鸭!我是小熊猫~ 本来是不玩原神的, 但是实在是经不住诱惑鸭~ 毕竟谁能拒绝可以爬树、炸鱼、壶里造房子、抓小动物、躲猫猫的对战游戏捏~ 准备工具 源码资料电子书:点击此处跳转文末名片获取 准备模块 import requests import re import ex…...
Unity(二)--通过简单例子了解UGUI几个常用对象操作(Text,Image,Button)
目录 文本框等UI对象的添加Canvas 画布给Canvas添加脚本,绑定要操作的对象文本框Text的使用图像Image的使用更换图片Type:显示图片相关按钮Button的使用过渡导航事件绑定文本框等UI对象的添加 Canvas 画布 所有的UI元素的父物体,。 当创建一个UI元素的时候,如果没有Canvas…...
手写一个文件上传demo
背景 最近闲来无事,同事闻了一下上传文件的基本操作,如何用文件流来实现一个文件的上传功能 基本概念 流(Stream)是指在计算机的输入输出操作中各部件之间的数据流动。可以按照数据传输的方向,将流可分为输入流和输出…...
通过 Apifox Echo 了解 Content-Length
Content-Length 用以指定 Body 的体积。响应头中的 Content-Length 指定 Response Body 的体积,请求头中的 Content-Length 指定 Request Body 的体积。 通过 Content-Length,HTTP 客户端/服务器端将会根据该头部计算出 Body 的大小。 请求头中的 Cont…...
ESP32设备驱动-CPU频率设置
CPU频率设置 文章目录 CPU频率设置1、ESP32的CPU频率介绍1.1 CPU时钟1.2 外设时钟2、CPU频率设置API3、软件准备4、硬件准备5、CPU频率设置实例5.1 CPU频率读取5.2 CPU频率设置在本文中,将介绍如何通过Arduino Core设置或更改ESP32 CPU时钟速度(频率)。 1、ESP32的CPU频率介…...
超声波风速风向传感器的技术参数
技术参数 风速 ◆ 启动风速:0.1m/s ◆ 测量范围:0~30m/s(可定制) ◆ 测量精度:(0.2m/s0.02*v)(v为真实风速) ◆ 分 辨 率:0.01m/s 风向 ◆ 测量范围:0~359 ◆ 测量精度&a…...
【vue2每日小知识】实现store中modules模块的封装与自动导入
🥳博 主:初映CY的前说(前端领域) 🌞个人信条:想要变成得到,中间还有做到! 🤘本文核心:省去我们store仓库中分模块时的需要每次导入index的问题 目录 【前言】在store中如何简…...
【Leetcode 剑指Offer】第3天 字符串(简单)
字符串剑指 Offer 05. 替换空格字符串构造函数和析构函数操作函数剑指 Offer 58 - II. 左旋转字符串剑指 Offer 05. 替换空格 题:实现一个函数,把字符串 s 中的每个空格替换成"%20"。 class Solution { public:string replaceSpace(string s…...
【双指针问题】LeetCode344、345、 844、283问题详解及代码实现
Halo,这里是Ppeua。平时主要更新C语言,C,数据结构算法......感兴趣就关注我吧!你定不会失望。 🌈个人主页:主页链接 🌈算法专栏:专栏链接 我会一直往里填充内容哒! &…...
Linux基础命令-netstat显示网络状态
文章目录 netstat 命令介绍 语法格式 基本参数 显示各列内容分析 1)netstat -a显示各列内容分析 2)netstat -r显示各列内容分析 3)netstat -i 显示各列内容分析 参考实例 1)显示系统网络状态的所有连接 2)…...
液氮恒温器(电学)T9015的技术规格
液氮型低温恒温器,利用液氮作为降温媒介,标准恒温器可实现快速降温至液氮温度(约20min),其工作原理是在恒温器内部液氮腔内装入液氮,通过调整控温塞与冷指的间隙来保持冷指的漏热稳定在一定值上,…...
字节跳动大规模实践埋点自动化测试框架设计
大数据时代,多数的web或app产品都会使用第三方或自己开发相应的数据系统,进行用户行为数据或其它信息数据的收集,在这个过程中,埋点是比较重要的一环。 埋点收集的数据一般有以下作用: 驱动决策:ABtest、漏…...
自动化测试优势和劣势
一、自动化测试概述 软件自动化测试是相对手工测试而存在的,由测试人员根据测试用例中描述的规程一步步执行测试,得到实际结果与期望结果的比较。在此过程中,节省人力、时间或硬件资源,提高测试效率。 二、自动化测试优势&劣…...
数据结构---顺序表
专栏:数据结构 个人主页:HaiFan. 专栏简介:从零开始,数据结构!! 顺序表前言接口实现SListInit初始化和SListDestory销毁SListPrint打印表中的元素SListCheckCapacity检查表中空间SListPushBack尾插和SListP…...
springboot基础
文章目录[toc]SpringBoot概述spring springmvc springboot的关系Spring Boot简介微服务springboot的优点核心功能SpringBoot搭建使用IDEA快速搭建 Spring Boot项目入门案例研究项目结构pom 文件主程序类,主入口类配置文件、加载顺序开启配置文件注释配置文件和加载顺…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
