Find the JSFiddle here: https://jsfiddle.net/smax/cgagqn89/
Or take this Code:
HTML:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="exercise">
<!-- 1) Fill the <p> below with your Name and Age - using Interpolation -->
<p>VueJS is pretty cool - {{ name }} ({{ age }})</p>
<!-- 2) Output your age, multiplied by 3 -->
<p>{{ age * 3 }}</p>
<!-- 3) Call a function to output a random float between 0 and 1 (Math.random()) -->
<p>{{ random() }}</p>
<!-- 4) Search any image on Google and output it here by binding the "src" attribute -->
<div>
<img v-bind:src="image" style="width:100px;height:100px">
</div>
<!-- 5) Pre-Populate this input with your name (set the "value" attribute) -->
<div>
<input type="text" v-bind:value="name">
</div>
</div>
CSS:
None
JavaScript:
new Vue({
el: '#exercise',
data: {
name: 'Max',
age: 27,
image: 'https://camo.githubusercontent.com/224f79940611c6c12fb649128eca1cae31086d23/68747470733a2f2f7261776769742e636f6d2f7675656a732f617765736f6d652d7675652f6d61737465722f6c6f676f2e706e67'
},
methods: {
random: function() {
return Math.random();
}
}
});