VueJs Snippet Example

Photo By Vue.js

VueJs Snippet Example adalah sebuah JavaScript framework yang digunakan untuk membangun antarmuka pengguna (UI) yang dinamis dan interaktif. Vue.js dikenal karena kemudahan penggunaannya dan fleksibilitasnya, sehingga cocok untuk berbagai jenis proyek pengembangan web.

Berikut adalah beberapa fitur utama Vue.js:

• Declarative Template Syntax: Vue.js menggunakan sintaks template yang mudah dipahami dan ditulis, sehingga Anda dapat fokus pada struktur HTML dari UI Anda.
• Component-Based Architecture: Vue.js mendorong penggunaan komponen yang dapat di-reuse, sehingga Anda dapat membangun UI yang lebih modular dan terorganisir.
• Reactivity System: Vue.js secara otomatis memperbarui UI ketika data yang digunakan berubah, sehingga Anda tidak perlu secara manual mengupdate DOM.
• Virtual DOM: Vue.js menggunakan Virtual DOM untuk mempercepat pembaruan UI, sehingga aplikasi Anda dapat berjalan lebih cepat dan efisien.
• Flexibility: Vue.js dapat diintegrasikan dengan proyek-proyek yang sudah ada, dan Anda dapat menggunakannya secara incremental atau sebagai solusi lengkap untuk pengembangan UI.

Dengan fitur-fitur ini, Vue.js menjadi pilihan yang populer bagi pengembang web yang ingin membangun aplikasi dengan UI yang modern dan interaktif.

Dibawah ini kode VueJs Snippet Example :

<template>
    <div>
        <svg class="stat-circle" width="120" viewBox="0 0 20 20">
            <circle class="bg" cx="10" cy="10" r="8"></circle>
            <circle class="progress" transform="rotate(-90, 10,10)" cx="10" cy="10" r="8" :data-percentage="percentage"></circle>
            <text x="50%" y="55%">{{ percentage }}%</text>
        </svg>
    </div>
</template>


<script>
import gsap from "gsap";
export default {
    props: ["percentage"],
    data() {
        return {
            timeline: gsap.timeline({paused: true,duration: 0.5}),
        };
    },
    mounted() {
        let statCircle = document.querySelectorAll(".stat-circle circle.progress");
        for (var i = 0; i < statCircle.length; i++) {
            var p = parseFloat(this.percentage);
            var off = -51 -((51 / 100) * p);
            this.timeline.to(statCircle[i],{
                strokeDashoffset: off,
            },0);
            this.timeline.play();
        }
    },
}
</script>


<style lang="scss">
    .stat-circle {
        circle.bg
        {
            fill: none;
            stroke: #f1f1f1;
            stroke-width: 2;
        }
        circle.progress
        {
            fill: none;
            stroke: #F37322;
            stroke-width: 2;
            stroke-dasharray: 51 51;
            stroke-dashoffset: -51;
            stroke-linecap: round;
        }
        text
        {
            font-size: 3px;
            text-anchor: middle;
            fill: #000;
        }
    }
</style>

Itulah artikel yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.