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

官网文档: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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

阿里云发送短信

官方代码如下&#xff1a; // This file is auto-generated, dont edit it. Thanks. package com.aliyun.sample;import com.aliyun.tea.*;public class Sample {/*** 使用AK&SK初始化账号Client* param accessKeyId* param accessKeySecret* return Client* throws Excep…

4G5G智能执法记录仪在保险公司车辆保险远程定损中的应用

4G智能执法记录仪&#xff1a;汽车保险定损的**利器 随着科技的不断进步&#xff0c;越来越多的智能设备应用到日常生活中。而在车辆保险定损领域&#xff0c;4G智能执法记录仪的出现无疑是一大**。它不仅可以实现远程定损&#xff0c;还能实现可视化操作、打印保单以及数据融…

贪心算法及相关例题

目录 什么是贪心算法&#xff1f; leetcode455题.分发饼干 leetcode376题.摆动序列 leetcode55题.跳跃游戏I leetcode45题.跳跃游戏II leetcode621题.任务调度器 leetcode435题.无重叠空间 leetcode135题.分发糖果 什么是贪心算法&#xff1f; 贪心算法更多的是一种思…

函数式编程-Stream流笔记-三更草堂

函数式编程-Stream流 1. 概述 1.1 为什么学&#xff1f; 能够看懂公司里的代码 大数量下处理集合效率高 代码可读性高 消灭嵌套地狱 //查询未成年作家的评分在70以上的书籍 由于数据中作家和书籍可能出现重复&#xff0c;需要进行去重 List<Book> bookList new Ar…

深入理解Java虚拟机-GC

深入理解Java虚拟机-GC 当需要排查各种内存溢出、内存泄漏时&#xff0c;当垃圾回收成为系统到达更高并发量的瓶颈时&#xff0c;我们必须对内存动态分配和内存回收技术这样的“自动化”技术采用必要的监控和调节。 Java堆和方法区&#xff1a;一个接口的多个实现类需要的内存…

[计算机网络实验]头歌 实验二 以太网帧、IP报文分析(含部分分析)

目录 第1关&#xff1a;Wireshark基本使用入门 【实验目的】 【实验环境】 【本地主机、平台虚拟机之间数据传递】 wireshark基本用法】 1、wireshark主界面 2、抓取分组操作 3、Wireshark窗口功能 4、筛选分组操作 【实验操作】 ​编辑 第2关&#xff1a;Ethernet帧…

Leaflet结合Echarts实现迁徙图

效果图如下&#xff1a; <!DOCTYPE html> <html><head><title>Leaflet结合Echarts4实现迁徙图</title><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0">…

C++:利用哈希表对unordered系列容器模拟实现

