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函数的更多相关文章

  1. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. webapck搭建环境,让你知道vue中的h函数的作用和虚拟节点如何上树!

    搭建环境 npm init 初始化项目 npm i -D snabbdom 安装 npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 简单介绍 ...

  3. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  4. vue2.0 如何自定义组件(vue组件的封装)

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  5. Vue系列之 => vue组件创建

    创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. VUE组件 单独文件封装

    https://www.cnblogs.com/SamWeb/p/6391373.html vuejs 单文件组件.vue 文件   vuejs 自定义了一种.vue文件,可以把html, css, ...

  7. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  8. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

  9. 移动端无限滚动 TScroll.vue组件

    // 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...

  10. VUE组件汇总

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

随机推荐

  1. MinioAPI浅入及问题

    MinioAPI浅入及问题 bucketExists(BucketExistsArgs args) boolean 判断桶是否存在 返回boolean boolean gxshuju = minioC ...

  2. ST表优化区间gcd

    ST表的使用需要所求区间答案具有可重复性(询问时需要用到两个区间重叠来覆盖询问区间) 此题要求gcd为x的区间个数 可以用ST表处理出所有区间的\(gcd\) \(O(nlogn)\) 将区间的左端点 ...

  3. windows 搭建iis文件服务器

    1.运行打开控制面板->程序->启用或关闭Windows功能,勾选下面所有的选项. 注意,必须安装功能所需文件. 等待 关闭即可. 2.在控制面板找到管理工具,不同版本的Windows不尽 ...

  4. HDOJFatmouse肥鼠交易//c++控制保留小数

    贪心算法.我就不贴题了//no.1009 但是我的代码运行超时了-改了好久都不对- 看别人代码,顺便学习c++控制保留小数怎么操作; 我的错误代码:(时间占用可能是多次调用findmax造成的) #i ...

  5. 实现 .Net 7 下的数据库定时检查

    在软件开发过程中,有时候我们需要定时地检查数据库中的数据,并在发现新增数据时触发一个动作.为了实现这个需求,我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .Net 6 中新 ...

  6. day08-功能实现07

    家居网购项目实现07 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 16.功能15-会员显示登录名 16.1需求分析/图解 会 ...

  7. .Net 7 的AOT的程序比托管代码更容易破解?

    楔子 .Net 7的一个重要功能是把托管的源码编译成Native Code,也就是二进制文件.此举看似增加了程序反编译难度,实际上是减少了程序的破解难度.本篇在不触及整个程序架构的前提下,以简单的例子 ...

  8. 如何在Github上创建一个新仓库

    Hi,欢迎大家在有空的时候做客[江涛学编程],这里是2023年的第6篇原创文章,新年新气象,在这里我祝读者朋友们都好好的, 老规矩,拍拍手,上菜. 今天没有啥东西要跟家人们分享,就两个字,看图!!! ...

  9. Redis缓存何以一枝独秀?(2) —— 聊聊Redis的数据过期、数据淘汰以及数据持久化的实现机制

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 上一篇文章中呢,我们简单的介绍了下Re ...

  10. 深入理解 OpenMP 线程同步机制

    深入理解 OpenMP 线程同步机制 前言 在本篇文章当中主要给大家介绍 OpenMP 当中线程的同步和互斥机制,在 OpenMP 当中主要有三种不同的线程之间的互斥方式: 使用 critical 子 ...