Introduction to Vue.js

vuejs.org

@vuejs

Who Am I?

Alex Kyriakidis

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

@hootlex

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

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)

Read "Vue in 2016" by Evan You

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.

Evan You, Creator of Vue.js

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

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