Introduction to Vue.js

Who Am I?

Alex Kyriakidis

  • Laravel & Vue.js developer and consultant
  • Technical writer, author of The Majesty of Vue.js
  • Open source enthusiast

What is Vue.js?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.

 

Vue is focused on the view layer only and it can be used as a library in any project. Though, it is a full-blown framework, perfectly capable of building complex Single Page Applications.

adsf

 

Vue.js Statistics

Vue.js Statistics

  • NPM downloads: 1,943,567 total, 1,531,217 YTD (up from 382,184 in 2015, +300%)
  • Core repo GitHub stars: 37,664 total, ~26,000 YTD (up from ~7,600 in 2015, +240%)
  • vuejs.org page views: 21,424,759 YTD (up from 3,761,728 in 2015, +470%)
  • vuejs.org monthly active users: 358,405 (up from 77,836 in 2015, + 360%) Side note: 42% of user sessions are from China.
  • Chrome DevTools extension weekly active users: 84,098 (no prior year stats)

Why should I use it?

Because it will make your life easier!

But wait, doesn't Vue suit small projects only?

Vue is a Progressive Framework: the key is that we can scale up the framework’s complexity incrementally, only when the project’s inherent complexity demands it.

Let's Get Started

Data Binding

Directive: v-model

Using jQuery

<html>
  <head>
    <title>Hi Friend</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Hi</h1>
      <input id="message">
    </div>
    
    <script type="text/javascript">
      $('#message').on('keyup', function(){
        var message = $('#message').val();
        $('h1').text(`Hi ${message}`);
      })
    </script>
  </body>
</html>

Using Vue

<html>
  <head>
    <title>Hi Friend</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <h1>Hi {{name}}</h1>
        <input v-model="name">
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          name: 'Alex'
        }
      })
    </script>
  </body>
</html>

Computed Properties

Computed Properties

<html>
  <head>
    <title>Hi Friend</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <h1>Hi {{name}}, your are {{characteristic}}.</h1>
        <input v-model="name">
        <input v-model="age">
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          name: 'Alex',
          age: 23
        },
        computed: {
          characteristic(){
            return (this.age < 65) ? 'young' : 'old'
          }
        }
      })
    </script>
  </body>
</html>

Conditional Rendering

Directives:

  • v-if
  • v-else
  • v-else-if
  • v-show (the element will always be rendered)

Conditional Rendering

<html>
  <head>
    <title>Hi Friend</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <h1 v-if="name">Hi {{name}}</h1>
        <h1 v-else>Type your name so I can say hi.</h1>

        <input v-model="name">
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          name: ''
        }
      })
    </script>
  </body>
</html>

List Rendering

Directive: v-for

List Rendering

<html>
  <head>
    <title>Animals</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <h1>Animals:</h1>
        <ul>
          <li v-for="animal in animals">{{ animal.name }}</li>
        </ul>

        <h2>Equivalent</h2>
        <ul>
          <li v-for="animal in animals" v-text="animal.name"></li>
        </ul>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          animals: [
            {"name": "Crocodile"},
            {"name": "Bobcat"},
            {"name": "Elephant"},
            {"name": "Bandicoot"},
            {"name": "Barracuda"}
          ]
        }
      })
    </script>
  </body>
</html>

Event Handling

Directive: v-on, shorthand: '@'​​

Event Handling

<html>
  <head>
    <title>Hi Friend</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <h1 v-if="name">Hi {{name}}</h1>
        <h1 v-else>Type your name so I can say hi.</h1>

        <input v-model="name">
        <button @click="clear">Clear</button>
    </div>

    <script>
      new Vue({
        el: '#app',
        data:{
          name: ''
        },
        methods: {
          clear () {
            this.name = ''
          }
        }
      })
    </script>
  </body>
</html>

Components 101

Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code.

 

// register
Vue.component('my-component', {
  template: '<div>My horse is amazing!</div>'
})

// create a root instance
new Vue({
  el: '#example'
})

Components 101

<div id="example">
  <div>My horse is amazing!</div>
</div>
Source
Output

<div id="example">
  <my-component></my-component>
</div>

Components 101

<html>
  <head>
    <title>Amazing Thing</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <amazing thing="horse"></amazing>
      <amazing thing="dog"></amazing>
      <amazing thing="kid"></amazing>
    </div>

    <template id="amazing-template">
      <div>
        My {{thing}} is amazing!
        <button @click="likes++">Like ({{likes}})</button>
        <hr>
      </div>
    </template>

    <script>
      // register
      Vue.component('amazing', {
        props: ['thing'],
        template: '#amazing-template',
        // data must be a function
        data () {
          return {
            likes: 0
          }
        }
      })

      // create a root instance
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

Todo Example

<html>
  <head>
    <title>Amazing Thing</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app" class="container">
      <h1>Todos</h1>
      <!-- todos list -->
      <ul class="list-group">
        <li v-for="todo in todos" class="list-group-item">
          <todo :todo="todo"></todo>
        </li>
      </ul>

      <!-- add new -->
      <h3>Add new</h3>
      <div class="row">
        <div class="col-sm-8">
          <input v-model="newTodo" class="form-control">
        </div>
        <button @click="saveTodo" class="btn btn-primary col-sm-4">Add</button>
      </div>
    </div>

    <template id="todo-template">
      <div>
        {{todo}}
        <button v-if="!done" @click="done=true" class="btn btn-default">
          Done
        </button>
        <span v-else class="glyphicon glyphicon-ok"></span>
      </div>
    </template>

    <script>
      Vue.component('todo', {
        props: ['todo'],
        template: '#todo-template',
        // data must be a function
        data () {
          return {
            done: false
          }
        }
      })

      // create a root instance
      new Vue({
        el: '#app',
        data: {
          todos: [
            'Learn JavaScript.',
            'Learn Vue.js.',
            'Build something awesome.',
            'Bathe horse.'
          ],
          newTodo:''
        },
        methods: {
          saveTodo(){
            this.todos.push(this.newTodo)
            this.newTodo = ''
          }
        }
      })
    </script>
  </body>
</html>

Ecosystem

Vue Devtools

Supports time travel with Vuex

Ecosystem

Is anyone actually using it in production?​

Ecosystem

github.com/vuejs/ vue-router

github.com/vuejs/ vuex

github.com/vuejs/ vue-cli

github.com/vuejs/ vue-devtools

github.com/vuejs/ vue-touch

github.com/vuejs/ vue-rx

Routing
Flux State
CLI Generator
Devtools
Touch Events
Observables

Official support for practically required libs (like for routing and state management)

Ecosystem

Weex: A framework for building Mobile cross-platform UI

(Developed by Alibaba)

Questions?

Introduction to Vue.js

By Alex Kyriakidis

Introduction to Vue.js

  • 1,297
Loading comments...

More from Alex Kyriakidis