VueJs Snippet Example
Photo By Vue.js
VueJs Snippet Example is a JavaScript framework used to build dynamic and interactive user interfaces (UI). Vue.js is known for its ease of use and flexibility, making it suitable for various types of web development projects.
Here are some key features of Vue.js:
- Declarative Template Syntax: Vue.js uses an easy-to-understand and write template syntax, allowing you to focus on the HTML structure of your UI.
- Component-Based Architecture: Vue.js encourages the use of reusable components, making it easier to build more modular and organized UIs.
- Reactivity System: Vue.js automatically updates the UI when the data being used changes, eliminating the need for manually updating the DOM.
- Virtual DOM: Vue.js uses a Virtual DOM to speed up UI updates, allowing your app to run faster and more efficiently.
- Flexibility: Vue.js can be integrated into existing projects, and you can use it incrementally or as a complete solution for UI development.
With these features, Vue.js has become a popular choice for web developers who want to build modern and interactive applications with sleek UIs.
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.
Link Copied to Clipboard