Vue.JS Tutorial

class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11863077/6d8ba8b4-a4c3-11e5-90c4-fe195d169a76.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-javascript fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Vue.JS - Introduction

### [Eueung Mulyana](https://github.com/eueung)
### http://eueung.github.io/js/vuejs
#### JS CodeLabs | [Attribution-ShareAlike CC BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)
#### 
]]
]]

---
class: column_t1 middle

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11863077/6d8ba8b4-a4c3-11e5-90c4-fe195d169a76.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-javascript fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Vue.JS - Quick Start
#### 
]]
]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue.JS</title>

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

</body></html>
```

]]
.column_t1[.vmiddle[
# Example #1

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #2
####

.figstyle1[
![](images/fig01.jpg)
]

]]
.column_t2[.vmiddle[

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue.JS</title>
  <style></style>
</head>

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

---
class: split-50 nopadding

.column_t2[.vmiddle[

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"><title>Vue.JS</title><style></style>
</head>
<body onload="init()">
  <div id="app">
    <ul>
*     <li v-for="todo in todos">
*       {{ todo.text }}
      </li>
    </ul>
  </div>

]]
.column_t1[.vmiddle[
# Example #3
####

.figstyle1[
![](images/fig02.jpg)
]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #4
####

.figstyle1[
![](images/fig03.jpg)
]

]]
.column_t2[.vmiddle[

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"><title>Vue.JS</title><style></style>
</head>
<body onload="init()">
  <div id="app">
    <p>{{ message }}</p>
*   <button v-on:click="reverseMessage">Reverse Message</button>
  </div>

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Vue.JS</title><style></style></head>
<body onload="init()">
  <div id="app">
*   <input v-model="newTodo" v-on:keyup.enter="addTodo">
    <ul>
*     <li v-for="todo in todos">
*       <span>{{ todo.text }}</span>
*       <button v-on:click="removeTodo($index)">X</button>
      </li>
    </ul>
  </div>

]]
.column_t1[.vmiddle[
# Example #5
####

.figstyle1[
![](images/fig04.jpg)
]

]]

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11863077/6d8ba8b4-a4c3-11e5-90c4-fe195d169a76.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-javascript fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Build an App with Vue.JS 
## [scotch.io](https://scotch.io/tutorials/build-an-app-with-vue-js-a-lightweight-alternative-to-angularjs)
]]
]]

---
class: split-50 nopadding

.column_t2[.vmiddle[
### Case #1

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <style>
    .form-control {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> Vue Events Bulletin Board</a>
  </div>
</nav>
...
</body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/0.1.17/vue-resource.min.js"></script>
<script src="vue-scotchio-1.js"></script>
</html>
```

]]
.column_t1[.vmiddle[

```html
<div class="container" id="events">
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3>Add an Event</h3>
      </div>
      <div class="panel-body">
        <div>
*         <input class="form-control" placeholder="Event Name" v-model="event.name">
*         <tag-textarea class="form-control" placeholder="Event Description" v-model="event.description"></tag-textarea>
*         <input type="date" class="form-control" placeholder="Date" v-model="event.date">
*         <button class="btn btn-primary" v-on:click="addEvent">Submit</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="list-group">
      <a href="#" class="list-group-item" v-for="event in events">
*       <h4 class="list-group-item-heading"><i class="glyphicon glyphicon-bullhorn"></i> {{ event.name }}</h4>
*       <h5><i class="glyphicon glyphicon-calendar" v-if="event.date"></i> {{ event.date }}</h5>
*       <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
*       <button class="btn btn-xs btn-danger" v-on:click="deleteEvent(event)">Delete</button>
      </a>
    </div>
  </div>
</div>
```
.center[vue-schotchio-1.html]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
### Case #1

```
new Vue({
  el: '#events',
  data: {
*   event: { name: '', description: '', date: '' },
*   events: []
  },
* ready: function() {
*   this.fetchEvents();
  },
  methods: {
     ...
  }
});
```

]]
.column_t2[.vmiddle[

```
  methods: {
*   fetchEvents: function() {
      var events = [
        { id: 1, name: 'TIFF', description: 'Toronto International Film Festival', date: '2015-09-10' },
        { id: 2, name: 'The Martian Premiere', description: 'The Martian comes to theatres.', date: '2015-10-02' },
        { id: 3, name: 'SXSW', description: 'Music, film and interactive festival in Austin, TX.', date: '2016-03-11' }
      ];
      this.$set('events', events);
      console.log(JSON.stringify(events));
    },
*   addEvent: function() {
      if(this.event.name) {
        this.events.push(this.event);
        this.event = { name: '', description: '', date: '' };
      }
    },
*   deleteEvent: function(index) {
      if(confirm("Are you sure you want to delete this event?")) {
        this.events.$remove(index);        
      }
    }
  }
```
.center[vue-scotchio-1.js]

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig05.jpg)
]
## Case #1

---
class: split-50 nopadding

.column_t2[.vmiddle[
## Case #2

```html
</body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/0.1.17/vue-resource.min.js"></script>
*<script src="vue-scotchio-2.js"></script>
</html>
```

```
  methods: {
    fetchEvents: function() {
*     this.$http.get('vue-scotchio-2.json').success(function(events) {
*       this.$set('events', events);
*     }).error(function(error) {
*       console.log(error);
*     });      
    },
    addEvent: function() {
      ...
    },
    deleteEvent: function(index) {
      ...
    }
  }
```
]]
.column_t1[.vmiddle[

```
[
  {
    "id": 1,
    "name": "TIFF",
    "description": "Toronto International Film Festival",
    "date": "2015-09-10"
  },
  {
    "id": 2,
    "name": "The Martian Premiere",
    "description": "The Martian comes to theatres.",
    "date": "2015-10-02"
  },
  {
    "id": 3,
    "name": "SXSW",
    "description": "Music, film and interactive festival in Austin, TX.",
    "date": "2016-03-11"
  }
]
```
.center[vue-scotchio-2.json]

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig06.jpg)
]
## Case #2

---

# References

1. [Getting Started - vue.js](http://vuejs.org/guide/)
1. [Build an App with Vue.js | Scotch](https://scotch.io/tutorials/build-an-app-with-vue-js-a-lightweight-alternative-to-angularjs)

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11863077/6d8ba8b4-a4c3-11e5-90c4-fe195d169a76.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-javascript fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# END

### [Eueung Mulyana](https://github.com/eueung)
### http://eueung.github.io/js/vuejs
#### JS CodeLabs | [Attribution-ShareAlike CC BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)
#### 
]]
]]