Vue2系列 — 渲染函数 (render + createElement)

news2025/1/13 9:52:08

官网文档:https://v2.cn.vuejs.org/v2/guide/render-function.html

1 render 函数

render 函数
不使用模板,使用 js 生成虚拟 dom

2 createElement()

接受的参数:

  • 参数1 节点类型
  • 参数2 attribute
  • 参数3 子节点

3 DEMO

在这里插入图片描述

<template>
  <div class="container">
    <!-- <WangEditorDemo></WangEditorDemo> -->
    <!-- <div v-hello>123</div> -->
    <!-- <input v-limit-input-number> -->
    <!-- <el-input v-model="name" v-limit-input></el-input> -->
    <!-- <IDBDemo></IDBDemo> -->
    <anchored-heading :level="1">Hello world!</anchored-heading>
    <anchored-heading :level="2">Hello world!</anchored-heading>
  </div>
</template>

main.js

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      // 参数1 节点类型 {String | Object | Function}
      'h' + this.level,   // 标签名称
      // 参数2 attribute {Object} 可选
      {
        'class': {
          foo: true
        },
        style: {
          color: 'red'
        },
      },
      // 参数3 子节点 {String | Array} 可选
      '123' // 文本节点
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

4 使用 JavaScript 代替模板功能(v-if/v-for/v-model…)

官方文档:https://v2.cn.vuejs.org/v2/guide/render-function.html

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

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

相关文章

BUUCTF 梅花香之苦寒来 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 注意&#xff1a;得到的 flag 请包上 flag{} 提交 密文&#xff1a; 下载附件&#xff0c;解压得到一张.jpg图片。 解题思路&#xff1a; 1、用010 Editor看了一下&#xff0c;刚开始以为是修改宽高的题&#xff…

人工智能基础部分21-神经网络中优化器算法的详细介绍,配套详细公式

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能基础部分21-神经网络中优化器算法的详细介绍&#xff0c;配套详细公式。本文将介绍几种算法优化器&#xff0c;并展示如何使用PyTorch中的算法优化器&#xff0c;我们将使用MNIST数据集和一个简单的多层感知…

Tensorflow-gpu搭建,转载备忘

转载来自&#xff0c;所有版本号全部一致可以直接成功&#xff1a; https://blog.csdn.net/m0_38068876/article/details/128364154 https://blog.csdn.net/m0_46149071/article/details/128456089?ops_request_misc&request_id&biz_id102&utm_termtensorflow%E5%…

内部网关协议_路由信息协议RIP_开放路径优先OSPF协议_基本知识

目录: 因特网路由选择协议概述 路由信息协议RIP 开放路径优先OSPF协议 因特网路由选择协议概述 一.路由选择分类 静态路由选择和动态路由选择 静态路由选择: 采用人工配置的方式给路由器添加网络路由、默认路由和特定主机路由等路由条目。静态路由选择简单、开销小&#…

Seaborn画图颜色和给定的RGB hex code不一致

使用以下代码画图&#xff1a; import seaborn as sns import matplotlib.pyplot as plt plt.figure(dpi150) x [A,B,C,D] y [164, 86, 126, 53] sns.barplot(xx, yy, color#3a923a) 得到的颜色如下图所示&#xff1a; 这是因为seaborn默认降低了颜色的饱和度&#xff0c;即…

Android 10.0 mtp模式下连接PC后只显示指定文件夹功能实现

1. 前言 在android10.0的系统定制化开发中,对于usb作为otg连接电脑时,在mtp模式下会作为一个存储器在电脑端显示,作为电脑的 一个盘符,来显示设备的内部存储的文件,所以说如果要对设备内部的资料做保密处理的时候,需要在mtp模式下不显示某些 文件夹,接下来就分析下相关…

《QT从基础到进阶·三十七》QWidget实现左侧导航栏效果

NavigationBarPlugin插件类实现了对左侧导航栏的管理&#xff0c;我们可以在导航栏插件中添加界面&#xff0c;并用鼠标点击导航栏能够切换对应的界面。 源码在文章末尾 实现效果如下&#xff1a; NavigationBarPlugin实现的接口如下&#xff1a; class NAVIGATIONBAR_EXP…

centos7安装MySQL—以MySQL5.7.30为例

centos7安装MySQL—以MySQL5.7.30为例 本文以MySQL5.7.30为例。 官网下载 进入MySQL官网&#xff1a;https://www.mysql.com/ 点击DOWNLOADS 点击链接&#xff1b; 点击如上链接&#xff1a; 选择对应版本&#xff1a; 点击下载。 安装 将下载后的安装包上传到/usr/local下…

