Part 1 - reactivity
This series of tutorials aims to explain how modern JS frameworks work inside.
<template>
<div>
<h3>Addition Calculator</h3>
First:
<input type="number" v-model="num1">
<br/>
Second:
<input type="number" v-model="num2">
<p><strong> + = </strong></p>
</div>
</template>
<script>
import { ref } from '@vue/composition-api';
export default {
name: 'AddComposition',
setup() {
let num1 = ref(0);
let num2 = ref(0);
let sum = ref(num1.value + num2.value);
watchEffect(() => sum.value = num1.value + num2.value);
return {
num1,
num2,
sum
}
}
}
</script>