Vue.JS

Progressive Framework

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

A view into

¿Qué resuelve?

Vue.js

 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>

Progressive Framework

Vue.js

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

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

Declarative

Rendering

Vue.JS Progressive Framework // Samuel Burbano const socials = { twitter : "@iosamuel" , facebook : "iosamuel.dev" , github : "iosamuel" , web : "iosamuel.dev" }; A view into

	<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 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>{{ 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");

	<template>
	<p>{{ greeting }} World!</p>
	</template>

	<script setup>
	import { ref } from "vue";

	const greeintg = ref("Hello")
	</script>

	<style scoped>
	p {
	font-size: 2em;
	text-align: center;
	}
	</style>

	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
	}
	})