Vue.js

[Vue.js] Vue.js 시작하기 - 3 [ 사용자 입력 핸들링 ]

리트리버J

·

2020. 12. 29. 01:14

728x90

1. methods

Vue 인스턴스에서 함수를 정의하는 속성이다.

1-1. this

this를 통하여 자기 자신의 속성에 접근 할 수 있다.

this.message 를 통하여 data 속성 안의 message에 접근 하였다.

1-2. v-on 속성

v-on:이벤트명 를 사용하여 이벤트 리스너를 추가 할 수 있다.

v-on:click="methods 속성값"을 통해 클릭 이벤트를 추가해보자. 

※ DOM을 건드리지 않고 앱의 상태만을 업데이트한다고 한다.
split('')을 통해 String → String[]
reverse()을 통해 문자열 뒤집기
join('')을 통해 String[] → String
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">메시지 뒤집기</button>
    </div>
    <script>
        var app5 = new Vue({
        el: '#app-5',
        data: {
            message: '안녕하세요! Vue.js!'
        },
        methods: {
            reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
            }
        }
        })
    </script>  
</body>
</html>
 cs

클릭 후의 결과 : 문자열이 뒤집어졌다.

2. v-model 속성

입력 form과 앱 상태를 양방향으로 바인딩하는 속성이다!

v-on 속성은 Vue인스턴스를 건들지 않고 html태그 내부만 바꾸었다면,

v-model 속성은 Vue 인스턴스의 data값도 변경 시킬 수 있다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    <script>
        var app6 = new Vue({
        el: '#app-6',
        data: {
            message: '안녕하세요 Vue!'
        }
        })
    </script>  
</body>
</html>
 cs

form 태그 입력 전
form 태그 입력 후

728x90

'Vue.js' 카테고리의 다른 글

[Vue.js] Vue.js 시작하기 - 4 [ 컴포넌트를 사용한 작성방법 ]  (0) 2020.12.29
[Vue.js] Vue.js 시작하기 - 2 [ 조건문과 반복문 ]  (0) 2020.12.29
[Vue.js] Vue.js 시작하기 - 1 [ 선언적 렌더링 ]  (0) 2020.12.27
[Vue.js]Vue Cli를 이용하여 Vue.js 설치하기  (0) 2020.12.21

Vue.js 카테고리와 연관된 콘텐츠