組件功能分析：
固定頂部顯示，有三種類型：成功success，錯(cuò)誤error衰猛，警告warning。
顯示消息提示時(shí)需要?jiǎng)赢嫃纳匣肭业觥?/p>
組件使用的方式不夠便利无切，封裝成工具函數(shù)方式荡短。
解析:
? ? ? ? ??h 等價(jià)于 createVNode
? ? ? ? ? createVNode: 作用：創(chuàng)建虛擬DOM ?(一個(gè)js對(duì)象, 可以模擬真實(shí)dom結(jié)構(gòu))
? ? ? 1.? import { h, onMounted, render } from 'vue'
? ? ? ? ?參數(shù)1：創(chuàng)建的虛擬DOM的節(jié)點(diǎn)類型 ?比如 ?div h1 ?a ?img
? ? ? ? ?參數(shù)2：虛擬DOM擁有的屬性，是一個(gè)對(duì)象
? ? ? ? ?參數(shù)3：虛擬DOM節(jié)點(diǎn)的內(nèi)容
? ? ?創(chuàng)建虛擬dom 相當(dāng)于?<h1 title="標(biāo)題" id="box" class="aa">我是標(biāo)題</h1>
? ? ?2.? const vNode = h('h1', { title: '標(biāo)題', id: 'box', className: 'aa' }, '我是標(biāo)題')
? ? 3. onMounted(() => {
? ? ?const div = document.getElementById('div')
? ? ?if(div){
? ? ?console.log(div, vNode)
? ? // render 把虛擬dom渲染到容器中(真實(shí)的dom)
? ? render(vNode, div)
? ? // render(messsage組件, dom元素)
? }
})
使用流程:
