vue用h()函數(shù)創(chuàng)建Vnodes的實現(xiàn)
前言
Vue 提供了一個 h() 函數(shù)用于創(chuàng)建 vnodes。
h() 是 hyperscript 的簡稱——意思是“能生成 HTML (超文本標記語言) 的 JavaScript”。
const vnode = h( 'div', // type { id: 'foo', class: 'bar' }, // props key: '001', // key [ /* children */ ] )
【注意】組件樹中的 vnodes 必須是唯一的。
一、h() 函數(shù)的基本使用方式
import { h } from 'vue' // 除了類型必填以外,其他的參數(shù)都是可選的 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' }) // 類與樣式可以像在模板中一樣 // 用數(shù)組或?qū)ο蟮男问綍鴮? h('div', { class: [foo, { bar }], style: { color: 'red' } }) // 事件監(jiān)聽器應(yīng)以 onXxx 的形式書寫 h('div', { onClick: () => {} }) // children 可以是一個字符串 h('div', { id: 'foo' }, 'hello') // 沒有 props 時可以省略不寫 h('div', 'hello') h('div', [h('span', 'hello')]) // children 數(shù)組可以同時包含 vnodes 與字符串 h('div', ['hello', h('span', 'hello')])
二、h() 函數(shù)的進階使用方式
1、條件渲染
h('div', [ok.value ? h('div', 'yes') : h('span', 'no')])
2、列表渲染
h( 'ul', // 假設(shè)‘items'是一個具有數(shù)組值的 ref items.value.map(({ id, text }) => { return h('li', { key: id }, text) }) )
3、事件
h( 'button', { onClick: (event) => {}, // 對于事件和按鍵修飾符,可以使用 withModifiers 函數(shù) 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 官網(wǎng)之“渲染函數(shù) & JSX”
到此這篇關(guān)于vue用h()函數(shù)創(chuàng)建Vnodes的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue h()函數(shù)創(chuàng)建Vnodes內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)
這篇文章主要介紹了vue監(jiān)聽鍵盤事件的相關(guān)總結(jié),幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2021-01-01利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換
這篇文章主要介紹了如何利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11vue中watch的實際開發(fā)學(xué)習(xí)筆記
watch是Vue實例的一個屬性是用來響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實際開發(fā)筆記,需要的朋友可以參考下2022-11-11vue中echarts關(guān)系圖動態(tài)增刪節(jié)點以及連線方式
這篇文章主要介紹了vue中echarts關(guān)系圖動態(tài)增刪節(jié)點以及連線方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
今天小編就為大家分享一篇Vue 實現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue3?element-plus實現(xiàn)圖片預(yù)覽功能實例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-09-09