뷰(Vue 2) 기초 익히기 2일차

4. 이벤트

참고

https://v2.ko.vuejs.org/v2/guide/events.html

이벤트 핸들링 — Vue.js

일반적으로 JavaScript에서 이벤트를 할 때, html 태그에다가 onclick를 쓸 수 있는데

Vue 에서는 V-on: 라는 키워드를 쓴다.

 

예제1) 더하기, 빼기 이벤트

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

 

v 이벤트로 더하기/ 뺴기 적용하기

 

 

 

예제2) form 태그 이벤트 제작

<div id="app">
      <form v-on:submit="submit">
        <input type="text" /><br />
        <button type="submit">Submit</button>
      </form>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          year: 2023,
        },
        methods: {
          puls() {
            this.year++;
          },
          minus() {
            this.year--;
          },
          submit() {
            alert("sumbitted");
            console.log("hello");
          },
        },
      });

이벤트 수식어

 

이벤트 핸들링 

https://v2.ko.vuejs.org/v2/guide/events.html

이벤트 핸들링 — Vue.js

 

5. 데이터 양방향 바인(Data Two Way Binding)

<div id="app">
      <form v-on:submit="submit">
        <input type="text" :value="text" @keyup="updataText" /><br />
        {{ text }} <br />
        <button type="submit">Submit</button>
      </form>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          year: 2023,
          text: "text",
        },
        methods: {
          puls() {
            this.year++;
          },
          minus() {
            this.year--;
          },
          submit() {
            alert("sumbitted");
            console.log("hello");
          },
          updataText(event) {
            this.text = event.target.value;
          },
        },
      });

input에다가 값을 적으면 그 값이 실시간으로 나온다

 

 

데이터 양방향으로 할 경우에는 v-model를 쓰면 된다.

 

<div id="app">
      <form v-on:submit="submit">
        <!-- <input type="text" :value="text" @keyup="updataText" /><br /> -->
        <input type="text" v-model="text" /> <br />
        {{ text }} <br />
        <button type="submit">Submit</button>
      </form>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          year: 2023,
          text: "text",
        },
        methods: {
          puls() {
            this.year++;
          },
          minus() {
            this.year--;
          },
          submit() {
            alert("sumbitted");
            console.log("hello");
          },
          // updataText(event) {
          //   this.text = event.target.value;
          // },
        },
      });
    </script>

 

데이터 양방향 바인딩

 

06 ) Computed 속성

너무 많은 연산을 이용을 하거나 복잡한 로직이면 Computed를 이용을 합니다.

 

 

참고

https://v2.ko.vuejs.org/v2/guide/computed.html

computed와 watch — Vue.js

 

 <div id="app">
      {{ reversdMessage }} {{ reversdMessage }} {{ reversdMessage }}
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "안녕하세요",
        },
        methods: {},
        computed: {
          reversdMessage() {
            return this.message.split("").reverse().join("");
          },
        },
      });
    </script>

computed를 사용을 할 때에는 데이터를 불러 오는 것처럼 {{ 함수명  }} 으로 쓰면 된다.

 

 

<div id="app">
      <button v-on:click="changeMessage">Click</button>
      {{ reversedMessage }} {{ reversedMessage }} {{ reversedMessage }}
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "헬로우",
        },
        methods: {
          changeMessage() {
            return (this.message = "코지코더");
          },
        },
        computed: {
          reversedMessage() {
            return this.message.split("").reverse().join("");
          },
        },
      });
    </script>

클릭 이벤트로 message 값 변경

 

클릭을 하면 메소드 안에 있는 changeMessage 값이 한 번 바뀌고

computed 안에 있는 reversedMessage 함수도 실행이 된다.