Javascript MVVM with Vue.JS
6 likes2,894 views
The document provides an introduction to Vue.js through examples and cases for building applications. It begins with quick start examples demonstrating basic Vue.js functionality like data binding, looping through arrays, and methods. It then covers two cases for building full applications with Vue.js, including fetching and manipulating data, and integrating with external APIs. References for further learning about Vue.js are also provided.
![<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8"><title>Vue.JS</title><style></style
</head>
<bodyonload="init()">
<divid="app">
<ul>
<liv-for="todointodos">
{{todo.text}}
</li>
</ul>
</div>
<scriptsrc="https://cdn.jsdelivr.net/vue/latest/vue.js">
<scripttype="text/javascript">
functioninit(){
newVue({
el:'#app',
data:{
todos:[
{text:'LearnJavaScript'},
{text:'LearnVue.js'},
{text:'BuildSomethingAwesome'}
]
}
});
}
</script>
</body></html>
Example #3
6 / 16](https://image.slidesharecdn.com/vue-151217102812/85/Javascript-MVVM-with-Vue-JS-6-320.jpg)
![<!DOCTYPEhtml>
<htmllang="en">
<head><metacharset="utf-8"><title>Vue.JS</title><style></style
<bodyonload="init()">
<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>
<scriptsrc="https://cdn.jsdelivr.net/vue/latest/vue.js">
<scripttype="text/javascript">
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](https://image.slidesharecdn.com/vue-151217102812/85/Javascript-MVVM-with-Vue-JS-8-320.jpg)
![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](https://image.slidesharecdn.com/vue-151217102812/85/Javascript-MVVM-with-Vue-JS-11-320.jpg)
![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](https://image.slidesharecdn.com/vue-151217102812/85/Javascript-MVVM-with-Vue-JS-13-320.jpg)
Javascript MVVM with Vue.JS
- 1. Vue.JS - Introduction Eueung Mulyana http://eueung.github.io/js/vuejs JS CodeLabs | Attribution-ShareAlike CC BY-SA 1 / 16
- 2. Agenda Quick Start Build an App with Vue.JS 2 / 16
- 3. Vue.JS - Quick Start 3 / 16
- 9. Build an App with Vue.JS scotch.io 9 / 16
- 12. Case #1 12 / 16
- 14. Case #2 14 / 16
- 15. References 1. Getting Started - vue.js 2. Build an App with Vue.js | Scotch 15 / 16
- 16. END Eueung Mulyana http://eueung.github.io/js/vuejs JS CodeLabs | Attribution-ShareAlike CC BY-SA 16 / 16