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和 ...
随机推荐
- 修改msi文件
前言 msi文件是一个安装包文件,可以看做一个数据库,其中包含很多资源,例如图片,配置文件,可执行文件exe等等. 我想要把修改过 exe可执行文件提交到msi文件中,那么就需要知道msi文件的构成, ...
- combotree 的简单使用
一.前端 combotree HTML: <input id="201711281652407353448711985811" class="easyUI-comb ...
- Linux 中的文件简单说明
Linux 中的文件简单说明 作者:Grey 原文地址: 博客园:Linux 中的文件简单说明 CSDN:Linux 中的文件简单说明 说明 本文基于 CentOS 7 根目录(/)下文件夹主要作用 ...
- 2.2:常用的Python数据类型、字符串、dtype
一.内置数据类型 1.整型 2.浮点型 3.字符串 4.复数 5.布尔类型bool 6.None类型 二.字符串 1.从键盘输入数据 s = input() 2.用eval去引号求值 eval(&qu ...
- 【Shell案例】【awk、grep、sort、uniq】10、第二列是否有重复
给定一个 nowcoder.txt文件,其中有3列信息,如下实例,编写一个shell脚本来检查文件第二列是否有重复,且有几个重复,并提取出重复的行的第二列信息:实例:20201001 python 9 ...
- 【Shell案例】【wc记录单词长度、for循环和if、awk文本分析工具】7、打印字母数小于8的单词
描述写一个 bash脚本以统计一个文本文件 nowcoder.txt中字母数小于8的单词. 示例:假设 nowcoder.txt 内容如下:how they are implemented and a ...
- 复杂mysql/多表查询
目录 多表查询的两种方法 sql语句基础语法补充 concat / existe / 表字段 增加 修改 删除 复杂sql练习题 多表查询的两种方法 方式1:连表操作 inner join 内连接 s ...
- jQuery使用 前端框架Bootstrap
目录 jQuery查找标签 1.基本选择器 2.组合选择器 3.后代选择器 4.属性选择器 5.基本筛选器 7.筛选器方法 链式操作的本质 操作标签 1.class操作 2.位置操作 3.文本操作 4 ...
- input、print、字符串格式化输出
1.使用input(), print()进行用户交互 """ 以前银行取钱只能拿着存折去柜台跟小姐姐交流才可以 你想干嘛 我想取钱 请输入密码 滴滴滴密码 想取多少钱 我 ...
- vue elementui弹框内 富文本编辑器的使用,及踩坑
最近vue项目中遇到弹框内使用富文本编辑器,遇到最大的问题是,在打开弹框后才能创建富文本编辑器,并且只能创建一次,多次点击弹框,报错: Error in v-on handler: "Err ...