vue.js - Practice 1

by Rodwyn Moreno

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="exercise">
    <p>VueJS is pretty cool - {{ name }} <span v-once>({{ age }})</span></p>
    <p>{{ setAge() }}</p>
    <p v-once>{{ getNumber() }}</p>
    <div>
        <img v-bind:src="link" style="width:100px;height:100px">
    </div>
    <div>
        <input type="text" v-on:input="setName">
    </div>
</div>

JavaScript

new Vue({
	el: '#exercise',
  data: {
  	name: 'Rodwyn',
    age: 29,
    link: 'https://vuejs.org/images/logo.png'
  }, 
  methods: {
  	setAge: function() {
      return this.age*3;
    },
    getNumber: function() {
    	return Math.random();
    },
    setName: function(event) {
    	this.name = event.target.value;
    }
  }
});