Grab recent copies of Vue.js and Axios:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js"></script>
Add an element to hold the rendered view:
<table id="app">
<tr>
<th>Name:</th>
<td>{{ name }}</td>
</tr>
<tr>
<th>Handle:</th>
<td>{{ nick }}</td>
</tr>
<tr>
<th>Email:</th>
<td><a v-bind:href="mbox">{{ mbox }}</a></td>
</tr>
<tr>
<th>Website:</th>
<td><a v-bind:href="homepage">{{ homepage }}</a></td>
</tr>
<tr>
<th>Depiction:</th>
<td><img class="thumbnail" v-bind:src="depiction"></img></td>
</tr>
</table>
Grab the model from a JSON API and render the view from the template:
<script type="text/javascript">
.createApp({
Vuedata: function() {
return {
name: '',
nick: '',
mbox: '',
homepage: '',
depiction: '',
;
},
}created: function() {
var caller = this;
axios.get('/james.json')
.then(function (response) {
.name = response.data.name;
caller.nick = response.data.nick;
caller.mbox = response.data.mbox;
caller.homepage = response.data.homepage;
caller.depiction = response.data.depiction;
caller
}).catch(function (error) {
console.error(error.message);
;
}),
}.mount('#app');
})</script>
Name: | {{ name }} |
---|---|
Handle: | {{ nick }} |
Email: | {{ mbox }} |
Website: | {{ homepage }} |
Depiction: |
|