Vue Quick Start Guide for Backend Developers
This article provides backend developers with a concise Vue quick‑start guide, covering core features such as component‑based architecture, two‑way data binding, and virtual DOM, and demonstrates practical setup via CDN or Vue CLI, along with detailed examples of data handling, computed properties, watchers, methods, and common directives.
Introduction
This guide is written for backend developers who want to quickly get up to speed with the Vue front‑end framework. Vue is popular for its component‑based architecture, two‑way data binding, and virtual DOM, which together improve modularity, reactivity, and performance.
Vue Features
Componentization : Vue encourages breaking the UI into reusable components, making the codebase more modular and maintainable.
Two‑Way Data Binding : Vue automatically synchronizes data between the model and the DOM, so changes in one are reflected in the other.
Virtual DOM : Vue uses a virtual DOM to minimise real DOM updates, boosting rendering efficiency.
Getting Started
Just like a backend project needs Maven dependencies, a Vue project needs its own dependencies. Front‑end developers typically use a scaffolding tool such as Vue CLI or include Vue directly via a CDN.
Using a CDN
<!-- Development version with warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Using Vue CLI
Run the Vue CLI to generate a new project, or simply download vue.js and include it locally with a <script> tag.
Basic Vue Instance
The following HTML and script create a minimal Vue app that displays a message:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: { message: "hello Vue!" }
})
</script>
</body>
</html>Data Operations
Vue offers three main ways to work with data:
Computed Properties : Define values derived from other data. They are cached and recomputed only when dependencies change.
Watchers (watch) : Observe data changes and run custom logic, useful for asynchronous or side‑effect‑heavy operations.
Methods : Functions defined under the methods option, invoked from the template or other code.
Example of a computed property that calculates the area of a circle based on a radius bound to an input:
new Vue({
el: "#app",
data: { radius: 5 },
computed: {
circleArea: function() {
return Math.PI * Math.pow(this.radius, 2);
}
}
});Example of a watcher achieving the same result:
new Vue({
el: "#app",
data: { radius: 0, circleArea: 0 },
watch: {
radius: function(newValue) {
console.log(newValue);
this.circleArea = Math.PI * Math.pow(newValue, 2);
}
}
});Directives
Vue directives add special behaviour to HTML elements. Commonly used directives include:
v-model : Two‑way binding for form inputs.
v-for with :key : Render lists.
v-if , v-else , v-else-if : Conditional rendering.
v-show : Toggle visibility via CSS.
v-bind (shorthand : ): Dynamically bind HTML attributes.
v-on (shorthand @ ): Event listeners.
v-once : Render once and ignore subsequent data changes.
Example of using v-model and a computed property together:
<div id="app">
<input v-model="radius" type="text">
<p>Circle area: {{ circleArea }}</p>
</div>
<script>
new Vue({
el: "#app",
data: { radius: 5 },
computed: {
circleArea() { return Math.PI * Math.pow(this.radius, 2); }
}
});
</script>Conclusion
The article aims to help backend developers quickly become familiar with Vue by covering its core concepts, setup options, data handling techniques, and essential directives. Mastering both backend and front‑end basics can make a developer more versatile and effective.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.