Vue for beginners

Session I - Introduction to Vue

Why do we need a UI Framework?

  • Binding - To events & observables
  • Performace - Components are compiled to performant render functions (VDOM)
  • Huge community and ecosystem
  • Get started quickly (cdn, vue-cli, create react app)

Vue

  • A Javascript UI Framework
  • Open Source & Community driven
  • Designed from the ground up to be incrementally adoptable
  • As performant if not more than other UI frameworks (React/Angular)
  • 4th most starred project on github (182,035 ⭐)
Vue

A Vue Instance


						const app1 = new Vue({
        // #app is a selector for our Vue app container
        el: '#app',
        // data is always a function that returns the initial state
        data() {
          // message is an observable value
          // and will update the UI when changed
          return { message: 'Hello world!' };
        },
        methods: {
          reverse() {
            // access data observables using 'this'
            this.message = this.message.split('').reverse().join('');
          }
        }
      });
Vue - app1

Declerative Rendering


						

        
Message: {{ message }}

        
12 x 12 = {{ 12 * 12 }}

        
0.1 + 0.2 != {{ 0.1 + 0.2 }}

        
Message: {{ message ? message : 'Default Message' }}

Message: {{ message }}

12 x 12 = {{ 12 * 12 }}

0.1 + 0.2 != {{ 0.1 + 0.2 }}

Message: {{ message ? message : 'Default Message' }}

To change the message variable,
open the dev console and edit app1.message
Vue

DOM & VDOM

Document Object Model - VNode vs Node 

          

            
My title

            Some text content
Directives - app2

Directives

They are Vue extended html attributes that tell the vue to do something to a DOM element.
v-if

						

        
Admin Panel

        
Homepage

        <p v-else>Login</p>

Admin Panel

Homepage

Login

Loops - app3

v-for

v-for Allows us to render a list of items based on an array [or object] 

						

        
    
          
  • {{ item }}
    •
  • {{ item }}
Binding - app4

v-bind

v-bind Allows us to manipulate HTML attributes with dynamic data
Event Listeners - app5

v-on

v-on Allows us to attach JavaScript functions to common events (click, change, submit, etc..) 

						

        
        
        
      

      <script>
      app5 = new Vue({
        el: '#app5',
        data() {
          return {
            clickCount: 0,
            enterCount: 0
          };
        },
        methods: {
          reset() {
            this.clickCount = 0;
            this.enterCount = 0;
          }
        }
      });
      </script>
2-Way Binding - app6

v-model

v-model Allows us to use two-way data binding 

						

        
        
        
        Hello {{ name }}!
        
      

      <script>
      app6 = new Vue({
        el: '#app6',
        data() {
          return {
            count: 0,
            name: 'world'
          };
        }
      });
      </script>

Hello {{ name }}!

Exercise 01 - Todo app

  1. Add v-model binding to the form input, bind to the value variable
  2. Add v-if to the 'The todo list is empty.' div
  3. Complete the missing v-for and :class bindings of the list item
  4. Replace 'Item 1' with an {{ expression }} that shows the todo's title
  5. Fix the addTodo & toggleTodo methods
  6. You should now be able to add todo items

Exercise 01-b - Clear done todos

  1. Add a clear done button
    <button @click="clearDone">Clear Done</button>
  2. Add a clear done method (clearDone) to the Vue instance

What we've learned

  • The Vue Instance (el, data, methods)
  • Directives (v-if, v-for)
  • Binding (v-model, v-bind)
  • Event listeners (v-on)

What's next

  • Components & SFC
  • Lifecycle Hooks
  • Props & Slots
  • State management & Routing
Question Time!