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

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

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

相关文章

采用connector-c++ 8.0操作数据库

1.下载最新的Connector https://dev.mysql.com/downloads/connector/cpp/&#xff0c;下载带debug的库。 解压缩到本地&#xff0c;本次使用的是带debug模式的connector库&#xff1a; 注&#xff1a;其中mysqlcppconn与mysqlcppconn8的区别是&#xff1a; 2.在cmakelist…

并发编程:共享模型之管程

目录 管程 临界区 竞态条件 案例 通过synchronized阻塞解决 synchronized添加位置 设计模式之保护性暂停 Join原理 修改线程状态的几种方法 单向改变不可返回的状态 双向可改变的状态 多把锁 线程活跃性 死锁 定位死锁 活锁 饥饿 ReentrantLock 可重入 可打…

安卓隐私指示器学习笔记

最近了解到Google 在Android12上新增了权限指示器&#xff0c;可以在信号栏的右侧显示当前访问录音机和Camera的应用&#xff0c;点击后可以跳转到相应应用的权限界面&#xff0c;消费者可以控制权限的开启和关闭。国内手机厂商最近几年都在增加隐私看板供能&#xff0c;消费者…

【endnote】如何将参考文献放到想放的位置

1. 方式 直接将生成的文献全选拖到想放的位置 注意&#xff1a;不要使用ctrlx这种操作。 2.具体操作 2.1 新建测试文档 如下图&#xff1a; 2.2 引用两篇文献】 如下图&#xff1a; 2.3 测试 如下图&#xff0c;选中所有已经引用的文献。 拖拽到想要防止的位置。 新…

详解Python中哈希表的使用。站在开发者角度,与大家一起探究哈希的世界。

文章目录 1. 前言2. 哈希表2.1 哈希函数2.2 哈希算法2.3 常见哈希算法2.4 哈希冲突 3.总结关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面…

ELF header

1. ELF header定义 ELF header的定义可以在 /usr/include/elf.h 中找到。Elf32_Ehdr是32位 ELF header的结构体。Elf64_Ehdr是64位ELF header的结构体。 所以&#xff0c;ELF header在ELF文件中的大小与位置是确定的&#xff0c;位置位于文件头部&#xff0c;大小则是Elf_Ehdr…

​极氪,中国传统汽车品牌电动化的样板间

这篇文章早就想写了&#xff0c;因为太忙的原因就一直跳票&#xff0c;正好最近两件事的出现&#xff0c;又触发了想写这篇文章的冲动。 两件事主要是&#xff1a; 一&#xff0c;10 月份各家陆续公布了单月销量以及累计销量&#xff1b; 二&#xff0c;极氪在北京正式发布了 …

jmeter中调用python代码

1、安装pyinstaller pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyinstaller 2、将py脚本打包 pyinstaller -F venv/get_image/OCR_jmeter_api.py 3、jmeter中添加OS Process Sampler并调用dist下的程序 4、执行jmeter

【高级网络程序设计】Week2-1 Sockets

一、The Basics 1. Sockets 定义An abstraction of a network interface应用 use the Socket API to create connections to remote computers send data(bytes) receive data(bytes) 2. Java network programming the java network libraryimport java.net.*;similar to…

网络安全之渗透测试入门准备

渗透测试入门所需知识 操作系统基础&#xff1a;Windows&#xff0c;Linux 网络基础&#xff1a;基础协议与简单原理 编程语言&#xff1a;PHP&#xff0c;python web安全基础 渗透测试入门 渗透测试学习&#xff1a; 1.工具环境准备&#xff1a;①VMware安装及使用&#xff1b…

OSG文字-HUD显示汉字示例(3)

显示文字是一种非常实用的技术&#xff0c;可以用来把一些重要的文字始终显示在屏幕上。HUD的全称是HeadsUpDisplay&#xff0c;即抬头显示&#xff0c;这种技术最早应用在军事战斗机上。 创建HUD显示的基本步骤如下: <1> 创建一个osg::Camera对象&#xff0c;设置视图、…

苍穹外卖项目笔记(4)——菜品管理

菜品管理 主要功能模块&#xff1a;新建菜品、修改菜品、启用禁用菜品、菜品的分页查询、删除菜品 代码&#xff1a;GitHub - Echo0701/take-out 1 公共字段自动填充 公共字段指的是业务表中有一些相同的字段&#xff0c;比如创建人、创建时间、修改人、修改时间等&#xff…