lesson 31: v-on and v-bind shorthand
This commit is contained in:
parent
bc69656d06
commit
529fa4e74a
|
@ -5,6 +5,7 @@ const app = Vue.createApp({
|
|||
name: "",
|
||||
lastName: "",
|
||||
// fullName: "",
|
||||
vueUrl: "https://vueproject.com",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in New Issue