Hello, I’m Jeannie, your writer for this month. Let’s dive into Vue JS.
A progressive JavaScript framework for creating user interfaces, Vue.js offers capabilities like reactive data binding, component-based architecture, and a virtual DOM for effective rendering and is meant to be simple to learn and use. Although it’s frequently used to build single-page applications, it may also be used to build more compact components or sections of a bigger application.
The Set-up
Before anything, please install node.js first.
First off, we’ll start on setting up:
There would be a series of prompts after running the command above. You may just choose No if you’re unsure what packages to install.
Now after that, you can go inside of your project then run these command :
And just like that, you are ready to go! (Hooray!)
Single-File Components
In Vue.js, a single-file component is a way to organize a component’s markup, logic, and styles in a single file with a “.vue” extension. This file contains three sections: template, script, and style. Single-file components make it easier to manage and reuse components, and allow developers to encapsulate component logic and styling in one place.
Here are some comonly used methods in VueJS :
1. Data – objects in a component that contains the component’s reactive data properties.
2. Method – i think this is self explanatory. methods() can have multiple user defined functions that can be called inside the template
3. Watch – used to watch for changes to a specific data property or computed property and perform an action when it changes
4. Computed – used to define a computed property that is dependent on other data properties.
5. Created – a lifecycle hook that is called when the component is created
6. Mounted – a lifecycle hook that is called when the component is inserted into the DOM.
Below is an example of a SFC that has data, methods and watchers.
