html直接引用vue3的 demo

jamy 前端 2022-01-25 15:23:30 0 4568 转自:原文

<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>

上一篇：用sheetJs从json导出xlsx表格

下一篇：localStorage管理器，实时更新数据到js对象，vue可监听响应，自动维护数据对象

同级分类

站内搜索

热文推荐

标签汇总

php git go 股票数据库 nginx jwt 加密物联网 mqtt esp32 小说 SQL Server thinkphp java html js css linux python vue layui 特效 mysql 微信朗读