본문 바로가기

Front3

jsp -> vueJs 전환 기록 많이 사용한 변환 몇가지만 정리.JSTL -> Vuejs 문법. 이라고 보면 될 듯. 속성명에 변수 사용. Jspcs Vue.jscs둘 다 같은 의미위에꺼가 약어인데 앞으로는 약어로 표현.반복문1 Jsp ${item.itemName}Colored by Color Scriptercs Vue.js{{item.itemName}}csv-for 사용속성에서는 위와 마찬가지로 v-bind 사용.html 내부에서 변수 참조시 {{변수명}}. 반복문2 Jsp array 내부 array 외부 Colored by Color Scriptercs Vue.js array 내부 array 외부 Colored by Color Scriptercs c:forEach -> v-forc:choose -> 삭제c:when -> v-ifc:.. 2018. 11. 6.
[Vue] 상수 사용 // constants.jsexport default Object.freeze ({ HELLO: '안녕하세요.', BYE: '안녕히가세요.'})cs위와 같이 상수를 모아둔 파일을 만든다. import Constants from './constants'; export class Content extends Vue { private Constants: object = Constants;}Colored by Color ScriptercsConstants를 html 템플릿에서 알아보지 못해서위와 같이 private Constants 객체를 내부에 선언을 해주었다. {{Constants.HELLO}} Colored by Color Scriptercs html 템플릿에서는 위와 같이 사용한다.placeholder와.. 2018. 11. 1.
Window Vue 개발환경 https://nodejs.org 에서 node.js LTS 버전으로 설치. 버전 확인$ node -v$ npm -vcs vue-cli 설치npm install vue-cli -gcs vue 프로젝트 생성vue init webpack [프로젝트 이름]cs 프로젝트 설정은 입맛대로 하면된다. package.json에 들어가면 실행 스크립트를 볼 수 있다.npm run [dev, start, unit, test, lint, build] 중 선택해서 실행하면 각 명령어에 맞는 스크립트가 실행된다. vue 웹 사이트를 띄워보려면 npm run start cs명령어를 이용한다. localhost:8080으로 접근하면 아래와 같은 화면 확인가능. 2018. 11. 1.