Linux上通过SSL/TLS和start tls连接到LDAP服务器

一&#xff0c;大致流程。 1.首先在Linux上搭建一个LDAP服务器 2.在LDAP服务器上安装CA证书&#xff0c;服务器证书&#xff0c;因为SSL/TLS&#xff0c;start tls都属于机密通信&#xff0c;需要客户端和服务器都存在一个相同的证书认证双方的身份。3.安装phpldapadmin工具&am…

前缀和——DP35 【模板】二维前缀和

文章目录 &#x1f34e;1. 题目&#x1f352;2. 算法原理&#x1f345;3. 代码实现 &#x1f34e;1. 题目 题目链接&#xff1a;【模板】二维前缀和_牛客题霸_牛客网 (nowcoder.com) 描述 给你一个 n 行 m 列的矩阵 A &#xff0c;下标从1开始。 接下来有 q 次查询&#xff0…

酷开科技OS——Coolita,让智能大屏走向国际

10月23日&#xff0c;2023中国—东盟视听传播论坛在南宁举行。作为第五届中国—东盟视听周重要活动之一&#xff0c;本次论坛以“共享新成果、共创新视听、共建新家园”为主题。来自中国和东盟的300余名专家学者、业界代表通过主旨演讲、主题发言、圆桌对话等方式进行深入探讨&…

python趣味编程-5分钟实现一个太空大战游戏(含源码、步骤讲解)

飞机战争游戏系统项目是使用Python编程语言开发的,是一个简单的桌面应用程序。 Python 中的飞机战争游戏使用pygame导入和随机导入。 Pygame 是一组跨平台的 Python 模块,专为编写视频游戏而设计。它包括设计用于 Python 编程语言的计算机图形和声音库。

飞桨——总结PPOCRLabel中遇到的坑

操作系统&#xff1a;win10 python环境&#xff1a;python3.9 paddleocr项目版本&#xff1a;2.7 1.报错&#xff1a;ModuleNotFoundError: No module named Polygon&#xff08;已解决&#xff09; 已解决所以没有复现报错内容 尝试方法一&#xff1a;直接使用pip命令安装&…

软件工程--软件建模--结构化方法通俗语言总结(暴肝超详解)(包含数据流图、数据字典、ER图、结构化设计和优化......)

目录 结构化分析 数据流图DFD 定义数据字典 实体关系图&#xff08;E-R图&#xff09; 结构化设计 变换映射 事务映射 优化结构设计 实例分析 详细设计&#xff08;过程设计&#xff09; 结构化方法是一种系统化开发软件的方法&#xff0c;该方法基于模块化的思想&am…

vue3项目中使用富文本编辑器

前言 适配 Vue3 的富文本插件不多&#xff0c;我看了很多插件官网&#xff0c;也有很多写的非常棒的&#xff0c;有UI非常优雅让人耳目一新的&#xff0c;也有功能非常全面的。 如&#xff1a; Quill&#xff0c;简单易用&#xff0c;功能全面。editorjs&#xff0c;UI极其优…

【OpenCV实现图像:使用OpenCV生成拼图效果】

文章目录 概要通用配置不考虑间隔代码实现考虑间隔代码实现小结 概要 概要&#xff1a; 拼图效果是一种将图像切割为相邻正方形并重新排列的艺术效果。在生成拼图效果时&#xff0c;可以考虑不同的模式&#xff0c;包括是否考虑间隔和如何处理不能整除的部分。 不考虑间隔&a…

〖大前端 - 基础入门三大核心之JS篇㊶〗- DOM事件传播和事件监听方法addEventListener()

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

华清远见嵌入式学习——网络编程——作业3

目录 作业要求&#xff1a;基于UDP的TFTP文件传输 代码 下载功能效果图​编辑 上传功能效果图 思维导图 模拟面试题和答案&#xff08;定期更新&#xff09; 作业要求&#xff1a;基于UDP的TFTP文件传输 完成文件的上传和下载功能 代码 #include<myhead.h>//实现…

CSS特效016:天窗扬起合上的效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

在PyCharm中正确设置Python项目

大家好&#xff0c;在Mac和Linux都支持Python&#xff0c;但许多开发者发现正确设置Python项目很困难。本文汇总了多平台中运行Python的方法&#xff0c;提高编程的效率&#xff0c;如下所示&#xff1a; 使用命令行运行Python。 在PyCharm&#xff08;免费社区版&#xff09;…