VueJs Snippet Example

Photo By Vue.js

Vue.js is a JavaScript framework that helps developers build dynamic and interactive user interfaces (UI). In fact, it is known for its simplicity and flexibility, making it suitable for various types of web development projects. As a result, many developers rely on Vue.js to speed up their workflow and deliver modern applications.

Key Features of Vue.js

1. Declarative Template Syntax
   Vue.js offers a simple template syntax that feels natural to write. Therefore, you can focus on the HTML structure of your UI instead of complex logic.

2. Component-Based Architecture
   Vue.js promotes reusable components. In other words, developers can organize their UI into modular pieces, which makes large projects easier to manage.

3. Reactivity System
   The framework automatically updates the UI whenever the underlying data changes. Consequently, you don’t need to manually update the DOM.

4. Virtual DOM
   Vue.js uses a Virtual DOM to optimize rendering. This means performance improves significantly, and the app delivers smoother UI updates.

5. Flexibility
   Developers can integrate Vue.js into existing projects or use it as a complete solution for UI development. Moreover, its adaptability makes it a great fit for both small apps and large-scale solutions.

With these features, Vue.js has become a popular choice for building modern, interactive applications with sleek designs.

Below is the VueJs Snippet Example code:

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

This is the article shared by Mangcoding. Hopefully, this article is useful and can provide new knowledge for you. If you have any constructive criticism or suggestions, please feel free to comment or send them through Mangcoding’s Email and social media.