jsp -> vueJs 전환 기록

많이 사용한 변환 몇가지만 정리.

JSTL -> Vuejs 문법. 이라고 보면 될 듯.

---

속성명에 변수 사용.

Jsp

<ul id="static_${value}">

Vue.js

<ul :id="'static_' + value">
<ul v-bind:id="'static_' + value">

둘 다 같은 의미

위에꺼가 약어인데 앞으로는 약어로 표현.

---

반복문1

Jsp

<c:forEach items="${list}" var="item">
    <li itemNo="${item.itemNo}">${item.itemName}</li>
</c:forEach>

Vue.js

<li v-for = "item in list" :itemNo="item.itemNo">{{item.itemName}}</li>

v-for 사용

속성에서는 위와 마찬가지로 v-bind 사용.

html 내부에서 변수 참조시 {{변수명}}.

---

반복문2

Jsp

<c:forEach begin="0" end="9" step="1" varStatus="varStatus">
    <c:choose>
        <c:when test="${status.index} < fn:length(array)}">
	    array 내부
        </c:when>
        <c:otherwise>
           array 외부 
        </c:otherwise>
    </c:choose>
</c:forEach>

Vue.js

<div v-for = "(n, status) in 10">
    <div v-if="index < array.length">
        array 내부
    </div>
    <div v-else>
        array 외부
    </div>
</div>

c:forEach -> v-for

c:choose -> 삭제

c:when -> v-if

c:otherwise -> v-else

fn:length(배열이름) -> 배열이름.length

---

클래스 이름 추가. 버튼 클릭 시 toggle

Jsp

<div class="menu">
    <button type="button" class="menu_btn">
        <span>열기</span>
    </button>
</div>

$('.menu_btn').on('click',function() {
    var text = $('.menu_btn span').text();
    $('.menu_btn span').text(text == "열기" ? "닫기" : "열기");
    $('.menu').toggleClass('on');
});

버튼이 하나 있고 버튼을 누르면 menu 클래스명이 menu on 으로 변경된다. (on이 추가된 경우 메뉴가 보이고 on이 없으면 안보이고 이런 구조)

메뉴가 보여져있는 경우는 버튼 text가 '닫기'이고 메뉴가 안보이고 있으면 '열기'이다.

Vue.js

export class className extends Vue {   
    // 생략
 
    // 추가
    private onMenu: boolean = false; 
    private mounted(): void {
        this.onMenu= false;
    }
}

vue 파일에서는 onMenu라는 변수만 추가.

<div :class="'menu'+[onMenu ? ' on' : '']">
    <button type="button" class="menu_btn" @click="onMenu = !onMenu">
        {{onMenu ? '닫기' : '열기' }}
    </button>
</div>

template에서 onMenu를 참고해서 onMenu인 경우 class 이름에 on을 붙여준다.

menu_btn 클릭시 이벤트핸들러 @click를 이용해서 onMenu를 토글시킨다.

menu 클래스 속성 내부에서 [ 조건 ? true인 경우 : false인 경우] -> 3항 조건식 쓸 수 있어서 좋음.

---

Vue.js는 가이드 사이트가 잘되어있어서 이것만 봐도 웬만한거는 할 수 있을 것 같다.