[Vue.js] Vue.js 입문 (1) ; 기본 구문

먼저 Vue.js 자체의 기본적인 구문을 정리해보도록 하겠다.

Vue 인스턴스

Vue 인스턴스의 작성법은 아래와 같다.

//app.js
new Vue({
    el: "#app",
    data: {
        name: "Kei",
        age: "30",
        counter: 0
    },
    methods: {
        increase: function() {
        this.counter += 1;
    }
  }
})

이 app.js를 Vue.js와 함께 임포트한다.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="app.js"></script>

{{ }}

{{ }} 로Vue인스턴스의 요소를 호출할 수 있다.

<p>{{ name }}</p>

v-bind

HTML요소를 Vue.js에 동적으로 지정하고 싶은 경우에 v-bind를 사용한다.

<a v-bind:href="link">Google</a>

v-once

v-once 를 HTML 태그에 포함하여 1번 그려진 요소의 내용이 변경되지 않도록 할 수 있다.

<h1 v-once>{{ title }}</h1>

v-html

v-html 는 HTML태그 그대로 출력할때 이용한다.

<p v-html="finishedLink"></p>

v-on

v-on 로 이벤트 리슨을 할 수 있다.

<button v-on:click="increase(2, $event)">Click me</button>
app.js
new Vue({
  methods: {
    increase: function(step, event) {
      this.counter += step;
    }
  }
})

v-on:click=“counter++ 과 같이 if 나 loop 를 포함하지 않는 JS의 경우에는 인라인으로 쓴다.
또한 v-on:keyup.enter.space 와 같이 연결할 수 있다.

v-model

v-model 을 사용하면 Vue인스턴스의 data 를 HTML요소에 바인드할 수 있다. 값이 변경된 경우에는 그 값을 참조하고 있는 모든 DOM요소에 반영된다.

<input type="text" v-model="name">
<p>{{ name }}</p>
<!-- 入力値によって動的に name が変わる -->
app.js
new Vue ({
  el: "#app",
  data: {
    name: "Kei"
  }
})

@

v-on: 의 생략기법으로 @click="link" 과 같이 쓸 수 있다.
또한 v-bind 대신에 : 를 사용할 수 있다.

:class

:class="{YOUR_CLASS: boolean}"로 동적 CSS를 적용할 수 있다.

<div 
    class="demo" 
    @click="attachedRed = !attachedRed"
    :class="{red: attachedRed}"></div>

:class 를 복수정의하는 경우는 array 를 쓴다.

:style

:class 와 마찬가지로 :style 로 동적 스타일을 적용할 수 있다.

<div :style="{backgroundColor: color}"></div>

스타일 프로퍼티명은 카멜케이스 (혹은 "")으로 쓴다.

computed

Vue인스턴스 computed 객체는 methods 와 비슷하지만 data 프로퍼티와 같이 처리 결과를 유지하도록 할 때 사용한다. methods와 달리 호출시에 () 는 쓰지 않아도 된다.

new Vue ({
  computed: {
    divClassses: function() {
      return {
        red:  this.attachedRed,
        blue: !this.attachedRed 
      }
    }
  }
})

watch

Vue인스턴스의 watch 객체는 특정 프로퍼티의 변화가 트리거로 작용되도록 할 때에 사용한다. data 뿐만 아니라 computed의 프로퍼티도 watch 할 수 있다.

new Vue ({
  watch: {
    // counter 를 watch 한다.
    counter: function(value) {
      var vm = this;
      setTimeout(function() {
        vm.counter = 0;
      }, 2000); 
    })
  }
})

v-if, v-else

v-if 가 false일 때는 해당 HTML요소와 그 자식 요소를 DOM으로 부터 제거한다.
v-else 는 직전의 v-if 가 false 일때, 해당 HTML요소와 그 자식 요소를 DOM에 표시되도록 한다.

<p v-if="boolean">Hello!</p>
<p v-else>Hello again!</p>

v-else-if 로도 쓸 수 있다：

https://vuejs.org/v2/guide/conditional.html#v-else-if

v-show

v-show 는 v-if 와 같은 동작을 하지만, false 의 경우 display: none; 이 되어 HTML코드 자체는 남게된다.

v-for

v-for 로 배열등 프로퍼티의 이터레이션(반복자)을 쓸 수 있다.

<!-- ingredients: ["meat", "fruit", "cookies"] -->
<ul>
　　<li v-for="ingredient in ingredients">{{ ingredient }}</li>
</ul>

index 를 얻고 싶은 때는 다음과 같이 두 번째 인수를 정의해두면 된다.

<li v-for="(ingredient, i) in ingredients">{{ ingredient }}</li>

Object도 마찬가지로 v-for 을 쓸 수 있다.
Objetct의 경우 두 번째 인수가 key, 세 번째 인수가 index 가 된다.

<li v-for="person in persons">
  <div v-for="(value, key, index) in person">
    {{ key }}: {{ value }} ({{ index }})
  </div>
</li>

v-for 이나 v-if 안에서 변경된 데이터를 Vue.js 가 인식하도록 하고 싶은 경우는 의도대로 작동하도록 v-key=“유니크한 값” 을 붙인다.

<li v-for="ingredient in ingredients" :key="ingredient"></li>

라이프 사이클

Vue인스턴스의 라이프 사이클은 다음과 같다.

・beforeCreate
・Created
・beforeMount
・mounted
・(DOM 그리기)
・(DOM 의 변경을 검지)
・beforeUpdate
・updated
・( this.$destroy(); )
・beforeDestroy
・Destroyed

---

참고자료

qiita.com/kskinaba/items/3e8887d45b11f9132012