Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Organize + Automate + Deploy = Webpack Chapter 16

Then, navigate to src/App.vue in the directory structure and delete pretty much

everything inside the file.

The final result should be as follows:

<template>

<div id="app">

</div>

</template>

<script>

export default {

name: 'app'

}

</script>

<style>

</style>

I've already done this for you, and, you can use another template with the

following command instead:

vue init gurghet/webpack

Building the compound interest calculator

To build the compound interest calculator, you need three fields: the initial capital or

principal, the yearly interest rate, and the investment length. You will then add an output
field to display the final result. Here's the corresponding HTML code:

<div id="app">

<div>

<label>principal capital</label>

<input v-model.number="principal">

</div>

<div>

<label>Yearly interestRate</label>

<input v-model.number="interestRate">

</div>

<div>

<label>Investment length (timeYears)</label>

<input v-model.number="timeYears">

</div>

<div>

You will gain:

<output>{{final}}</output>