[Vue.js] 유용한 팁(백견불여일타 Vue.js 입문)

1. 입력한 후 "Enter" 키를 누르거나 포커스를 다른 곳으로 이동할 때 한 번에 출력. 데이터 바인딩을 하면 입력값이 실시간으로 출력된다. lazy 기능을 이용하면 "Enter"키를 입력할 때 출력되게 한다.

<input v-model.lazy = "myText">

 

2. splice를 이용한 요소 추가, 변경, 삭제.

data: {
	myArray: ['첫번째', '두번째', '세번째', '네번째', '다섯번째']
},
methods: {
    addLast: function(){
        this.myArray.push("[맨 뒤에 추가]");
    },
    addObj: function(){
    	this.myArray.splice(index, 0, "[추가]");
    },
    changeObj: function(){
    	this.myArray.splice(index, 1, "[변경]");
    },
    deleteObj: function(){
    	this.myArray.splice(index, 1);
    }
}

 

3. <input type="text">에서 문자 입력 시 배열에서 그 문자를 포함한 요소를 반환. 검색 기능 구현 시 유용하기 사용할 수 있겠다.

data: {
	findWord: '',
    items: ['돈가스', '짜장면', '비빔밥', '볶음밥', '카레밥']
},
computed: {
	// this.findWord가 변하면 배열에서 그 문자가 포함된 요소를 계산하여 반환.
    findItems: function() {
        if (this.findWord) {
            return this.items.filter(function(value) {
                return (value.indexOf(this.findWord) > -1);
            }, this);
        } else {
            return this.items;
        }
    }
}

 

이상의 내용은 아래의 책을 보다가 유용해 보여서-몇 가지만-정리한 것이다. 현재 Vue.js를 이용해 팀 프로젝트를 진행 중이라 찾아보게 된 책이다. Vue.js의 주요 기능을 응용 가능한 팁과 함께 잘 소개해 주고 있다.

http://book.naver.com/bookdb/book_detail.naver?bid=16355822

백견불여일타 Vue.js 입문