Javascript MVVM with Vue.JS


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

Javascript MVVM with Vue.JS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Javascript MVVM with Vue.JS

Similar to Javascript MVVM with Vue.JS (20)

More from Eueung Mulyana

More from Eueung Mulyana (20)

Recently uploaded

Recently uploaded (20)

Javascript MVVM with Vue.JS