@djirdehh

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" />

👀 Event Handling Key Modifiers - Vue Docs

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

https://github.com/vuejs/vue-devtools

Vue-devtools is a Chrome extension/Firefox add-on for debugging Vue applications.

The Vue Instance - Data binding with v-model

Form Codepen not in iframe

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)

Starting Point 🎉

Solution 👀

Made with Slides.com