vue用h()函数创建Vnodes的实现
前言
Vue 提供了一个 h() 函数用于创建 vnodes。
h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。
const vnode = h( 'div', // type { id: 'foo', class: 'bar' }, // props key: '001', // key [ /* children */ ] )
【注意】组件树中的 vnodes 必须是唯一的。
一、h() 函数的基本使用方式
import { h } from 'vue' // 除了类型必填以外,其他的参数都是可选的 h('div') h('div', { id: 'foo' }) // attribute 和 property 都能在 prop 中书写 // Vue 会自动将它们分配到正确的位置 h('div', { class: 'bar', innerHTML: 'hello' }) // 像 `.prop` 和 `.attr` 这样的的属性修饰符 // 可以分别通过 `.` 和 `^` 前缀来添加 h('div', { '.name': 'some-name', '^width': '100' }) // 类与样式可以像在模板中一样 // 用数组或对象的形式书写 h('div', { class: [foo, { bar }], style: { color: 'red' } }) // 事件监听器应以 onXxx 的形式书写 h('div', { onClick: () => {} }) // children 可以是一个字符串 h('div', { id: 'foo' }, 'hello') // 没有 props 时可以省略不写 h('div', 'hello') h('div', [h('span', 'hello')]) // children 数组可以同时包含 vnodes 与字符串 h('div', ['hello', h('span', 'hello')])
二、h() 函数的进阶使用方式
1、条件渲染
h('div', [ok.value ? h('div', 'yes') : h('span', 'no')])
2、列表渲染
h( 'ul', // 假设‘items'是一个具有数组值的 ref items.value.map(({ id, text }) => { return h('li', { key: id }, text) }) )
3、事件
h( 'button', { onClick: (event) => {}, // 对于事件和按键修饰符,可以使用 withModifiers 函数 onDbclick: withModifiers(() => {}, ['stop']) }, 'click me' )
4、使用插槽
import { h } from 'vue' const vnode = h( 'SelfComponent', // 默认插槽: // <div><slot /></div> // <div>{slots.default()}</div> h('div', slots.default()), // 具名插槽 // <div><slot name="footer" :text="message" /></div> // <div>{slots.footer({ text: props.message })}</div> h( 'div', slots.footer({ text: props.message }) ) )
【参考文章】
vue 官网之“渲染函数 & JSX”
到此这篇关于vue用h()函数创建Vnodes的实现的文章就介绍到这了,更多相关vue h()函数创建Vnodes内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue 保留两位小数 不能直接用toFixed(2) 的解决
这篇文章主要介绍了vue 保留两位小数 不能直接用toFixed(2) 的解决操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08关于vue2使用element UI中Descriptions组件的遍历问题详解
最近element-ui遇到了很多坑,下面这篇文章主要给大家介绍了关于vue2使用element UI中Descriptions组件的遍历问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02vue中使用Echarts map图实现下钻至县级的思路详解
这篇文章主要介绍了vue中使用Echarts map图实现下钻至县级,需要注意的是,因为我是直接从 vue-cli2 直接跳到 vue-cli4 ,还奇怪怎么读取不到JSON,查找后才知道 vue-cli3 往后的项目基础架构对比旧版本有些区别,感兴趣的朋友跟随小编一起看看吧2022-01-01vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
这篇文章主要介绍了vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法,非常不错,具有参考借鉴价值,,需要的朋友可以参考下2017-02-02
最新评论