[Vue.js] Vue.js란 (3) - Vue 문법

디렉티브

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

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

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

{{ }} 내부에 자바스크립트 표현식의 모든 기능 지원합니다. (하나의 단일 표현식만 가능)

v- 접두사 사용

접두사는 Vue 고유의 특성을 식별하기 위한 시각적 역할을 합니다. 렌더링 된 DOM에 특수한 반응형 동작을 주기위해 사용합니다.
태그에 속성을 지정하는 방식으로 v-on v-model v-for v-bind v-if v-cloak 등을 사용할 수 있습니다.

수식어

수식어는 .으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다.

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

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

 </form>  

 

---

 

v-cloak

일시적으로 화면 초기에 컴파일되지 않은 템플릿이 나타날 수 있습니다. 이런 경우에 사용하는 것이 v-cloak입니다.

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

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

---

 

watch와 computed

하나의 데이터를 기반으로 다른 데이터를 변경할 필요가 있을 때 사용합니다.
주로 긴 처리 시간이 필요한 비동기 처리에 적합하다는 특징을 가지고 있습니다.

watch를 이용한 예제

<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를 이용한 예제

<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>

 

 

 

 

 

---

[참조]

https://wikidocs.net/17710

4. Vue 문법

https://coding-start.tistory.com/214?category=811388 

Front-End - Vue.js 인스턴스(Vue 인스턴스)

https://www.bottlehs.com/vue/vue-js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-&-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%86%8C%EA%B0%9C/

Vue JS 인스턴스 & 컴포넌트 소개