Vue 기초 문법

vue객체 자체에 html 태그를 할당

 

el:

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

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

 

 

Template

• 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

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

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

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

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

 

 

Watch

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

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

 

 

Computed

반환 값이 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]
    }
  }
}
// ...

 

Attribute Binding

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

 

 

v-if

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

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

 

 

v-for

<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