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. FluentFTP能连接却报未将对象引用设置到对象的实例。

    本来项目中用的好好的FTP下载传输,不知道从什么时候开始读取不到了,也上传不了.实际读取的是本地缓存的.因为同事上传不了文件和图片才发现.上源码! #region 下载文件 static byte[] ...

  2. win 10 玩红警/黑边,不能全屏,闪退

    win 10玩红警黑边问题 1.下载ddraw.dll,放在游戏目录 下载链接:ddraw.dll 如果提示 选择保留就行了 2.Win 键+S键,搜索注册表,打开这个 进去按这个路径    计算机\ ...

  3. ArrayList中的ConcurrentModificationException,并发修改异常,fail-fast机制。

    一:什么时候出现? 当我们用迭代器循环list的时候,在其中用list的方法新增/删除元素,就会出现这个错误. package com.sinitek.aml; import java.util.Ar ...

  4. 【大数据-课程】高途-天翼云侯圣文-Day3-实时计算原理解析

    〇.老师及课程介绍 一.今日内容 二.实时计算理论解析 1.什么是实时计算 微批处理.流式处理.实时计算 水流和车流的例子 spark streaming就是一种微批处理,水满了才处理,进入下一个地方 ...

  5. 【Java EE】Day14 Servlet、HTTP、Request

    一.Servlet 二.HTTP 三.Request 四.登录案例

  6. 动手实验查看MySQL索引的B+树的高度

    一:文中几个概念 h:统称索引的高度: h1:主键索引的高度: h2:辅助索引的高度: k:非叶子节点扇区个数. 二:索引结构 叶子节点其实是双向链表,而叶子节点内的行数据是单向链表,该图未体现. 磁 ...

  7. Burp Suite

    Burp Suite proxy代理 1.首先在浏览器中设置代理配置 火狐浏览器先点击右上角三个杠--选项--常规--网络设置 2.打开Burp Suite进行抓包 Proxy代理--options中 ...

  8. 解决.net Core中WebApi自动Model验证导致数据格式不能统一

    简言: 最近做项目用WebAPI Core时,想把返回数据的格式,统一弄成:{"errorMsg":"xxx","Data":"x ...

  9. java中的字符串数组

    本文主要讲述java中的字符串数组 字符串数组的声明有如下几种形式: // 第一种方式:new // 注意在String的后面[]中不需要添加字符串数组的长度.否则报错. String[] arr_1 ...

  10. 论文解读丨【CVPR 2022】不使用人工标注提升文字识别器性能

    摘要:本文提出了一种针对文字识别的半监督方法.区别于常见的半监督方法,本文的针对文字识别这类序列识别问题做出了特定的设计. 本文分享自华为云社区<[CVPR 2022] 不使用人工标注提升文字识 ...