Vue Ya

Problema:

Crear una componente llamada 'articulos' que tenga una propiedad que reciba un vector de objetos literales. El objetivo de la componente es mostrar los datos del vector de articulos en una tabla HTML

pagina.html
funciones.js
estilos.css
Ejecución de la página

<!doctype html>
<html>
<head>
  <title>Prueba Vue</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
  <div id="aplicacion">
    <articulos v-bind:datos="datos"></articulos>
  </div>
  
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  Vue.component('articulos', {
    props:['datos'],
    template: `<div>
                 <table border="1">
                 <tr><td>Código</td><td>Descripción</td><td>Precio</td></tr>
                 <tr v-for="art in datos"><td>{{art.codigo}}</td><td>{{art.descripcion}}</td><td>{{art.precio}}</td></tr>
                 </table>
               </div>`
  })

var app=new Vue({
    el: '#aplicacion',
    data: {
      datos: [{
              codigo: 1, 
              descripcion: 'papas',
              precio: 12.52
              },{
              codigo: 2, 
              descripcion: 'naranjas',
              precio: 21
              },{
              codigo: 3, 
              descripcion: 'peras',
              precio: 18.20
              }]      
    }
  })
</script>

</body>
</html>

Componentes: propiedades de tipo objeto y vector