Embed Size (px)
Citation preview
Vue.JS - IntroductionEueung Mulyana
http://eueung.github.io/js/vuejsJS CodeLabs | Attribution-ShareAlike CC BY-SA
1 / 16
Agenda
Quick Start
Build an App with Vue.JS
2 / 16
Vue.JS - Quick Start
3 / 16
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Vue.JS</title>
<style></style></head>
<body onload="init()">
<div id="app"> {{ message }} </div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"> <script type="text/javascript"> function init() { new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); } </script>
</body></html>
Example #1
4 / 16
Example #2
<!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> <input v-model="message"> </div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"> <script type="text/javascript"> function init() { new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); } </script></body></html>
5 / 16
<!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>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"> <script type="text/javascript"> function init() { new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awesome' } ] } }); } </script></body></html>
Example #3
6 / 16
Example #4
<!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>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"> <script type="text/javascript"> function init() { new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join( } } }); } </script></body></html>
7 / 16
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Vue.JS</title><style></style<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>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"> <script type="text/javascript"> function init() { new Vue({ el: '#app', data: { newTodo: '', todos: [ { text: 'Add some todos' } ] }, methods: { addTodo: function () { var text = this.newTodo.trim() if (text) { this.todos.push({ text: text }); this }, removeTodo: function (index) { this.todos.splice(index, } }); }</script></body></html>
Example #5
8 / 16
Build an App with Vue.JSscotch.io
9 / 16
Case #1
<!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" <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" </div></nav>...</body><script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></<script src="https://cdn.jsdelivr.net/vue.resource/0.1.17/vue-resource.min.js"<script src="vue-scotchio-1.js"></script></html>
vue-schotchio-1.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" <tag-textarea class="form-control" placeholder="Event Description" <input type="date" class="form-control" placeholder <button class="btn btn-primary" v-on:click="addEvent" </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" <h5><i class="glyphicon glyphicon-calendar" v-if="event.date" <p class="list-group-item-text" v-if="event.description" <button class="btn btn-xs btn-danger" v-on:click="deleteEvent(event)" </a> </div> </div></div>
10 / 16
Case #1
new Vue({ el: '#events', data: { event: { name: '', description: '', date: '' }, events: [] }, ready: function() { this.fetchEvents(); }, methods: { ... }});
vue-scotchio-1.js
methods: { fetchEvents: function() { var events = [ { id: 1, name: 'TIFF', description: 'Toronto International Film Festival' { id: 2, name: 'The Martian Premiere', description: { id: 3, name: 'SXSW', description: 'Music, film and interactive festival in Austin, TX.' ]; 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); } } }
11 / 16
Case #1
12 / 16
Case #2
</body><script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></<script src="https://cdn.jsdelivr.net/vue.resource/0.1.17/vue-resource.min.js"<script src="vue-scotchio-2.js"></script></html>
methods: { fetchEvents: function() { this.$http.get('vue-scotchio-2.json').success(function this.$set('events', events); }).error(function(error) { console.log(error); }); }, addEvent: function() { ... }, deleteEvent: function(index) { ... } }
vue-scotchio-2.json
[ { "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" }]
13 / 16
Case #2
14 / 16
References1. Getting Started - vue.js2. Build an App with Vue.js | Scotch
15 / 16
ENDEueung Mulyana
http://eueung.github.io/js/vuejsJS CodeLabs | Attribution-ShareAlike CC BY-SA
16 / 16
