Vue

Udemy VueJS2 Assignment 1

by Aubrey Taylor

HTML

<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 style="width:100px;height:100px" v-bind:src="fpo">
    </div>
    <!-- 5) Pre-Populate this input with your name (set the "value" attribute) -->
    <div>
        <input type="text" v-bind:value="name">
    </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#exercise {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
	el: "#exercise",
  data: {
  	name: "Jane Doe",
    age: 99,
    fpo: "https://placehold.it/100"
  },
  methods: {
    random: function() {
    	return Math.random();
    }
  }
});