A Full Day of Vue.js
01. The Vue Instance I
Data & Vue Directives
The Vue Instance is the heart of a Vue application. All Vue applications begin with the Vue instance.
The Vue Instance
new Vue({});options
Must have Vue available in our application - through a CDN or an installed library.
new Vue({
});
The Vue Instance
el:
'#app'
new Vue({
el: '#app',
});<body>
<div id="app"></div>
</body>The Vue Instance
The Vue Instance - Data
new Vue({
el: '#app',
});
data: {}
new Vue({
el: '#app',
data: {
speaker: 'Hassan Djirdeh',
workshop: 'A Full Day of Vue.js',
city: 'Toronto'
},
});<div id="app">
<h1>The speaker is ...</h1>
<h1>The workshop is ...</h1>
<h1>The city is ...</h1>
</div>main.js
index.html
The Vue Instance - Data
The Vue Instance - Data
{{Mustache}} syntax
to bind text content
new Vue({
el: '#app',
data: {
speaker: 'Hassan Djirdeh',
workshop: 'A Full Day of Vue.js',
city: 'Toronto'
},
});<div id="app">
<h1>The speaker is {{speaker}}</h1>
<h1>The workshop is {{workshop}}</h1>
<h1>The city is {{city}}</h1>
</div>main.js
index.html
Mustache Syntax
The Vue Instance - Data
The Vue Instance - Data
Mustache Syntax
bind text content
?
bind HTML attributes
The Vue Instance - Data
index.html
main.js
new Vue({
el: '#app',
data: {
speaker: 'Hassan Djirdeh',
img: 'https://avatars3.githubusercontent...',
workshop: 'A Full Day of Vue.js',
city: 'Salt Lake City'
},
});<div id="app">
<h1>The speaker is {{speaker}}</h1>
<img src="img" />
<h1>The workshop is {{workshop}}</h1>
<h1>The city is {{city}}</h1>
</div>The Vue Instance - Data
new Vue({
el: '#app',
data: {
speaker: 'Hassan Djirdeh',
img: 'https://avatars3.githubusercontent...',
workshop: 'A Full Day of Vue.js',
city: 'Salt Lake City'
},
});<div id="app">
<h1>The speaker is {{speaker}}</h1>
<img v-bind:src="img" />
<h1>The workshop is {{workshop}}</h1>
<h1>The city is {{city}}</h1>
</div>main.js
index.html
The Vue Instance - Directives
A Vue directive is essentially a special type of command that can be added to HTML content.
Commonly Used Directives
v-bind
v-if/v-show
v-on
v-for
v-model
data is reactive
new Vue({
el: '#app',
data: {
speaker: 'Hassan Djirdeh',
img: 'https://avatars3.githubusercontent...',
workshop: 'Intro to Vue',
city: 'Salt Lake City'
},
});<div id="app">
<h1>The speaker is {{speaker}}</h1>
<img v-bind:src="img" />
<h1>The workshop is {{workshop}}</h1>
<h1>The city is {{city}}</h1>
</div>main.js
index.html
The Vue Instance - Data
The Vue Instance - Data & Reactivity
new Vue({
el: '#app',
data: {},
});
methods: {}
new Vue({
el: '#app',
data: {
speaker: 'Hassan Djirdeh',
...
},
methods: {
changeSpeaker() {
this.speaker = 'Aubrey Graham';
}
}
});<div id="app">
<h1>The speaker is {{speaker}}</h1>
<img v-bind:src="img" />
<h1>The workshop is {{workshop}}</h1>
<h1>The city is {{city}}</h1>
<button v-on:click="changeSpeaker">
Change Speaker
</button>
</div>main.js
index.html
The Vue Instance - Data & Reactivity
Vue applications are entirely data-driven!
The Vue Instance - Data & Reactivity
const speakerElement = $('h1:first');
const imgElement = $('img');
('button').on({
'click': function() {
if (speakerElement.text() === 'Hassan Djirdeh') {
imgElement.attr('src','https://s3-us-west-2.amazonaws.com/...');
speakerElement.text('Aubrey Graham');
} else {
// ...
}
}
});Traditional JavaScript/jQuery apps are DOM manipulation-driven!
The Vue Instance - Data & Reactivity
No recognition of property addition/deletion
new Vue({
el: '#app',
data: {
speaker: 'Select a speaker!',
img: 'https://via.placeholder.com/350x150',
workshopDetails: null,
city: '',
},
methods: {
changeWeather() {
this.weather = 'sunny';
}
}
});The Vue Instance - Data & Reactivity
The Vue Instance - Data & Reactivity
Vue uses the Virtual DOM to re-render the template
Virtual DOM
Actual DOM
patch
The Vue Instance - v-if and v-show
v-if
v-show
<h1 v-if="ok">Yes</h1>
<h1 v-show="ok">Yes</h1>
Does not render the entire element unless ok is true.
Always render the element but control the CSS display property based on value of ok.
The Vue Instance - v-on
v-on
<h1 v-on:click="method">Yes</h1>
<h1 v-on:dblclick="method">Yes</h1>
<input v-on:keydown="method" />
<input v-on:keyup="method" />
<input v-on:submit="method" />
...
The Vue Instance - v-on
v-on - key modifiers
<input v-on:keyup.tab="method" />
...
<input v-on:keyup.enter="method" />
<input v-on:keyup.delete="method" />
<input v-on:keyup.escape="method" />
<input v-on:keyup.space="method" />
v-on
<h1 v-on:click="method">Yes</h1>
The Vue Instance - v-on/v-bind
<h1 @click="method">Yes</h1>
v-bind
<img v-bind:src="img"/>
<img :src="img"/>
Shorthand Syntax
The Vue Instance - v-for and v-model
v-bind
Bind data to HTML attributes
v-if/v-show
Conditionally show/render content
v-on
Listen and act on DOM events
v-for
?
v-model
?
The Vue Instance - List rendering with v-for
List rendering is one of the most commonly used practices in modern front-end web development.
The Vue Instance - List rendering with v-for
The Vue Instance - List rendering with v-for
const tweets = [
{
id: 1,
name: 'James',
handle: '@jokerjames',
img: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
tweet: "If you don't succeed, dust yourself off and try again.",
likes: 10,
},
{
id: 2,
name: 'Fatima',
handle: '@fantasticfatima',
img: 'https://semantic-ui.com/images/avatar2/large/molly.png',
tweet: 'Better late than never but never late is better.',
likes: 12,
},
{
id: 3,
name: 'Xin',
handle: '@xeroxin',
img: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
tweet: 'Beauty in the struggle, ugliness in the success.',
likes: 18,
}
];
new Vue({
el: '#app',
data: {
tweets
}
});The Vue Instance - List rendering with v-for
What if we wanted to render a list of tweets?
The Vue Instance - List rendering with v-for
The Vue Instance - List rendering with v-for
Statically rendering each item in the list is:
Not Dynamic
Not D.R.Y
The v-for directive is used to render a list of items based on a data source.
v-for="item in items"
Syntax
The Vue Instance - List rendering with v-for
<div id="app">
<div class="tweet" v-for="tweet in tweets">
// ...
</div>
</div>The Vue Instance - List rendering with v-for
The Vue Instance - List rendering with v-for
Vue uses the key attribute to create unique bindings for each node's identity.
v-for="tweet in tweets" :key="tweet.id"
Syntax
The Vue Instance - List rendering with v-for
What does this mean?
When reordering items within a v-for list, Vue takes the performant saving approach to simply change (or patch) data in-place.
The Vue Instance - List rendering with v-for
The Vue Instance - List rendering with v-for
The Vue Instance - List rendering with v-for
2 caveats for Array Changes
Directly setting an item with an index
tweets[0].name = 'Hassan Djirdeh'
Directly modifying the length
tweets.length = 5
The Vue Instance - List rendering with v-for
2 caveats for Array Changes
Directly setting an item with an index
Vue.set(tweets, 0, {name: 'Hassan Djirdeh'...});
Directly modifying the length
this.tweets.splice(5)
🔧 Details
The Vue Instance - List rendering with v-for
v-bind
Bind data to HTML attributes
v-if/v-show
Conditionally show/render content
v-on
Listen and act on DOM events
v-for
Render list of items based on data
v-model
?
The Vue Instance - List rendering with v-for
The v-model directive is used to create two-way data binding between form inputs and text area elements.
v-model="dataAttribute"
Syntax
The Vue Instance - Data binding with v-model
The Vue Instance - Data binding with v-model
new Vue({
el: '#app',
data: {
name: '',
subject: '',
termsAndConditions: false,
yesOrNo: 'Yes'
},
});The Vue Instance - Data binding with v-model
Vue-devtools is a Chrome extension/Firefox add-on for debugging Vue applications.
The Vue Instance - Data binding with v-model
The Vue Instance - Data binding with v-model
The Vue Instance - Data binding with v-model
*Vue Documentation - Form Input Bindings
The Vue Instance - Chapter Summary!
-
The Vue Instance is the starting point of all Vue applications, and is mounted to a DOM element.
-
Vue applications are data-driven.
-
Mustache Syntax can be used to bind data on to text content.
-
Directives tell DOM elements to act in a certain way.
-
v-bind:
-
v-on:
-
v-for:
-
v-model:
-
v-if/v-show:
bind data to HTML attributes
listen and act on DOM events
render a list based on a data source
two-way data binding with form inputs
conditionally render/show a DOM element
The Vue Instance - Chapter Exercise 💪!
The Vue Instance - Chapter Exercise 💪!
Goals
-
Dynamically render content from the submissions array.
- Use the v-bind directive and mustache syntax!
-
Render a list of submission elements with the help of the v-for directive.
- Place the v-for directive on the element that we'd want repeated!
-
Allow the increment of submission votes by clicking the upvote arrow icon.
- Attach a click listener to call a method (or inline change the votes of an iterated submission).
Conditionally add a blue border around a submission post when a submission reaches 20 votes.
- Use the v-bind directive on the class attribute of the <article></article> element, to conditionally add the already existing .blue-border class. (Vue Docs for Syntax)
Solution 👀
A Full Day of Vue.js Workshop - 01 The Vue Instance I (Data & Vue Directives)
By djirdehh
