From jQuery to Vue
JavaScript
Chris Sevilleja
Developer Dude
Scotch.io
@chrisoncode
Ado Kukic
Developer Evangelist
Auth0
@kukicado
What is Vue?
Progressive JavaScript Library
Why use Vue?
- Simplicity
- Easy to jump from HTML/CSS/JS
- Incrementally adoptable (progressive)
- Super fast
- Lightweight (20kb)
Less
More
JavaScript Framework Land
/Library
Progressive?
- Start with view engine
- Add routing
- Add CLI
- Add state management
- Add unit testing
- Create full SPA
LAB
Hello World
Load the Vue Script
1
Create a Vue Instance
2
Create and Show Data
3
{{ }}
Attributes
v-bind
Listen and Act on Events
4
v-on
What is a JS App?
Define
Show
Listen
Vue is Easy!
An Easy Jump
Coming from Vanilla JavaScript
Current State of JS
- Node and npm
- Packages galore
- ES6
- Transpilers
- Module loaders
- Task runners
FEATURE 1
Random Gif
🤞 Please be safe for work 🤞
FEATURE 2
Trending Gifs
FEATURE 2
Searching Gifs
Thanks!
Chris Sevilleja
@chrisoncode
Holly Lloyd
@hollylawly
Nick Cerminara
@whatnicktweets
Ado Kukic
@kukicado
Coming Soon
Scotch Swag Giveaway!
bit.ly/scotch-swag
Vue Basics
The Vue Instance
The Root of All Vue
var app = new Vue({
el: '#app'
});
var app = new Vue({
el: '#app',
data: {
myVariableOne: 'something cool',
myVariableTwo: 'something even cooler'
}
});Defining Data
var app = new Vue({
el: '#app',
data: {
myVariableOne: 'something cool',
myVariableTwo: 'something even cooler'
},
methods: {
celebrate: function () {
alert('CELEBRATING!');
}
}
});Listening to an Event
v-on
LAB 03
Template Basics
Attributes
v-bind
Directives
v-if
Download Starter Files
github.com/scotch-io/vue-starter-course
Ways to Use Vue
- <script>
- Vue CLI (Basic)
- Vue CLI (Advanced w/ webpack)
Our Tools
Ways to Code
- CodePen
- Local Editor (VS Code / Sublime)
Optional Tools: lite-server
Automatically reload browser on save.
# node and npm required
# nodejs.org
# install lite-server
npm install -g lite-serverLAB 04
Template Lists
Looping
v-for
LAB 05
Styles and CSS
LAB 06
Handling Events
LAB 08
Processing Forms
2-way data-binding
v-model
*magic!*
LAB 09
Lifecycle Events
