March 28, 2018
<WebOfficeHours/>
Vue.js
The Progressive JavaScript Framework
Approachable
Versatile
Performant
Who uses Vue.js?
- Alibaba
- Baidu
- Chess.com
- Behance & Adobe Portfolio
- Codeship
- GitLab
- Nintendo
- Tencent
Demo
- https://cdn.jsdelivr.net/npm/vue
- id & Vue instantiation
- {{ double moustache }}
- v-model <input> binding
- v-if and v-else
- v-on:click or @click
<html>
<body>
<div id="app">
<h1>{{ appName }}</h1>
<input type="text" v-model="attendee" />
<button @click="addNewAttendee">Add</button>
<div v-if="attendee">Adding {{ attendee }} to the list</div>
<div v-else>Who is at the door?</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
<script>
new Vue({
el: '#app',
data: {
'appName': 'Web Dev Meetup',
'attendee': ''
},
methods: {
addNewAttendee () {
alert(this.attendee + ' is in the house!');
this.attendee = '';
}
}
});
</script>
</body>
</html>Fig. 1
- v-html
- @keyup.enter
- mounted () life cycle hook
- Vue.component
- v-bind: or :
- computed
<html>
<body>
<div id="app">
<h1>{{ appName }}</h1>
<input type="text" v-model="attendee" @keyup.enter="addNewAttendee" />
<button @click="addNewAttendee">Add</button>
<div v-if="attendee">Adding {{ attendee }} to the list</div>
<div v-else>Who is at the door?</div>
<div>No of attendees: {{ noOfAttendees }}</div>
<attendee-list v-bind:attendees="attendees"></attendee-list>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
<script>
Vue.component('attendee-list', {
template: `
<div style="margin-top:20px;">
<ol>
<li v-for="attendee in attendees" v-html="attendee" />
</ol>
</div>
`,
props: ['attendees']
});
new Vue({
el: '#app',
data: {
'appName': 'Web Dev Meetup',
'attendee': '',
'attendees': []
},
computed: {
noOfAttendees () {
return this.attendees.length;
}
},
methods: {
addNewAttendee () {
if (!this.attendee) return;
this.attendees.push(this.attendee);
this.attendee = '';
}
},
mounted () {
this.attendees = ['Paul', 'Eugen', 'Ivan'];
}
});
</script>
</body>
</html>Fig. 2
Bonus
- transition
<style>
.v-enter-active, .v-leave-active {
transition: all 1s ease;
}
.v-enter, .v-leave-to {
transform: translateY(100px);
opacity: 0;
}
</style>
<script>
Vue.component('attendee-name', {
template: `
<transition>
<li v-html="name"></li>
</transition>
`,
props: ['name']
});
Vue.component('attendee-list', {
template: `
<div style="margin-top:20px;">
<ol>
<attendee-name v-for="attendee in attendees" :name="attendee"></attendee-name>
</ol>
</div>
`,
props: ['attendees']
});
</script>Fig. 3
https://ijklim.github.io/
https://ijklim.github.io/gdp/
https://pomodoro-timer.github.io/
https://notes-2go.firebaseapp.com/
- https://codepen.io/ivanlim/pen/aYVJjJ
- https://codepen.io/ivanlim
- https://github.com/ijklim
- https://aiwebstudio.com
Q & A
VueJS
By Paul Beresuita
