템플릿

<!-- TODO: {{  }} 이걸로 안되는 것 -->
<!-- 8) 객체 출력(js) : {속성:값} -- 안됨 >
 {{{name:"홍길동"}}} -->
<!-- 9) 조건문 : if문/switch문: 안됨
 {{ if(true) {console.log("true")} }} -->
<!-- 10) 반복문 : for문/while문: 안됨
   for(let i=0;i<2;i++) {console.log("aaa")}-->
   

vue 코딩

1. 홈화면 : views/HomeView.vue
   => vueInit 단축키 (vue 코딩 템플릿)

2. {{값}} : 콧수염표기법 (jsp el 표현식 비슷)

3. 위의 콧수염표기법 : 객체, for/if문 사용불가
   #vue 장점 : jsp보다 나은점

1) 성능 : jsp는 새로고침시 전체 페이지 새로고침이 발생
=> vue 장점 : 부분 새로고침(변경된 부분만 새로고침) 속도가 빠르다

vue 메뉴 만들기 :

1. 새페이지 : XxxView.vue
2. router/index.js: path(경로) 추가 -/xxx , component - xxxView.vue
3. 화면에 링크 추가 : App.vue 추가 , a태그, router-link 태그 사용

*)App.vue : vue 에서 역할
=> Vue 실행되면 제일 처음 찾는 파일 App.vue

vue 컴포넌트 페이지 만들기 : jsp 의 include 와 유사

1. 컴포넌트 페이지 작성 : componets/XxxCom.vue
2. 다른 vue 에 끼워넣기 : App.vue 에 넣기

• import 이름 from "경로/파일명";
• components : {
  이름 //컴포넌트명 추가
  }

-html 부분에서 사용 : <이름 />

바인딩 변수 사용하기 :

1. data() {
   return {
   // TODO: vue의 변수는 여기에 코딩
   hello: "안녕",
   message: "

   안녕하세요

   ",
   name: "장길산",
   // TODO: 간단연습) name 속성을 만들고 장길산이라고 화면에 표시하세요
   };
   },

   2)변수 사용: {{hello}}