Vue.js

Created by Evan You

evanyou.me

Design, code & things in between. Core dev @meteorjs, creator of @vuejs, ex-Googler.

What is Vue.js

Vue.js is the VM in the MVC or MVVM

Is the holy place between Angular and React 

Why so much hype?

  • Simple API
  • Easy to get started with
  • Combined with vue-router can create nice SPA's

Plus the Laravel Community

Creator of Laracasts.com

@taylorotwel

Creator of Laravel.com

Current React learning status: overwhelmed. Learning @vuejs because it looks easy and has pretty website.

Enough with the intro already

Vue.js

Simple Vue.js App

Template

ViewModel

End Result

Main Vue.js Concepts

  • Constructors
  • Components
  • Directives
  • Filters
  • Transitions

Constructor

new Vue({
    el: '<jQueryStyleSelector>',
    
    template: '<id || inline template>',
    
    data: {
        props: 'that are visible in templates',
        they: 'can be referenced from methods with this.propName'
        first_name: "John",
        last_name: "Doe"
    },

    computed: {
        full_name: function(){
            return this.first_name + this.last_name; //John Doe    
        }
    },  

    methods: {
        // lifecycle hooks
        created: function(){},
        beforeCompile: function(){},
        ready: function(){},
        attached: function(){},
        detached: function(){},
        beforeDestroy: function(){},
        destroyed: function(){},

        customMethodsAlso: function(){
            //here we have access to data, computed methods also
        }
    }
})

A component is a vue instance without an element declared

Can be used by other components or the main app in their templates

new Vue({
  el: '.container'
  template: `<div> 
    <profile-picture></profile-picture> 
  </div>`
})

ViewModel + Template

Profile Picture Component

Vue.component("profile-picture", {
    template: "<img src='/pic.png' alt="Picture" />";
});
<div>
    <img src="/pic.png" alt="Picture" />
</div>

A directive is a component without an element and template

Can be used to handle template filtering and structure

Vue.directive('my-directive', {
  bind: function () {
    // do preparation work
    // e.g. add event listeners or expensive stuff
    // that needs to be run only once
  },
  update: function (newValue, oldValue) {
    // do something based on the updated value
    // this will also be called for the initial value
  },
  unbind: function () {
    // do clean up work
    // e.g. remove event listeners added in bind()
  }
})
<div v-my-directive="someValue"></div>

Build in directives

  • v-text (Updates the element’s textContent)
  • v-html (Updates the element’s innerHTML
  • v-if (Conditionally render the element)
  • v-show (oggle’s the element’s display CSS property)
  • v-else (Denote the “else block” for v-if and v-show
  • v-for (Loop throuth an array of object)
  • v-on (Used for events DOM or custom)
  • v-bind (Bind html attribute)
  • v-model (Create a two-way binding on a form input element)
  • v-ref (Create ref to template element)
  • v-el (Create reference to DOM element)
  • v-pre (Dont evaluate contents)
  • v-cloak (hide element until fully parsed)

Filters are used to filter looping objects in general

Arrays or objects

<ul>
    <li v-for="todo in todos | filterBy true in completed">
</ul>

Used in templates with the pipe (|) symbol

Build in filters

Creating a custom Filter

// register
Vue.filter('my-filter', function (value) {
  // return processed value
})

Use in templates with | myFilter arg1 arg2

Get in methods with 

                  var myFilter = Vue.filter('my-filter')

Reactivity with Object.defineProperty

new Vue({
    el: '#container',
    data: {
        name: "John",
        last: "Doe"
    }
})
Object.defineProperty(ViewInstance, 'name', {
  get: function() { return bValue; },
  set: function(newValue) { bValue = newValue; },
});

Caveats

Cannot detect array or object nested changes

Solution

var vm = new Vue({
  data: {
    a: {
      b: 1
    }
  }
})

// set an existing path
vm.$set('a.b', 2)
vm.a.b // -> 2

// set a non-existent path, will force digest
vm.$set('c', 3)
vm.c // ->

Demo Time

Now what?

  • Vue.js API Docs
  • Vue-router (https://github.com/vuejs/vue-router)
  • Vuex (https://github.com/vuejs/vuex)
  • Awesome Vue (https://github.com/vuejs/awesome-vue)
  • Vue-validator (https://github.com/vuejs/vue-validator)

Thank you

@pixel_grid

Nodejs Web Frameworks

By antoniskam1

Nodejs Web Frameworks

  • 13,428