hectorlorenzo

Learning React the Vue way

componentDidMount

Part of the component lifecycle, similar to created/mounted.

componentWillUnmount

Part of the component lifecycle, similar to destroyed

hectorlorenzo

function sum (x) {
  var sum = 0;

  while(x > 0) {
     sum = sum + x;
     x--;
  }
  
  return sum;
}

hectorlorenzo

function sumConsecutive (number) {
  var arrayOfNumbers = number.split('')
  var sum = 0
  var currentNumber = null
  var nextNumber = null
  var arrayLength = arrayOfNumbers.length
  
  for (var i = arrayLength - 1; i >= 0; i--) {
    currentNumber = arrayOfNumbers[i]

hectorlorenzo

const elemClass = class extends HTMLElement {
    constructor() {
        super()
    }
    static get observedAttributes () {
        return Object.keys(this.options.data)
    }
}

hectorlorenzo

const elemClass = class extends HTMLElement {
    constructor() {
        super()
    }
    attributeChangedCallback (name, oldValue, newValue) {
        const o = this
        const options = o.options

        options.watch[name].call(o, oldValue, newValue)
    }

hectorlorenzo

const elemClass = class extends HTMLElement {
    constructor() {
        super()
    }
    connectedCallback () {
        const o = this
        const data = o.options.data

        Object.keys(data).forEach((key) => {
            Object.defineProperty(o, key, {

hectorlorenzo

const customHeading = document.createElement('custom-heading')
document.body.appendChild(customHeading)

hectorlorenzo

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

hectorlorenzo

class CustomHeading extends HTMLElement {
  constructor () {}
}

customElements.define('custom-heading', CustomHeading)

hectorlorenzo

import initMixin from './internal/init'

/* ... */

function Vue (options) {
  this._init(options)
}

/* ... */