今天是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的代码即可. 下图是运行的结果效果
相关推荐
-
订阅号如何推广产品（订阅号产品推广攻略）
公众号，表面上承担着自媒体表达自我的使命，但对于企业而言，它是当前推广产品最好的渠道之一。 大量的企业转战新媒体，利用公众号以低成本高回报的方式推广产品，从而实现盈利，在商业角度，…
-
劳务派遣工被辞退如何赔偿（速览劳务派遣新规细则）
劳务派遣用工跟企业普通职工不太一样，建立劳动关系的单位，实际上是劳务派遣公司。 对于用工单位，使用劳务派遣用工的主要好处就是支付了劳务费之后，就不用再操心其他劳动关系事宜。 正常的…
-
拼多多因质量问题申请直接退款（品质退款影响及防护措施）
品质退款 品质退款有哪些指标，什么退款原因会计入指标，以及如何避免指标超标 一、品质退款相关概念解释 1.品质退款：指买家因商品质量问题发起的退款，即买家在发起退款时选择与商品质量…
-
台湾特色甜品小吃，游台湾必吃必买的十种特色点心
抹茶第一站 抹茶千层蛋糕 如果你也喜欢千层蛋糕层层堆叠交错出的绵密厚实口感，“和茗甘味处”的抹茶千层蛋糕绝对能深得你心！饼皮吃来很有弹性，与鲜奶油紧密贴合，加了抹茶后让整体风味更上…
-
抖音开直播怎么赚钱呀（新手必看抖音直播赚钱攻略）
刚一抖音主播吐槽说，现在几乎被困在直播间里了，不播没收入，直播的话收益也不算很高。 还透露说，现在基本上每场直播同时在线人数大约是50-80人，月入2万左右，刚过去的11月有场直播…
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。