08. v-bind and v-on shorthands

v-on 기능을 @으로 변경 가능하다

[원본.]

 

    <section id="events">

      <h2>Events in Action</h2>

      <button v-on:click="add(10)">Add 10</button>

      <button v-on: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>

      <p>Your Name: {{ fullname }}</p>

    </section>

 

 

[변경]

 

    <section id="events">

      <h2>Events in Action</h2>

      <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 @click="resetInput">Reset Input</button>

      <p>Your Name: {{ fullname }}</p>

    </section>

 

 

@click.right도 가능하다.

v-bind도 가능하다

 

 <input type="text" v-bind:value="..." v-model="name">

 

아래처럼 :value로 변경이 가능하다.

 

 <input type="text" :value="..." v-model="name">