在html5页面中如何使用vue3_html页面引入vue组件

编码文章call10242025-09-23 16:00:5312A⁺A^-

今天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:

<html>
<script src="https://unpkg.com/vue@next"></script>

<body>
<div id="vue">
<div v-html="rhtml"></div>
<props-demo-simple></props-demo-simple>

</div>

</body>
<script>
const htmls={
data(){
return{
rhtml:"<h1>html页面中引用VUE3的演示页面</h1>",
}
}
}

const app=Vue.createApp(htmls)

// 简单语法注册或获取全局组件.注册还会自动使用给定的 id 设置组件的名称
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的代码即可. 下图是运行的结果效果

点击这里复制本文地址以上内容由文彬编程网整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！

css的三种引入方式

上一篇：css 布局简述_css布局的几种方式

下一篇：文章导出后格式乱HTML保存+导入发布零格式问题

在html5页面中如何使用vue3_html页面引入vue组件

相关文章