vue组件的对象式写法,vue中的h函数
render:将虚拟dom转为真实dom
h函数:创建的是vnode,也可以成为createVnode函数
语法:h(元素名称 ,这个元素的数据,子集)
- 第一个参数:可以为一个html标签,一个组件,一个异步组件,或者是一个函数式组件。
- 第二个参数:{ Object } Props,与attributes和props,以及事件对应的对象,我们可以在模板中使用,如果没有需要传入的属性,可以设置为null。
- 第三个参数:{String | Object |Array}可以是字符串Text文本或者是h函数构建的对象再者可以是有插槽
// 组件的对象式写法
// 1 .vue 变为对象 ={}
import {h} from "vue";
let Wfonction={
// 创建一个组件 布局<div> <h2>内容</h2> <div></div>div的内容</div>
render(){ // render 就是把虚拟dom 变为 真实dom
return h("div",{id:"box"},h("h2",{},"内容"),h("div",{},"div的内容"))
}
}
vue组件的对象式写法,vue中的h函数的更多相关文章
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- webapck搭建环境,让你知道vue中的h函数的作用和虚拟节点如何上树!
搭建环境 npm init 初始化项目 npm i -D snabbdom 安装 npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 简单介绍 ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- vue2.0 如何自定义组件(vue组件的封装)
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
- Vue系列之 => vue组件创建
创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- VUE组件 单独文件封装
https://www.cnblogs.com/SamWeb/p/6391373.html vuejs 单文件组件.vue 文件 vuejs 自定义了一种.vue文件,可以把html, css, ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- vue组件创建的三种方式
1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...
- 移动端无限滚动 TScroll.vue组件
// 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
随机推荐
- layui的图片上传使用
先上效果图. 在用之前呢,你得先更新最新版的layui版本.经验之谈_(:_」∠)_ 今天在用的时候,实在是碰到太多的坑,本来是拒绝更新到最新版来着. 首先是layui.js和layui.all.js ...
- 深入解读MySQL InnoDB存储引擎Update语句执行过程
参考b站up 戌米的论文笔记 https://www.bilibili.com/video/BV1Tv4y1o7tA/ 书籍<mysql是怎样运行的> 极客时间<mysql实战45讲 ...
- python安装与初识
一.Linux基础 - 计算机以及日后我们开发的程序防止的服务器的简单操作 二.Python开发 http://www.cnblogs.com/wupeiqi/articles/5433893.htm ...
- vivo 云原生容器探索和落地实践
作者:vivo 互联网容器团队- Pan Liangbiao 本文根据潘良彪老师在"2022 vivo开发者大会"现场演讲内容整理而成.公众号回复[2022 VDC]获取互联网技术 ...
- python 之将xmind转为excel用例文件
1.xmind文件模板如下所示(最后一个子级为预置条件) 2.excel用例模板 3.获取xmind文件数据并转成字典形式 from xmindparser import xmind_to_dict ...
- day07-功能实现06
家居网购项目实现06 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 14.功能13-首页分页 14.1需求分析/图解 顾客进入 ...
- vue3 递归组件 树形组件
递归组件 第一种方式,直接自己调用自己 Tree.vue <template> <div class="tree"> <div v-for=" ...
- Auto-Job任务调度框架
Auto-Job 任务调度框架 一.背景 生活中,业务上我们会碰到很多有关作业调度的场景,如每周五十二点发放优惠券.或者每天凌晨进行缓存预热.亦或每月定期从第三方系统抽数等等,Spring和java目 ...
- ArcGIS工具 - 统计要素数量
查询和统计是GIS中的重要功能之一.在ArcGIS中可以按属性信息.按空间位置关系进行查询和统计.今天为源GIS给大家分享使用ArcPy编程实现批量统计地理数据库要素类记录数量. 软件应用 统计单个图 ...
- A排列方案
递归实现排列型枚举 把 1∼n 这 n 个整数排成一行后随机打乱顺序,输出所有可能的次序. 输入格式 一个整数 n. 输出格式 按照从小到大的顺序输出所有方案,每行 1 个. 首先,同一行相邻两个数用 ...