TIL. Vue.js[v-on, v-bind, method]

kihyeon8949·2020년 3월 24일
0

Vue.js

목록 보기
1/3
  • Vue.js

method

 <body>
    <div id="app">
      {{nextYear("Hi")}}
      <input v-bind:type="type" v-bind:value="inputData" />
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          person: {
            name: '로지 코더',
            age: 34
          },
          inputData: 'hello',
          type: 'number'
        },
        methods: {
          nextYear(greeting) {
            return (
              greeting +
              '!' +
              this.person.name +
              '내년에 ' +
              (this.person.age + 1) +
              '살 입니다.'
            );
          },
          otherMethod() {
            this.nextYear();
          }
        }
      });
    </script>
  </body>
        "greeting"은 매개변수 = 파라미터
        위의 "안냐세요"는 인자 = argument

methods: {} 안에서 method를 생성할 수 있고 this. 을 통해 data:{} 에서 정의한 값이나, method를 참조할 수 있다.

data binding

v-bind:

<div id="app">
      {{nextYear("Hi")}}
      <input v-bind:type="type" v-bind:value="inputData" />
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          person: {
            name: '로지 코더',
            age: 34
          },
          inputData: 'hello',
          type: 'number'
        },...

bind는 묶는다는 뜻. (html 태그의 속성 대부분은 vinding이 가능하다.)
data의 값들을 태그에 적용하고 싶다면 "v-bind: "를 통해서 쓸 수 있다.

혹은,

<div id="app">
      {{nextYear("Hi")}}
      <input :type="type" :value="inputData" />
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          person: {
            name: '로지 코더',
            age: 34
          },
          inputData: 'hello',
          type: 'number'
        },...

이와같이 :(콜론) 만 써도된다.

이벤트

리액트에서는 이벤트를 줄 때,

<button onClick = {this.method}>Click me</button>

on~을 통해서 이벤트를 부여하였다.

vue.js에서는

v-on:

이라는 것을 이용하여

  <body>
    <div id="app">
      <button v-on:click="alert">Click Me</button>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {

        },
        methods: {
          alert() {
            alert('hi ki!');
          }
        }
      });
    </script>
  </body>

위와 같이 v-on: 뒤에 이벤트를 설정하고 (여기서는 click) "="과 함께 실행할 메소드의 이름을 적어준다.
이때, 메소드는 < script > 안의 method 안에 정의한다.

ex) data에 이벤트 적용

<body>
    <div id="app">
      {{year}}</br>
      <button v-on:click="plus">더하기</button>
      <button v-on:click="minus">빼기</button>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: { year: 2018 },
        methods: {
          plus() {
            this.year++;
          },
          minus() {
            this.year--;
          }
        }
      });
    </script>
  </body>

각 각의 버튼에 이벤트를 적용하여 "yaer" 을 변화시킨다.

그 외의 다른 이벤트 핸들링에 대해서는 공식문서에 잘 나와있다.
(vue.js 공식문서)

profile
함께 일하고 싶은 개발자를 목표로 매일을 노력하고, 옷을 좋아하는 권기현 입니다.

0개의 댓글