[VueJS] v-model, v-once

v-model (양방향 데이터 바인딩)

양방향 데이터 바인딩으로 주로 폼과 입력을 다룰 때 사용한다.

모델이 업데이트되면서 뷰가 업데이트되고, 뷰가 업데이트되면서 모델이 업데이트될 때 작동한다.

이로 인해 애플리케이션 모델의 데이터가 UI와 항상 동기화 할 수 있다.

<div id="app-6">
    <p>{{message}}</p>
    <input type="text" v-model="message">
    <!-- input text 박스안에 문자 입력시 {{message}} 에 바로바로 출력이됨. -->
</div>

<script type="text/javascript">
var app6 = new Vue({
    el: '#app-6',
    data: {
        message: '안녕하세요 Vue!!!'
    }
})	
</script>

input 창에 데이터를 입력해보면 v-model로 message가 바인딩되어 있어서 바로바로 입력한 값이 나온다.

입력할 때마다 변경되는 것 말고 다 입력한 후에 변경하고 싶으면 수식어로 ".lazy"라는 걸 사용할 수 있다.

<div id="app-6">
    <p>{{message}}</p>
    <input type="text" v-model.lazy="message">
    <!-- input text 박스안에 문자 입력시 {{message}} 에 바로바로 출력이됨. -->
</div>

<script type="text/javascript">
var app6 = new Vue({
    el: '#app-6',
    data: {
        message: '안녕하세요 Vue!!!'
    }
})	
</script>

이렇게 하면 모두 입력 후 포커스가 input 창에서 벗어나면 그때 변경된다.

 

v-once (단방향 데이터 바인딩)

하나의 요소나 컴포넌트를 딱 한 번만 렌더링 한다.

렌더링을 한 이후에 추가적으로 값이 변경된다던지 등 다른 이유로 다시 렌더링 하는 상황이 발생할 때

이미 만들어진 요소나 컴포넌트의 정적인 콘텐츠로 인식하여 건너 띈다.

<div class="col-sm-12" id="app">
    <h1 v-once>{{ title }}</h1>
    <p>{{ sayHello() }}</p>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        title: 'v-once '
    },
    methods: {
        sayHello: function() {
            this.title = "hello!!!";
            return this.title;
        }
    }
});
<script>

결과

이런 식으로 최초 v-once라고 쓰고 메서드에서 title 값을 바꿔도 v-once로 해놨기 때문에 바뀌지 않는다.

v-once를 지우면 둘 다 바뀐 hellow!!! 가 찍힘