Get started with VueJS as a jQuery developer

Getting started with Vue.js for someone who knows jQuery is a relatively straightforward process, as both frameworks have some similarities in terms of syntax and concepts. However, there are some fundamental differences between the two frameworks, and it's important to understand them before diving into Vue.js.

Here's a step-by-step guide to getting started with Vue.js:

Install Vue.js

The first step is to install Vue.js. You can do this in a few different ways, but the easiest is to use a content delivery network (CDN) link in your HTML file:

<script src="https://unpkg.com/vue@next"></script>

Alternatively, you can use a package manager like npm or yarn to install Vue.js and manage your dependencies:

npm install vue@next

Once you have installed Vue.js, you can create a new Vue.js project using the Vue CLI. Here is how you can create a new project using the Vue CLI:

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

This will create a new Vue.js project in the my-project directory and start a development server at http://localhost:8080 (terminal will promt you with the URL to use, both locally and within your local network, e.g. if you want to open your Vue page on another device).

Create a Vue instance

In Vue.js, you create a Vue instance to control a part of your application. You can think of it as a container for all the data, methods, and other properties that make up your component.

HTML:

<div id="app">
	{{ message }}
</div>

JavaScript:

const app = Vue.createApp({
	data() {
		return {
			message: 'Hello Vue!'
		}
	}
})

app.mount('#app')

In this example, we've created a Vue instance with a single property, message, which is bound to the #app element in our HTML. This means that whenever the value of message changes, the text in the #app element will be updated automatically.

Use directives

One of the most powerful features of Vue.js is its use of directives. Directives are special attributes that can be added to HTML elements to apply special behavior or functionality.

<div id="app">
	<input v-model="message">
	{{ message }}
</div>

In this example, we've added the v-model directive to an <input> element. This directive creates a two-way binding between the message property in our Vue instance and the value of the input field. This means that whenever the user types something into the input field, the message property will be updated automatically, and vice versa.

Handle events

In jQuery, you would typically handle events by attaching event listeners to elements using the .on() method. In Vue.js, you can use the @ symbol to bind event listeners directly to elements.

HTML:

<div id="app">
	<button @click="increment">Increment</button>
	{{ count }}
</div>

JavaScript:

const app = Vue.createApp({
	data() {
		return {
			count: 0
		}
	},
	methods: {
		increment() {
			this.count++
		}
	}
})

app.mount('#app')

In this example, we've added a button to our template and used the @click directive to bind a increment method to the button. Whenever the button is clicked, the increment method will be called, and the count property in our Vue instance will be incremented.

Use computed properties

In jQuery, you might use functions to compute values based on other values. In Vue.js, you can use computed properties to achieve the same thing. Computed properties in Vue.js are properties that are automatically updated based on the values of other properties in the Vue instance. They are similar to methods in that they can return a value based on some calculation, but they are cached based on their dependencies, so they only update when necessary.

In other words, computed properties are reactive properties that depend on other reactive properties, and they are designed to help you keep your template code clean and concise by allowing you to compute values based on other values without cluttering up your template with lots of logic.

HTML:

<div id="app">
	<input v-model="firstName">
	<input v-model="lastName">
	<p>{{ fullName }}</p>
</div>

JavaScript:

const app = Vue.createApp({
	data() {
		return {
			firstName: '',
			lastName: ''
		}
	},
	computed: {
		fullName() {
			return `${this.firstName} ${this.lastName}`
		}
	}
})

app.mount('#app')

In this example, we've created a computed property called fullName, which concatenates the firstName and lastName properties together. Whenever either the firstName or lastName properties change, the fullName property will be updated automatically.

Use conditional rendering

In jQuery, you might use the show() and hide() methods to conditionally show or hide elements. In Vue.js, you can use the v-if directive to achieve the same thing.

HTML:

<div id="app">
	<button @click="toggle">Toggle</button>
	<p v-if="visible">Hello Vue!</p>
</div>

JavaScript:

const app = Vue.createApp({
	data() {
		return {
			visible: true
		}
	},
	methods: {
		toggle() {
			this.visible = !this.visible
		}
	}
})

app.mount('#app')

In this example, we've added a button that toggles the visible property between true and false. We've also added a v-if directive to the <p> element, which will only display the text if the visible property is true.

Use loops

In jQuery, you might use the .each() method to loop through a collection of elements. In Vue.js, you can use the v-for directive to loop through an array of data.

HTML:

<div id="app">
	<ul>
		<li v-for="item in items">{{ item }}</li>
	</ul>
</div>

JavaScript:

const app = Vue.createApp({
	data() {
		return {
			items: ['Item 1', 'Item 2', 'Item 3']
		}
	}
})

app.mount('#app')

In this example, we've created an array of items and used the v-for directive to loop through each item and display it in a <li> element.

These are just a few examples of how you can use Vue.js to achieve common tasks that you might have previously used jQuery for. With its powerful directives, computed properties, and other features, Vue.js offers a flexible and intuitive way to build dynamic, reactive web applications.