Plus the Laravel Community

@jeffrey_way

Creator of Laracasts.com

@taylorotwel

Creator of Laravel.com

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

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

• capitalize
• uppercase
• lowercase
• currency
• pluralize
• json
• debounce
• limitBy
• filterBy
• orderBy

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