petite-vue 示例项目,全网唯一可用代码

qq_35496505

于 2025-05-06 14:22:46 发布

阅读量90

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_35496505/article/details/147735339

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Petite Vue 示例项目</title>
</head>
<style>
    #page {
        display: none;
    }
</style>

<body>
    <div v-scope id="page">
        <div @vue:mounted="mounted">

            <p>计数器: {{ count }}</p>
            <button @click="add">增加计数</button>
            <div v-if="count">
                循环: <i v-for="i,j of count">{{i}}</i>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/petite-vue"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            PetiteVue.createApp({
                count: 0,
                add() {
                    this.count++;
                },
                mounted() {
                    document.getElementById('page').style.display = 'block';

                }
            }).mount();

        });

    </script>
</body>

</html>