weather_API_key

The API key used for weather application in lesson 'Getting Data From External API'

Gain insights into developing intermediate-level SPAs using Vue.js. Delve into directives, renderers, user input handlers, and components. Discover how to integrate backend servers, APIs, and databases through quizzes and challenges.

VueApp.tar.gz

Backend

JSFrontEnd

JSFrontEnd2

Vue/Cli

Vue/Cli-copy

JSFrontEnd2-copy

JSFrontEnd2-copy-uhx0gq

JSFrontEnd2-copy-rjwkor

This course will provide you with the necessary skills to develop intermediate-level Single Page Applications (SPA) by using Vue.js. 

You will start with an introduction to Vue.js, why it is useful, and an explanation of its basic structure. After that, you will cover some crucial materials around Vue.js like directives, renderers, user input handlers, and Vue components.

Finally, you will combine all these concepts together to make a Single Page Application that interacts with a backend server, APIs, and a database.

Throughout the course you will find quizzes and coding challenges to help strengthen your grasp of all the concepts.

Hands-on Vue.js: Build a fully functional SPA

In this lesson, learn how to make the Vue.js application interactive by handling mouse and keyboard events. Mouse and keyboard events can be bound to the `methods` and `data` so the application does an operation when an element is clicked or a key is pressed. All the mouse and keyboard event handlers are bound to the `methods` and `data` using the `v-on` directive.

The mouse `click` event is one of the most used events on webpages when surfing the internet. When users click on a button or any other HTML element, they expect it to do _something_. This means that the `click` event performs action. That action might involve interaction with the `data`. The Vue.js `click` event is similar to the `onclick` event in vanilla JavaScript but it provides additional functionality.

The following is an executable example demonstrating the use of the `v-on` directive with a `click` event.

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<body>


<div id="app"></div> 

</body>
</html>

new Vue({
  el: '#app',
  template:
  `<div>
    <h1>Vue.js Application</h1>
     <button v-on:click="clicked">Click Me</button>
     <br><br>
     <h4> {{ message }} </h4>
  </div>
  `,
  data: {
      message: ''
  },
  methods: {
    clicked() {
      console.log('You clicked the button!');
      this.message = 'Hey! You clicked the button.';
    }
  }
})

codemirror

console

In the above example, observe that the `v-on:click` event handler is placed on a `button` which triggers the `clicked()` method. In **line 8**, observe that the `message` is displayed when the string is assigned to it in the `clicked()` method body.

Learn about mouse clicks and keyboard events in Vue.js.

Commencing the Journey: Introductions and Conventions

Why Use JavaScript Front-end Frameworks?

Basic Structure of Vue.js App

Vue Directives, Bindings, And Reactivity

Handling User Input and Event Handlers

Vue Components

Interaction With Backend Server (Database and API)

The Final App

Assessment on Vue.js

Mouse and Keyboard Events

`v-on:click`