|
|
@ -0,0 +1,47 @@ |
|
|
|
<!DOCTYPE html> |
|
|
|
<html lang="ru"> |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<title>Document</title> |
|
|
|
<link href="/src/style.css" rel="stylesheet"/> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<script type="importmap"> |
|
|
|
{ |
|
|
|
"imports": { |
|
|
|
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<div id="app"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-img"> |
|
|
|
<img src="/src/assets/cat-img.png"/> |
|
|
|
</div> |
|
|
|
<div class="card-fullname"> |
|
|
|
<div>{{cat_data.firstname}} {{cat_data.lastname}}</div> |
|
|
|
</div> |
|
|
|
<div class="card-age"> |
|
|
|
<span>{{cat_data.age}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<script type="module"> |
|
|
|
import { createApp, ref } from 'vue' |
|
|
|
createApp({ |
|
|
|
setup() { |
|
|
|
const cat_data = ref(null); |
|
|
|
fetch("http://localhost:8000/cat").then( res => res.json()).then(data => cat_data.value = data); |
|
|
|
return { |
|
|
|
cat_data |
|
|
|
} |
|
|
|
} |
|
|
|
}).mount('#app') |
|
|
|
</script> |
|
|
|
|
|
|
|
</body> |
|
|
|
</html> |