In the world of web development, Vue.js has rapidly gained popularity as a progressive JavaScript framework for building interactive and dynamic user interfaces. With its simplicity and versatility, Vue.js has become a developer favorite. To illustrate how Vue.js works and how components and props function, let’s dissect a simple Vue.js code snippet.
Example Code In Action
Code Overview
<!DOCTYPE html>
<html>
<head>
<title>Vue App</title>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- Notice the kebab vs camel case syntax for the addNum prop. In HTML we use kebab, and in JavaScript, we use camel -->
<counter v-bind:add-num="5"></counter>
</div>
<script>
// Define a Vue.js component called 'counter'
let counter = Vue.component('counter', {
template: `
<div>
<div>Count: {{this.count}}</div>
<button class="vue-btn" @click="increment">Add by {{this.addNum}}</button>
</div>
`,
props: {
addNum: {
type: Number,
default: 2
}
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += this.addNum
}
}
})
// Create a Vue instance and mount it to the '#app' element
let app = new Vue({
el: '#app',
components: {
counter
}
})
</script>
</body>
</html>Explanation
- Vue.js Library Inclusion: The code begins by including the Vue.js library with
<script src="../vue.min.js"></script>. Vue.js is a progressive framework, and you can include it in your project by referencing its JavaScript file. I’m using an older version (2.7) served from a content delivery network at https://unpkg.com/ just for convenience of this demo. You’ll want to include it in your project properly. - Defining the Vue App: Inside the
<div id="app">, we are defining the root element for our Vue.js application. This is where our Vue app will be mounted. - Vue Component – ‘counter’: A Vue component called ‘counter’ is defined. Components are reusable building blocks in Vue.js that encapsulate specific functionality and templates. In this case, the ‘counter’ component represents a simple counter.
- Template: The
templatesection defines the structure of the ‘counter’ component. It displays the current count and a button to increment the count. - Props: The ‘counter’ component accepts a prop named ‘addNum’. Props are a way to pass data from a parent component (in this case, the root Vue instance) to a child component (the ‘counter’ component). The ‘addNum’ prop is defined with a default value of 2 and a type of Number.
- Data: Inside the ‘counter’ component, there is a
datafunction that initializes the ‘count’ data property to 0. Data properties are used to store and manage component-specific data. - Methods: The ‘counter’ component has a method called ‘increment’. This method increments the ‘count’ by the value of ‘addNum’ when the button is clicked.
- Vue Instance: After defining the ‘counter’ component, a Vue instance named ‘app’ is created and mounted on the ‘#app’ element. This connects the Vue app to the HTML element with the id ‘app’.
- Using the ‘counter’ Component: Inside the ‘#app’ element, the ‘counter’ component is used with the
<counter v-bind:add-num="5"></counter>syntax. The ‘v-bind:add-num’ directive binds the ‘addNum’ prop of the ‘counter’ component to the value 5. This means that when the ‘counter’ component is rendered, it will receive ‘addNum’ with a value of 5.
Conclusion
In this example, we’ve been exploring the basic ideas behind Vue.js. We’ve been diving into components and props, which are pretty important. With Vue.js, developers can actually create cool web apps that are super interactive. The best part is, you can easily create reusable components and pass data between them using props. Understanding these core concepts is really key if you want to make some awesome user interfaces with Vue.js.