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和 ...
随机推荐
- 聊聊Go里面的闭包
以前写 Java 的时候,听到前端同学谈论闭包,觉得甚是新奇,后面自己写了一小段时间 JS,虽只学到皮毛,也大概了解到闭包的概念,现在工作常用语言是 Go,很多优雅的代码中总是有闭包的身影,看来不了解 ...
- AI赋能音乐创作,人人都是音视频创作者
华为HMS Core音频编辑服务(Audio Editor Kit)依托自身AI技术的研发优势,上线全新的歌声合成音色及伴奏,给音视频创作者提供更多的创作可能.在短视频场景中,用户自定义歌词的歌声结合 ...
- svn 日常使用的错误集锦
1.SVN:Previous operation has not finished; run 'cleanup' if it was interrupted 当时遇到这个问题时,找了各种解决方案什么要 ...
- 【每日一题】【快慢指针相遇】2022年1月25日-NC3 链表中环的入口结点
描述给一个长度为n链表,若其中包含环,请找出该链表的环的入口结点,否则,返回null. 答案: /* public class ListNode { int val; ListNode next = ...
- gulp报错The following tasks did not complete
代码如下: //引用gulp模块 const gulp = require('gulp'); //使用gulp.task()建立任务 gulp.task('first', () => { con ...
- 关键字break和continue
关键字:break 和continue提供了另一种控制循环的方式. break 是直接退出循环体 如: continue 是退出当前循环迭代 如: 需要注意的是:使用过多的break和continu ...
- Linux开发板连接WPA加密的AP路由器
Linux目前有两种方法配置网络: wireless-tools wpa_supplicant iw支持的驱动较多,但只支持WEP加密:wpa_supplicant有部分驱动支持不完善,但支持WEP. ...
- frp内网穿透(已验证)
# 云服务器frp内网穿透教程 软件源码在https://github.com/fatedier/frp/releases上,根据系统类型,按需下载 教程术语描述 > A 是有固定IP的云服务器 ...
- Redis——02 学习
Redis--02 前面了解了 Redis 以及在 Linux 的安装,下面了解一些 Redis 常用的命令. Redis 常用命令: Redis 是 Key-Value 形式,Key 为字符串类型, ...
- 巧如范金,精比琢玉,一分钟高效打造精美详实的Go语言技术简历(Golang1.18)
研发少闲月,九月人倍忙.又到了一年一度的"金九银十"秋招季,又到了写简历的时节,如果你还在用传统的Word文档寻找模板,然后默默耕耘,显然就有些落后于时代了,本次我们尝试使用云平台 ...