lesson 31: v-on and v-bind shorthand

This commit is contained in:
Andreas Zweili 2021-01-18 21:50:32 +01:00
parent bc69656d06
commit 529fa4e74a
2 changed files with 7 additions and 6 deletions

View File

@ -5,6 +5,7 @@ const app = Vue.createApp({
name: "",
lastName: "",
// fullName: "",
vueUrl: "https://vueproject.com",
};
},
watch: {

View File

@ -12,17 +12,17 @@
</head>
<body>
<header>
<h1>Vue Events</h1>
</header>
<section id="events">
<header>
<h1><a :href="vueUrl">Vue</a> Events</h1>
</header>
<h2>Events in Action</h2>
<button v-on:click="add(10)">Add 10</button>
<button v-on:click="reduce(5)">Subtract 5</button>
<button @click="add(10)">Add 10</button>
<button @click="reduce(5)">Subtract 5</button>
<p>Result: {{ counter }}</p>
<input type="text" v-model="name">
<input type="text" v-model="lastName">
<button v-on:click="resetInput">Reset Input</button>
<button @click="resetInput">Reset Input</button>
<p>Your Name: {{ fullName }}</p>
</section>
</body>