[Vuejs] Vue Instance 속성

- Vue filter

: {{ }} 또는 v-bind 속성에 사용 가능.

 

<div id="app">
        <div>
            <input type="text" v-model="msg">
        </div>
        <div>
            <h2>결과 :</h2>
            <h3>{{ msg | count1 }}</h3>
            <h3>{{ msg | count2('문자를 넣어보세요') }}</h3>
        </div>
    </div>
    
    <script>
        Vue.filter(
                    // val 에 msg 값이 들어옴
            'count1', (val) => {    // global한 값. 
                if (val.length == 0) {
                    return;
                }
                return `${val} : ${val.length}자`;
            }
        );
        new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            filters: { // val에 msg 들어옴. alternative에는 '문자를 넣어보세요' 가 들어감
                count2(val, alternative) {
                    if (val.length == 0) {
                        return alternative;
                    }
                    return `${val} : ${val.length}자`;
                }
            }
        })
    </script>

 

---

- Vue computed

• 특정 데이터의 변경사항을 실시간으로 처리
• 캐싱을 이용하여 데이터 변경이 없을 경우 캐싱된 데이터를 반환
• Setter와 Getter를 직접 지정할 수 있음
• 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property 처럼 사용

<div id="app">
  <input type="text" v-model="message" />
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지1: "{{ reversedMsg }}"</p> <!--computed 로 쓰면 () 없이 변수처럼 쓸 수 있음!! -->
  <p>역순으로 표시한 메시지2: "{{ reversedMsg }}"</p> <!--여기서 함수를 또 호출한 게 아니고 캐싱된 결과를 찍는다.-->
  <p>역순으로 표시한 메시지3: "{{ reversedMsg }}"</p> <!--console에 찍힌 거 보면 한 번만 찍혀있다 -->
  <!--computed 는 함수 내부 값이 바뀔 때만 다시 호출한다!! -->
</div>

<script>
      var vm = new Vue({
        el: '#app',
        data: {
          message: '안녕하세요',
        },
        computed: {
          reversedMsg: function () {
            console.log('거꾸로 찍기');
            return this.message.split('').reverse().join('');
          },
        },
      });
    </script>

<div id="app">
  <input type="text" v-model="message" />
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지1: "{{ reversedMsg() }}"</p>
  <p>역순으로 표시한 메시지2: "{{ reversedMsg() }}"</p>
  <p>역순으로 표시한 메시지3: "{{ reversedMsg() }}"</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
    message: '안녕하세요',
    },
    methods: {
      reversedMsg: function () {
        console.log('거꾸로 찍기');
        return this.message.split('').reverse().join('');
      },
     },
  });
</script>

computed는 {{ reversedMsg }} 로 호출, methods는 {{ reversedMsg() }} 로 호출!!

 

---

- Vue event

: v-on !!

    <div id="app">
      <button v-on:click="greet">Greet</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          name: 'yjyjyj',
        },
        methods: {
          greet: function (event) {
            // this : Vue instance
            alert('Hello ' + this.name + '!');
            console.dir(event.target);  // target이 button
          },
        },
      });

    </script>

    <div id="app">
      <button v-on:click="greet1('yujeong')">Greet</button>
      <button v-on:click="greet2($event, 'yujeong')">Greet</button> <!-- 이 때 발생한 이벤트 객체를 $event로 넘겨줌... 근데 윗 줄처럼 쓰지 이렇게 쓸 일 없다. -->
    </div>
    <script>
      new Vue({
        el: '#app',
        methods: {
          greet1: function (msg) {  // msg에 yujeong 들어간다
            alert('Hello ' + msg + '!');
            console.log(event);
            console.dir(event.target);  // 윈도우 프로퍼티에 할당된 event를 들고온다... 여기서 windows.event 랑 event 랑 같음..
          },
          greet2: function (e, msg) {
            if (e) e.preventDefault();
            alert('Hello ' + msg + '!');
            console.dir(e.target);
          },
        },
      });
    </script>

 

• 위 예제에서 event.preventDefault() 대신 v-on 디렉티브에 수식어를 붙여서 사용할 수도 있다.

 

• v-on 대신 "@" 사용가능하다.

    <div id="app">
      <h2>페이지 이동</h2>
                      <!-- v-on: 을  @로 표현할 수 있음 -->
      <a href="test29.html" @click="sendMsg1">페이지 이동 막기1</a><br />
      <a href="test29.html" @click="sendMsg2">페이지 이동 막기2</a><br />
      <a href="test29.html" @click.prevent="sendMsg1">페이지 이동 막기3</a><br />
    </div>
    <script>
      new Vue({
        el: '#app',
        methods: {
          sendMsg1() {
            alert('이동할까요?');
          },
          sendMsg2(e) { // e에는 현재 발생한 이벤트 정보가 들어간다.
            e.preventDefault(); // 기본으로 할당되어 있는 이벤트를 막겠다! -> a 링크 기능이 중단됨~!
            alert('이동막기');
          },
        },
      });
    </script>

 

• 키 수식어

v-on에 대한 키 수식어 추가할 수 있다.

<input v-on:keyup.enter="submit">

 

키 종류들

