# Vue.js

The Progressive JavaScript Framework

## What's So Great About Vue.js?

* Simpler than other frameworks!
* Faster load time!

## Why Use Vue.js?

From GitLab: *"It allows our team to easily write simple JavaScript. Getting started with Vue.js is extremely easy. Its source code is very readable, and the documentation is the only tutorial you'll ever need. You don't need external libraries. You can use it with or without jQuery. You won't need to install any plugins, though many are available."*

## Demo

* How To Build A Simple Single Page Application Using Vue 2 (Part 1) `https://scotch.io/tutorials/how-to-build-a-simple-single-page-application-using-vue-2-part-1`
* How To Build A Simple Single Page Application Using Vue 2 (Part 2) `https://scotch.io/tutorials/how-to-build-a-simple-single-page-application-using-vue-2-part-2`

## Examples

HTML
```
<script src='https://unpkg.com/vue'></script>

<div id="app">
  <h1>{{ title }}</h1>
  <input type="text" v-on:input='handleInput'>
  <hr>
  <button v-on:click='increment'>Click Me</button>
  <p>Counter: {{ counter }}</p>
</div>
```

JavaScript
```
new Vue({
	el: '#app',
  data: {
  	title:'Good morning',
    counter: 0
  },
  methods: {
  	handleInput: function(event) {
    	this.title = event.target.value
    },
    increment: function() {
    	this.counter += 1
    }
  }
})
```

## Setup?

Option 1: Just add `<script src="https://unpkg.com/vue"></script>` to your `index.html`

Option 2: NPM installation is recommended when building large scale applications with Vue. Please type `npm install vue` in your terminal.

Option 3: CLI for quickly scaffolding Single Page Applications!
```
// install vue-cli
$ npm install --global vue-cli
// create a new project using the "webpack" template
$ vue init webpack my-project
// install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
```

## Resources

* [Vue.js official page](https://vuejs.org)
* [Udemy online class](https://www.udemy.com/vuejs-2-the-complete-guide/learn/v4/overview)