evilnapsis/vue-table1.html

## vue-table1.html
<!-- Powered by Evilnapsis http://evilnapsis.com -->
<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo Vue.js</title>
	<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<h1>Ejemplo de Listar Datos con Vue.js</h1>
<div id="app" class="container">
<table border="1">
<thead>
	<th>Id</th>
	<th>Nombre</th>
	<th>Apellido</th>
	<th>Telefono</th>
</thead>
	<tr v-for="data in all_data ">
		<td>{{data.id}}</td>
		<td>{{data.name}}</td>
		<td>{{data.lastname}}</td>
		<td>{{data.phone}}</td>
	</tr>
</ul>
</div>
<script>
	var app = new Vue({
		el: "#app",
		data: {
			all_data:[]
		},
		created: function(){
			console.log("Iniciando ...");
			this.get_contacts();
		},
		methods:{
			get_contacts: function(){
				fetch("./contactos.php")
				.then(response=>response.json())
				.then(json=>{this.all_data=json.contactos})
			}
		}
	});
</script>
</body>
</html>
	<!-- Powered by Evilnapsis http://evilnapsis.com -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Ejemplo Vue.js</title>
	<script type="text/javascript" src="vue.min.js"></script>
	</head>
	<body>
	<h1>Ejemplo de Listar Datos con Vue.js</h1>
	<div id="app" class="container">
	<table border="1">
	<thead>
	<th>Id</th>
	<th>Nombre</th>
	<th>Apellido</th>
	<th>Telefono</th>
	</thead>
	<tr v-for="data in all_data ">
	<td>{{data.id}}</td>
	<td>{{data.name}}</td>
	<td>{{data.lastname}}</td>
	<td>{{data.phone}}</td>
	</tr>
	</ul>
	</div>
	<script>
	var app = new Vue({
	el: "#app",
	data: {
	all_data:[]
	},
	created: function(){
	console.log("Iniciando ...");
	this.get_contacts();
	},
	methods:{
	get_contacts: function(){
	fetch("./contactos.php")
	.then(response=>response.json())
	.then(json=>{this.all_data=json.contactos})
	}
	}
	});
	</script>
	</body>
	</html>