[Vue] 13. 수식어

* v-on: == @

 

 

1. 이벤트 수식어

 

1. @click.stop

- 클릭 이벤트의 전파(Bubbling)를 막음

- stopPropagation()과 같음

 

예시) action1은 실행되지만, action2는 실행되지 않음

<div id="app">
    <div @click="action2">
        <button @click.stop="action1">버블링 막기</button>
    </div>
</div>
<script>
  new Vue({
    el: '#app',
    methods: {
      action1(){
        alert("action1");
      },
      action2(){
        alert("action2");
      },
    },
  });
</script>

 

+) stopPropagation() 사용

---

<div id="app">
    <div @click="action2">
        <button @click="action1">버블링 막기</button>
    </div>
</div>
<script>
  new Vue({
    el: '#app',
    methods: {
      action1(e){
        alert("action1");
        e.stopPropagation();
      },
      action2(){
        alert("action2");
      },
    },
  });
</script>

---

 

 

2. @click.prevent

- "기본" 이벤트의 자동 실행을 막음 ex) a태그 = 페이지 이동, form태그 = submit

- preventDefault()와 같음

 

예시) action 메서드는 실행되지만, 페이지 이동은 일어나지 않는다.

<div id="app">
  <a href="https://www.naver.com/" @click.prevent="action">네이버</a>
</div>
<script>
  new Vue({
    el: '#app',
    methods: {
      action(e){
        alert("네이버로 이동할 수 없습니다.");
      },
    },
  });
</script>

 

+) preventDefault() 사용

---

<div id="app">
  <a href="https://www.naver.com/" @click="action">네이버</a>
</div>
<script>
  new Vue({
    el: '#app',
    methods: {
      action(e){
        alert("네이버로 이동할 수 없습니다.");
        e.preventDefault();
      },
    },
  });
</script>

---

 

 

- 두 가지 동시에 사용 가능

<a href="https://www.naver.com/" @click.stop.prevent="action">이동하기</a>

- 메서드 없이, 수식어만 사용 가능

<a href="https://www.naver.com/" @click.prevent>이동하기</a>

 

 

 

2. 키 수식어

 

.enter (=.13)	.esc	.down
.tab	.space	.left
.delete (Delete와 Backspace 키 둘 다)	.up	.right

 

 

예시) 값을 입력 후, enter를 누르면 그 값이 alert로 뜬다.

<div id="app">
    이름: <input type="text" placeholder="이름을 입력하세요." v-model="name" @keyup.enter="submit">
</div>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                name:"",
            }
        },
        methods:{
            submit(){
                alert(this.name);
            }
        }
    })
</script>

 

 

 

 

3. form 수식어

 

수식어	설명
.lazy	change 이벤트(enter치거나 focus가 사라질 때) 이후에 동기화
.number	사용자의 입력(문자열)이 숫자 형식이면 숫자로 형 변환
.trim	사용자의 입력 앞, 뒤로 공백을 제거 (중간은 X)

 

 

예시)

<input v-model.trim="msg">