文章目录 unordered容器使用[在长度 2N 的数组中找出重复 N 次的元素](https://leetcode.cn/problems/n-repeated-element-in-size-2n-array/description/) 底层结构初步改造哈希表基本逻辑的实现 最终实现 本篇主要总结unordered系列容器和其底层结构 unordered容器使用 从使…

MYSQL索引使用注意事项

索引使用注意事项&#xff1a; 1.索引列运算 不要在索引列上进行运算操作&#xff0c;否则索引将失效&#xff1b; 2.字符串不加引号 字符串类型使用时&#xff0c;不加引号&#xff0c;否则索引将失效&#xff1b; 3.模糊查询 如果仅仅是尾部模糊匹配&#xff0c;索引将不会失…

使用EasyPlayer播放H.265视频流

使用EasyPlayer播放H.265视频流 EasyPlayer流媒体视频播放器 EasyPlayer流媒体视频播放器 EasyPlayer流媒体视频播放器可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持RTSP、RTMP、HLS、FLV、WebRTC等格式的视频流播放&#xff0c;并且已实现网页…

NEJM一篇新文为例,聊聊孟德尔随机化研究mr 连锁不平衡(linkage disequilibrium)

2019年3月14日&#xff0c;新英格兰医学杂志发表了一篇论著&#xff0c;Mendelian Randomization Study of ACLY and Cardiovascular disease, 即《ACLY和心血管疾病的孟德尔随机化研究》。与小咖在2017年1月9日报道的一篇发表在新英格兰医学的孟德尔随机化研究——精读NEJM&am…

【Python】重磅!这本30w人都在看的Python数据分析畅销书更新了!

Python 语言极具吸引力。自从 1991 年诞生以来&#xff0c;Python 如今已经成为最受欢迎的解释型编程语言。 【文末送书】今天推荐一本Python领域优质数据分析书籍&#xff0c;这本30w人都在看的书&#xff0c;值得入手。 目录 作译者简介主要变动导读视频购书链接文末送书 pan…

【GUI】-- 13 贪吃蛇小游戏之食物及成绩判断

GUI编程 04 贪吃蛇小游戏 4.4 第四步&#xff1a;食物及成绩判断 首先&#xff0c;添加食物与分数的数据定义&#xff1a; //食物的坐标int foodX;int foodY;Random random new Random();//积分面板数据结构int score;在初始化方法中&#xff0c;添加(画出)食物与分数&…

编译 CUDA加速的 OpenCV-4.8.0 版本

文章目录 前言一、编译环境二、前期准备三、CMake编译四、VS编译OpenCV.sln五、问题 前言 由于项目需要用上CUDA加速的OpenCV&#xff0c;编译时也踩了不少坑&#xff0c;所以这里记录一下。 一、编译环境 我的编译环境是&#xff1a; Win10 RTX4050 CUDA-12.0 CUDNN 8.9.…

Windows、VMware问题集合

Windows、VMware问题集合 一. Windows11安装VMware17提升虚拟机性能1. 桌面右击图标点击属性——>兼容性&#xff0c;找到“以管理员身份运行此程序”勾选&#xff0c;最后点击确定即可。2. 关闭win11的内核隔离功能。 二. VMware虚拟机报错&#xff08;虚拟化性能计数器需要…

【人工智能入门学习资料福利】

总目录如下&#xff08;部分截取&#xff09;&#xff1a; 百度网盘链接&#xff1a;https://pan.baidu.com/s/1bfDVG-xcPR3f3nfBJXxqQQ?pwdifu6 提取码&#xff1a; ifu6

【电子通识】USB3.0和USB2.0有什么区别?

版本 USB2.0是2000年4月27日由USB-IF组织提出了USB2.0总线协议规范。 USB3.0是2008年11月17日由USB-IF组织提出了超高速USB3.0规范。 图标对比 USB2.0的标志就是和USB1.1的标志基本上没啥区别&#xff0c;还是以前的那个样子&#xff0c;使用黑色颜色用标识 USB3.0它有一个S…

变态跳台阶,剑指offer

目录 题目&#xff1a; 我们直接看题解吧&#xff1a; 相似题目&#xff1a; 解题方法&#xff1a; 审题目事例提示&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 题目地址&#xff1a; 【剑指Offer】9、变态跳台阶 难度&#xff1a;简单 今天刷变态跳台阶&#xf…

不停的挖掘硬盘的最大潜能

从 NAS 上退休的硬盘被用在了监控的存储上了。 随着硬盘使用寿命的接近尾声&#xff0c;感觉就是从高附加值数据到低附加值数据上。监控数据只会保留那么几个月的时间&#xff0c;很多时候都会被覆盖重新写入。 有人问为什么监控数据不保留几年的&#xff0c;那是因为监控数据…

Golang 中的良好代码与糟糕代码

最近&#xff0c;有人要求我详细解释在 Golang 中什么是好的代码和坏的代码。我觉得这个练习非常有趣。实际上&#xff0c;足够有趣以至于我写了一篇关于这个话题的文章。为了说明我的回答&#xff0c;我选择了我在空中交通管理&#xff08;ATM&#xff09;领域遇到的一个具体用…