.enter  =  .13 .tab .delete -> delete 키와 backspace 키 둘 다 .esc .space .up .down .left .right

    <div id="app">
      아이디 :
      <input placeholder="검색할 아이디를 입력하세요" v-model="id" @keyup="sendId" />
      <input placeholder="검색할 아이디를 입력하세요" v-model="id" @keyup.13="sendId" /> <!--키보드 엔터값이 13이다!!!! -->
      <input placeholder="검색할 아이디를 입력하세요" v-model="id" @keyup.enter="sendId" /> <!--enter 치면 검색되게 -->
      <button @click="sendId">검색</button>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          id: '',
        },
        methods: {
          sendId() {
            alert(this.id);
          },
        },
      });
    </script>

위처럼 표현할 수도 있다.

---

- ref, $refs

• $refs를 통해 DOM에 접근할 수 있다.
• 뷰의 가장 중요한 목적 중 하나는 개발자가 DOM을 다루지 않게 하는 것이므로, 되도록 ref를 사용하지 않는 것이 좋다.

    <div id="app">
      <h2>엘리먼트 참조하기</h2>
      <!-- 아이디 : <input type="text" v-model="id"> -->
      아이디 : <input type="text" v-model="id" ref="id" />
      <button @click="search">아이디 중복 체크</button>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          id: '',
        },
        methods: {
          search() {
            if (this.id.length == 0) {
              alert('아이디를 입력하세요!!');
              this.$refs.id.focus();
              console.dir(this.$refs.id);
              return;
            }
            console.log(this.$refs.id.value);
            alert('아이디 중복체크 성공');
          },
        },
      });
    </script>

태그에는 ref로 이름주고, script 안에서 this.$refs.이름 으로 접근

---

- class binding

• element의 class와 style을 변경
• v-bind:class는 조건을 따라 class를 적용할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .active {
        background: rgb(106, 148, 238);
        color: white;
      }

      div {
        width: 200px;
        height: 200px;
        border: 1px solid #444;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="{ active: isActive }">VueCSS적용</div>
      <button v-on:click="toggle">VueCSS</button>
    </div>
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          isActive: false,
        },
        methods: {
          toggle: function () {
            this.isActive = !this.isActive;
          },
        },
      });
    </script>
  </body>
</html>

{  클래스명: true | false  }

으로 클래스가 적용되거나 적용되지 않게 할 수 있다.

 

 

    <div id="app">
      <ul>                  <!-- ↓ 단방향 bind -->
        <li :class="{completed: todo.done}" :style="myStyle" v-for="todo in todos">
          {{todo.msg}}
          <button @click="complete(todo)" class="btn">완료</button>
        </li>
      </ul>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          todos: [
            {
              msg: '5시간 잠자기',
              done: false,
            },
            {
              msg: '알고리즘 1시간 공부하기',
              done: false,
            },
            {
              msg: 'Vue 1시간 공부하기',
              done: false,
            },
          ],
          myStyle: {
            fontSize: '20px',
          },
        },
        methods: {
          complete: function (todo) {
            todo.done = !todo.done;
          },
        },
      });
    </script>

위의 예시를 보면

:class 안에서 true | false 줘서 클래스 적용했다가 풀었다가 함.

 

:style 로 vue 인스턴스의 data로 적용할 수도 있다.

---

- 폼 입력 바인딩

: v-model 로 양방향 데이터 바인딩 가능

• text와 textarea는 value 속성과 input 이벤트 사용
• 체크박스와 라디오버튼은 checked 속성과 change 이벤트 사용
  • input 태그 value 안 주면 check 된 상태는 vue 인스턴스 데이터에 true로 들어감
• select 태그는 value를 prop으로, change를 이벤트로 사용한다.

예시 코드들

1)

    <div id="app">
      <div>
        아이디 :
        <input v-model="id" placeholder="아이디를 입력하세요" />
        <!-- .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다. -->
        <input v-model.lazy="id" placeholder="아이디를 입력하세요" /> <!-- 값 변경이 되어도 바로바로 반영 안 됨 -->
      </div>
      <div>
        메세지 :
        <textarea v-model="message" placeholder="내용을 입력하세요"></textarea>
      </div>
      <p>{{ id }} 님에게 보내는 메세지 : {{ message }}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          id: '',
          message: '',
        },
      });
    </script>

v-model.lazy -> input 영역에서 focus out 해야 바인딩 됨!

 

2)

    <div id="app">
      <div>과일 선택</div>
      <input type="checkbox" id="apple" value="사과" v-model="checkedAreas" />
      <label for="apple">사과</label>
      <input type="checkbox" id="grape" value="포도" v-model="checkedAreas" />
      <label for="grape">포도</label>
      <input type="checkbox" id="water" value="수박" v-model="checkedAreas" />
      <label for="water">수박</label>
      <input type="checkbox" id="straw" value="딸기" v-model="checkedAreas" />
      <label for="straw">딸기</label>
      <br />
      <span>체크한 이름: {{ checkedAreas }}</span>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          checkedAreas: [],
        },
      });
    </script>

체크를 수박, 딸기에 했다면 checkedAreas에 수박, 딸기가 들어감

 

3)

    <div id="app">
      <div>
        <p>과일 선택</p>
        <select v-model="selectedFruit">
          <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
        </select>
      </div>
      <span>선택한 과일 : {{ selectedFruit }}</span>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          selectedFruit: '',
          options: [
            { text: '사과', value: 'apple' },
            { text: '포도', value: 'grape' },
            { text: '수박', value: 'watermelon' },
            { text: '딸기', value: 'strawberry' },
          ],
        },
      });
    </script>

v-for을 이용하여 동적 option 렌더링 가능

 

---

- form 수식어

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

<input v-model.number="age" type="number">

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