[Vue] vue.js 문법

1. 데이터 바인딩의 가장 기본적인 형태는 이중괄호{{  }}를 사용

<div id="app">{{ msg }}</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello world'
  }
});
</script>

 

2. v- 접두사 사용

 : 렌더링 된 DOM에 특수한 반응형 동작을 주기위해 사용

        ex) v-on v-model v-for v-if c-cloak ... 

 <form v-on:submit.prevent="onSubmit">

 // .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록
 // v-on 디렉티브에게 알려줍니다.

 </form>

<style>
[v-cloak] {display : none;}
</style>

<div id="example" v-cloak>
...
</div>

<div id="app-2">
  <span v-bind:title="message">
    이 문구에 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

 

3. 조건문

<div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

 app3.seen = false로 셋팅시 문구가 사라지는 효과를 볼 수 있음.

 

4. 반복문

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Vue.js 첫번째문장' },
      { text: '두번째 문장' },
      { text: '마지막 문장 노출' }
    ]
  }
})

app4.todos.push({ text: 'New item' })를 통하면 Todo에 새항목이 동적의 추가 되는 것을 확인 가능하다.

5. watch 와 computed

 : 하나의 데이터를 기반으로 다른 데이터를 변경할 필요가 있을 때 사용하며, 주로 긴 처리 시간이 필요한 비동기 처리에 적합하다.

 

watch ex.

<div id="example">
    x : <input type='text' v-model="x" /><br />
    y : <input type='text' v-model="y" /><br />
    덧셈 결과 : {{sum}}
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#example",
    data : { x:0, y:0, sum:0 },
    watch : {
        x : function(v) {
            console.log('## x 변경')
            var result = Number(v) + Number(this.y);
            if (isNaN(result)) this.sum = 0;
            else this.sum = result;
        },
        y : function(v) {
            console.log('## y 변경')
            var result = Number(this.x) + Number(v);
            if (isNaN(result)) this.sum = 0;
            else this.sum = result;
        }
    }
})
</script>

computed ex.

<div id="example">
    x : <input type='text' v-model="x" /><br />
    y : <input type='text' v-model="y" /><br />
    덧셈 결과 : {{sum}}
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#example",
    data : { x:0, y:0 },

    computed : {
        sum : function() {
            var result = Number(this.x) + Number(this.y);
            if (isNaN(result)) return  0;
            else return result;
        }
    }
})
</script>