[Vue.js] Vue.js 기본 문법 정리

• .은 class (class는 여러개 존재 가능)
  • vue에서는 class로 적용해도 하나만 적용돼, id속성을 주로 사용함.
• #은 id (id는 전체에서 하나만 존내)

  new Vue({
    el: '#some-element',
    // 옵션
  })

• v-html은 문자열 형태의 html을 브라우저가 html로 처리하게끔 해

  <h3 v-html='htmlString'></h3>

• v-bind로 속성 세팅

  <img v-bind:src="a4" v-bind:height="a5" v-bind:width="a6"/>

• v-model을 사용하면 input으로부터 data에 값을 넣을 수 있음.

  <div id="test1">
          input1: <input type='text' v-model='a1'/><br/>
          input2: <input type='text' v-model='a2'/><br/>
          <h1>{{a1}}</h1>
          <h1>{{a2}}</h1>
  </div>

• component는 최상위 태그로 감싸져 있어야한다.

  <div id="example">
      <my-component></my-component>
  </div>

• component는 뷰 객체 안에서만 사용 가능
• v-bind:is를 사용하면 v-bind:is에 할당된 값에따라 동적으로 컴포넌트 바인딩 가능

  <component v-bind:is='view1'></component>

• 관리하는 data 속성의 변수가 변경이 되면 watch 함수가 실행됨.

  // ...
    data(){
      return {
        message: '안녕하세요',
        reversedMessage: ''
      }
    },
    watch: {
      message: function (newVal, oldVal) {
        this.reversedMessage = newVal.split('').reverse().join('')
      }
    }
  }
  // ...

• 반환 값이 data 속성이고, 반환값이 똑같다면 로직을 수행하지 않고 결과 값을 반환함.
  • computed의 get과 se을 사용하면 데이터를 가져오거나 넣어줄때 지정한 로직을 수행할 수 있게 해줌.

    // ...
    computed: {
      fullName: {
        // getter
        get() {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set(newValue) {
          const names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
    // ...

• 태그안에 속성 값을 data 값으로 세팅하려면 v-bind를 사용해야함.

• 조건이 참일 때만 html태그를 렌더링

  <h3 v-if='a1 == 100'>a1은 100입니다.</h3>

<li v-for='a1 in array1'>
    {{a1}}
</li>

• 애니메이션 효과 css를 태그에 적용할 수 있게 해줌.
• transtion 태그에 지정한 name으로 class가 생성됨.
  • {name}-enter -> {name}-enter-to로 이동
  • {name}-leave -> {name}-leave-to로 이동
  • {name}-enter-active, {name}-leave-active