Vue.JS Introduction: Build Apps with Components


Vue.JS - Introduction
Eueung Mulyana
http://eueung.github.io/js/vuejs
JS 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

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>Vue.JS</title>
<style></style>
</head>
<bodyonload="init()">
<divid="app">
{{message}}
</div>
<scriptsrc="https://cdn.jsdelivr.net/vue/latest/vue.js">
<scripttype="text/javascript">
functioninit(){
newVue({
el:'#app',
data:{
message:'HelloVue.js!'
}
});
}
</script>
</body></html>
Example #1
4 / 16

Example #2

<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Vue.JS</title>
<style></style>
</head>
<divid="app">
<p>{{message}}</p>
<inputv-model="message">
</div>
functioninit(){
newVue({
el:'#app',
data:{
}
});
}
</script>
</body></html>
5 / 16

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8"><title>Vue.JS</title><style></style
</head>
<divid="app">
<ul>
<liv-for="todointodos">
{{todo.text}}
</li>
</ul>
</div>
functioninit(){
newVue({
el:'#app',
data:{
todos:[
{text:'LearnJavaScript'},
{text:'LearnVue.js'},
{text:'BuildSomethingAwesome'}
]
}
});
}
</script>
</body></html>
Example #3

6 / 16

Example #4

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8"><title>Vue.JS</title><style></style
</head>
<divid="app">
<p>{{message}}</p>
<buttonv-on:click="reverseMessage">ReverseMessage</butto
</div>
functioninit(){
newVue({
el:'#app',
data:{
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join
}
}
});
}
</script>
</body></html>
7 / 16

<!DOCTYPEhtml>
<htmllang="en">
<head><metacharset="utf-8"><title>Vue.JS</title><style></style
<divid="app">
<inputv-model="newTodo"v-on:keyup.enter="addTodo">
<ul>
<liv-for="todointodos">
<span>{{todo.text}}</span>
<buttonv-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
functioninit(){
newVue({
el:'#app',
data:{
newTodo:'',
todos:[{text:'Addsometodos'}]
},
methods:{
addTodo:function(){
vartext=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.JS
scotch.io
9 / 16

Case #1
<!doctypehtml>
<html>
<head>
<title>Vue</title>
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
<style>
.form-control{
margin-bottom:10px;
}
</style>
</head>
<body>
<navclass="navbarnavbar-default">
<divclass="container-fluid">
<aclass="navbar-brand"><iclass="glyphiconglyphicon-bullhorn"
</div>
</nav>
...
</body>
<scriptsrc="https://cdn.jsdelivr.net/vue/latest/vue.js"></
<scriptsrc="https://cdn.jsdelivr.net/vue.resource/0.1.17/vue-resource.min.js"
<scriptsrc="vue-scotchio-1.js"></script>
</html>
vue-schotchio-1.html
<divclass="container"id="events">
<divclass="col-sm-6">
<divclass="panelpanel-default">
<divclass="panel-heading">
<h3>AddanEvent</h3>
</div>
<divclass="panel-body">
<div>
<inputclass="form-control"placeholder="EventName"
<tag-textareaclass="form-control"placeholder="Even
<inputtype="date"class="form-control"placeholder
<buttonclass="btnbtn-primary"v-on:click="addEvent
</div>
</div>
</div>
</div>
<divclass="col-sm-6">
<divclass="list-group">
<ahref="#"class="list-group-item"v-for="eventineven
<h4class="list-group-item-heading"><iclass="glyphico
<h5><iclass="glyphiconglyphicon-calendar"v-if="even
<pclass="list-group-item-text"v-if="event.descriptio
<buttonclass="btnbtn-xsbtn-danger"v-on:click="dele
</a>
</div>
</div>
</div>
10 / 16

Case #1
newVue({
el:'#events',
data:{
event:{name:'',description:'',date:''},
events:[]
},
ready:function(){
this.fetchEvents();
},
methods:{
...
}
});
vue-scotchio-1.js
methods:{
fetchEvents:function(){
varevents=[
{id:1,name:'TIFF',description:'TorontoInternati
{id:2,name:'TheMartianPremiere',description:
{id:3,name:'SXSW',description:'Music,filmandi
];
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("Areyousureyouwanttodeletethisevent?"
this.events.$remove(index);
}
}
}
11 / 16

Case #2
</body>
<scriptsrc="https://cdn.jsdelivr.net/vue/latest/vue.js"></
<scriptsrc="https://cdn.jsdelivr.net/vue.resource/0.1.17/vue-resource.min.js"
<scriptsrc="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":"TorontoInternationalFilmFestival",
"date":"2015-09-10"
},
{
"id":2,
"name":"TheMartianPremiere",
"description":"TheMartiancomestotheatres.",
"date":"2015-10-02"
},
{
"id":3,
"name":"SXSW",
"description":"Music,filmandinteractivefestivalinAu
"date":"2016-03-11"
}
]
13 / 16

References
1. Getting Started - vue.js
2. Build an App with Vue.js | Scotch
15 / 16


END
Eueung Mulyana
http://eueung.github.io/js/vuejs
JS CodeLabs | Attribution-ShareAlike CC BY-SA
16 / 16

Vue.JS Introduction: Build Apps with Components

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Vue.JS Introduction: Build Apps with Components

Similar to Vue.JS Introduction: Build Apps with Components (20)

More from Eueung Mulyana

More from Eueung Mulyana (20)

Recently uploaded

Recently uploaded (20)

Vue.JS Introduction: Build Apps with Components