Vue

VueJS2: Assignment 2

by Aubrey Taylor

HTML

<div id="exercise">
  <h2>VueJS2: Assignment 2</h2>
  <!-- 1) Show an alert when the Button gets clicked -->
  <div>
    <button v-on:click="alert">Show Alert</button>
  </div>
  <!-- 2) Listen to the "keydown" event and store the value in a data property (hint: event.target.value gives you the value) -->
  <div>
    <input type="text" v-on:keydown="updateValue">
    <p>{{ value }}</p>
  </div>
  <!-- 3) Adjust the example from 2) to only fire if the "key down" is the ENTER key -->
  <div>
    <input type="text" v-on:keydown.enter="updateValue">
    <p>{{ value }}</p>
  </div>
</div>

CSS

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

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

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#exercise",
  data: {
  	value: "",
  },
  methods: {
  	alert: function() {
    	window.alert("Hello!");
    },
    updateValue(event) {
    	this.value = event.target.value;
    }
  }
})