// Samuel Burbano
const socials = {
  twitter: "@iosamuel",
  facebook: "iosamuel.dev",
  github: "iosamuel",
  web: "iosamuel.dev"
};

const data = {
  message: "Hola mundo!",
};

const span = document.querySelector("span");
span.innerText = data.message;

const input = document.querySelector("input");
input.addEventListener("input", () => {
  data.message = input.value;
  span.innerText = data.message;
});

<div id="app">
    <span></span>
    <br>
    <input type="text">
</div>

<div id="app">
    <span>{{ message }}</span>
    <br>
    <input type="text" v-model="message">
</div>

import { createApp } from "vue";
const app = createApp({
  data() {
    return {
      message: 'Hola Vue!'
    }
  }
});
app.mount("#app");

<div id="app">
  {{ message }}
</div>

import { createApp } from "vue";
const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
});
app.mount("#app");

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

import { createApp } from "vue";
const app4 = createApp({
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
});
app4.mount("#app-4");

import { createApp } from "vue";

app.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});

const app7 = createApp({
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  }
});
app7.mount('#app-7');

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

var sourceOfTruth = {}

var vmA = new Vue({
  data: sourceOfTruth
})

var vmB = new Vue({
  data: sourceOfTruth
})

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) {
      console.log('setMessageAction triggered with', newValue)
    }
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) {
      console.log('clearMessageAction triggered')
    }
    this.state.message = ''
  }
}

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

// Samuel Burbano
const socials = {
  twitter: "@iosamuel",
  facebook: "iosamuel.dev",
  github: "iosamuel",
  web: "iosamuel.dev"
};