hectorlorenzo

import initMixin from './internal/init'
import stateMixin from './internal/state'
import eventsMixin from './internal/events'
import lifecycleMixin from './internal/lifecycle'
import miscMixin from './internal/misc'

import dataAPI from './api/data'
import domAPI from './api/dom'
import eventsAPI from './api/events'
import lifecycleAPI from './api/lifecycle'

hectorlorenzo

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

hectorlorenzo

import initMixin from './internal/init'

/* ... */

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

/* ... */

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

class CustomHeading extends HTMLElement {
  constructor () {}
}

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

hectorlorenzo

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

hectorlorenzo

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

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 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()
    }
    static get observedAttributes () {
        return Object.keys(this.options.data)
    }
}