html5源碼網(wǎng)站（最新好看的html跳轉(zhuǎn)網(wǎng)頁源碼）
發(fā)布時(shí)間：2025-08-18 | 來源：互聯(lián)網(wǎng)轉(zhuǎn)載和整理
今天是2021.7.14,是個(gè)好日子.好久沒發(fā)布文章了.今天發(fā)布下如何在在html頁面中使用vue3.義縣游學(xué)電子科技一直以技術(shù)文章為主.以下是h5的頁面源碼:
<html>
<script src=”https://unpkg.com/vue@next”></script>
<body>
<p id=”vue”>
<p v-html=”rhtml”></p>
<props-demo-simple></props-demo-simple>
</p>
</body>
<script>
const htmls={
data(){
return{
rhtml:”<h1>html頁面中引用VUE3的演示頁面</h1>”,
}
}
}
const app=Vue.createApp(htmls)
// 簡(jiǎn)單語法注冊(cè)或獲取全局組件.注冊(cè)還會(huì)自動(dòng)使用給定的 id 設(shè)置組件的名稱
app.component(‘props-demo-simple’, { data() {
return {
count: 0
}
},
props: [‘size’, ‘myMessage’],template: `
<button v-on:click=”count++”>
You clicked me {{ count }} times.
</button>`
}
)
app.mount(“#vue”)
</script>
</html>
分析下:首先<script src=”https://unpkg.com/vue@next”></script>,引入vue3的腳本地址. 然后在body下的<script>中書寫vue3的代碼即可. 下圖是運(yùn)行的結(jié)果效果