반응형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
// 엔터를 입력하면 콘솔 로그로 해당하는 메시지를 보내는 방법 v-on:keyup.enter
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" @keyup.enter ="submit" v-model="name">
        </div>
 
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    name:''
                },
                methods:{
                    submit:function(){
                        console.log("submit 완료!" + this.name);
                        this.name = '';
                    }
                }
            })
        </script>
    </body>
</html>
cs


@keyup.enter 혹은 v-on:keyup.enter로 키보드를 눌렀다가 뗄 때 함수를 콜 할 수 있도록 해준다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
 
// 여러 키보드 및 마우스 이벤트를 제어 하는 방법
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id="app" @click.right.prevent = "clickMouseRight" @click.alt = "clickAlt">
            <p> space키를 누르면 생성될 매크로 입력 </p>
            <input type="text" v-model = "spaceVal">
            
            <br>
 
            <p> 메시지 입력 </p>
            <input type="text" @keyup.enter ="clickEnter" @keydown.tab = "clickTab" @keydown.esc = "clickEsc" @keyup.space = "clickSpace" @click.left = "clickMouseLeft" v-model="value">
        </div>
 
        <p id="chat"></p>
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    value:'',
                    spaceVal: '',
                },
                methods:{
                    clickEnter:function(){
                        if(this.value == '')
                            return;
                        console.log("submit 완료!" + this.value);
                        document.querySelector("#chat").innerHTML += this.value + '<br>';
                        this.value = '';
                    },
 
                    clickTab:function(){
                        console.log("탭키를 누르면 abc가 매크로 처럼 입력됩니다.");
                        this.value += "abc";
                    },
 
                    clickEsc:function(){
                        console.log("Esc버튼을 누르면 초기화 됩니다.");
                        this.value = "";
                        document.querySelector("#chat").innerHTML = '';
                    },
 
                    clickSpace:function(){
                        console.log("Space버튼을 누르면 자신이 지정한 값이 매크로로 들어갑니다.");
                        this.value += this.spaceVal;
                    },
 
                    clickMouseLeft:function(){
                        if(this.value == '')
                            return;
                        console.log("마우스 왼쪽 버튼을 눌렀을 때 자동 제출");
                        document.querySelector("#chat").innerHTML += this.value + '<br>';
                        this.value = '';
                    },
 
                    clickMouseRight:function(){
                        console.log("마우스 오른쪽 버튼은 클릭이 금지됩니다.");
                        alert("마우스 오른쪽 버튼 제한");
                        return;
                    },
                    
                    clickAlt:function(){
                        console.log("alt키를 누르면 페이지 이동이 됩니다.");
                        
                        location.href = "http://www.crocus.co.kr";
                    }
                }
            })
        </script>
    </body>
</html>
 
cs


@keyup.enter ="clickEnter" 

엔터를 눌렀다 뗄 때 반응하는 동작이다.


@keydown.tab = "clickTab" 

탭을 눌렀을 때 반응하는 동작이다.


@keydown.esc = "clickEsc" 

esc를 눌렀을 때 반응하는 동작이다.


@keyup.space = "clickSpace" 

스페이스바를 눌렀을 때 반응하는 동작이다.


@click.left = "clickMouseLeft"

왼쪽 마우스 버튼을 누르면 반응하는 동작이다.


@click.right.prevent = "clickMouseRight" 

오른쪽 키를 금지시키며 오른쪽 마우스버튼을 누르면 나타나는 동작이다.


@click.alt = "clickAlt"

알트키를 누르면 반응하는 동작이다.


이제 이를 통해 keydown 혹은 click.right 등등을 이용하여 여러 가지 이벤트를 만들어보자.








반응형
저작자표시 비영리 변경금지

'Basic > VueJS' 카테고리의 다른 글

[VueJS] 할일 리스트 구현  (4) 2018.08.02
[VueJS] Event bus를 이용한 컴포넌트 통신  (0) 2018.08.01
[VueJS] v-on 디렉티브를 이용한 다양한 기능 사용하기  (0) 2018.07.26
[VueJS] vue에서의 css 관리(v-bind)  (0) 2018.07.24
[VueJS] computed, watch 속성  (0) 2018.07.22

티스토리툴바