Nebucatnetzer
/
vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
basics-05-using-the-native-event-object/app.js
View File

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

12
basics-05-using-the-native-event-object/index.html
View File

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