Book Image

Full-Stack Web Development with Vue.js and Node

By : Aneeta Sharma
Book Image

Full-Stack Web Development with Vue.js and Node

By: Aneeta Sharma

Overview of this book

Isomorphic JavaScript was the buzzword of the year 2017, allowing developers to utilize a single language throughout their web development stack and build cost-effective and scalable applications. MEVN is a one such modern web development stack consisting of web applications such as MongoDB, Express.js, Vue.js, and Node.js. Hands-On Full-Stack Web Development with Vue.js 2 and Node.js leverages the harmony of these technologies to help you create full-stack web applications. Starting with the core frameworks, this example-based guide explains all the key concepts of frameworks, how to set them up properly, and how to use popular modules to connect them together and make them work cohesively. You will learn all this with the help of real-world examples. In addition to this, you will be able to scaffold web application architecture, add an authentication layer, and develop the MVC structure to support the development of your application. You'll explore how to create data models for your applications and then write REST APIs by exposing your data model to your application. Solely orientated towards building a full, end-to-end application using the MEVN stack, this book will help you understand how your application development grows.
Table of Contents (12 chapters)

Data binding

Data binding is the process of synchronizing data. For example, for the same example for what we did on v-text, we can do it with data binding with the mustaches, in other words using the {{}} operators.

For example, we can use the {{message}} instead of using the Vue.js directive for the message. Let's change the code in src/components/Home.vue to the following:

<template>
<v-layout row wrap>
<v-flex xs12>
<div>{{message}}</div>
</v-flex>
<v-flex xs12>
<v-btn color="primary" v-on:click="reply">Reply</v-btn>
</v-flex>
</v-layout>
</template>
<script type="text/javascript">
export default {
data () {
return {
message: 'Hello there, how are you?',
}
},
methods: {
reply () {
this.message...