投稿

如何在html5页面中使用vue3

Vedu • • 程序开发 • 阅读 963

今天发布下如何在在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的代码即可. 下图是运行的结果效果

在html5页面中如何使用vue3

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/25418.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-07-15 06:45
下一篇 2021-07-15 07:05

相关推荐

发表评论

登录后才能评论