Vue.js 기초 및 정리

🌱 Vue.js 기본 문법 정리

• 기초 설명
  1. 인스턴스 : 뷰로 화면을 개발하기 위한 생성 단위
     • 인스턴스 생성 방법 = new Vue();
     • 인스턴스 속성

       new Vue({
       	el: ,
       	template: ,
       	data: ,
       	methods: ,
       	created: ,
       	watch: ,
       });
       
       // el : 인스턴스가 그려지는 화면의 시작점(특정 Html 태그)
       // template : 화면에 표시할 요소 ( HTML, CSS 등)
       // data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
       // method : 화면의 동작과 이벤트 로직을 제어하는 메서드
       // created : 뷰의 라이프 사이틀과 관련된 속성
       // watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
       
       
       var vm = new Vue({
       	// body 태그안에서 #app을 찾아 해당 인스턴스를 붙이겠는 뜻
       	// el을 정의하지 않으면 속성들을 정의하더라도 #app 에서는 사용불가
       	// 무조건 el을 특정 태그에 붙여줘야만 사용 가능
       	el : '#app'
       });

  2. 템플릿 문법
     1. 데이터 바인딩 : 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법. 콧수염 괄호 {{ }}
     2.  
     3. <div>{{ message }}</div> new Vue({ data: { message: 'Hello World'; } })
     4. 디렉티브 : 화면 요소를 조작하기 위한 문법
        1. v-text : JS innerText
        2. <span v-text="msg"></span> <!-- 같은 방법 --> <span>{{msg}}</span>
        3. v-html : JS innerHTML
        4. <div v-html="html"></div>
        5. v-if : 조건에 따라 렌더링 여부를 결정 + v-else / v-else-if
        6. <!-- v-if - loading이 참일 때 보임 --> <div v-if="loading">Loading...</div> <!-- v-else - loading이 거짓일 때 보임 --> <div v-else>test user has been logged in</div> new Vue({ data: { loading: false } })
        7. v-show : v-if와 비슷하게 조건에 따라 Element 표시<aside> 💡 v-if 와 v-show 의 차이 v-show의 엘리먼트는 항상 렌더링 되어 DOM에 남아있음. v-show는 단순히 display 속성 (display:none)을 변경하는 것이고, v-if는 조건에 따라 실제로 DOM을 제거하고 생성하는 것!
        8. </aside>
        9. <div v-show="loading">Loading...</div> new Vue({ data: { loading: true } })
        10. v-for : 데이터 속성의 갯수만큼 화면의 요소를 반복출력
        11. <ul> <li v-for="(item,i) in items">{{ item }}</li> </ul> new Vue({ data: { items: ['Home', 'About', 'Login'] } })
        12. v-bind : 동적으로 엘리먼트 속성 설정

            // Exam
            <!-- id, class 바인딩 -->
            <p v-bind:id="uuid" v-bind:class="name">{{number}}</p>
            
            <script>
              new Vue({
                el: "#app",
                data: {
                  uuid: "abc123",
                  name: "text-blue",
                },
              });
            </script>
            

        13. <div v-bind:속성="사용할 속성명(data)"></div>
        14. v-on : 이벤트 처리

            // Exam
            <!-- 클릭할 때마다 이벤트 실행 -->
            <button v-on:click="logText">Click Me!</button>
            <!-- 키보드를 누를 때마다 이벤트 실행 -->
            <input type="text" v-on:keypress="logText" />
            <!-- 엔터키를 누를 때마다 이벤트 실행 -->
            <input type="text" v-on:keypress.enter="logText" />
            
            <script>
              new Vue({
                el: "#app",
                methods: {
                  // 이벤트 함수
                  logText: function () {
                    console.log("clicked");
                  },
                },
              });
            </script>
            

            <aside> 💡 v-on : 이벤트이름.prevent 이벤트 새로고침 막기 (event.preventDefault(); 와 동일)
        15. </aside>
        16. <button v-on:이벤트 이름="실행할 메소드"></button>
        17. v-model : input 값 구하기
        18. <input type="text" v-model="message" /> <p>{{message}}</p> <script> new Vue({ el: "#app", data: { // input 값이 바뀔 때마다 자동으로 message가 변경됨 message: "", }, }); </script>
     5. this
        1. 인스턴스 안의 메서드에서 사용되는 this는 해당 인스턴스를 가리킴
        2. 객체에 속한 메서드에서 사용될 때 this가 해당 메서드를 호출한 객체를 가리키는 것과 비슷한 관점에서 바라보면 됨
     6. computed : 간한한 연산 수행 → data가 변경되면 연산수행
        1. computed 속성은 반응형(reactive) 종속성에 기반하여 캐시됨

        <script>
        new Vue({ 
          el: "#app",
          data: {
            number: 100,
          },
          // number의 값이 바뀌면 doubleNum도 같이 바뀜
          computed: {
            doubleNum: function () {
              return this.number * 2;
            },
          },
        });
        </script>
        

     7. watch : 매번 실행되기 부담스러운 무거운 로직(ex. 데이터 요청)
     8. <script> new Vue({ el: "#app", data: { num: 10, }, // watch - 데이터의 변화에 따라 특정 로직을 실행 watch: { num: function () { this.logText(); }, }, methods: { addNum: function () { this.num++; }, logText: function () { console.log(`${this.num} changed`); }, }, }); </script>
  3. 뷰 컴포넌트
     1. 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
     2. 컴포넌트 기반으로 개발시 코드의 재사용성 ↑ , 빠르게 화면을 제작 가능
     <aside> 💡 전역 컴포넌트 : 인스턴스를 생성할 때마다 따로 등록 필요X, 모든 인스턴스 사용가능 지역 컴포넌트 : 해당 인스턴스 내에서만 사용가능, 인스턴스마다 새로 생성해야함전역 컴포넌트 생성 방법지역 컴포넌트 생성 방법

     // Exam
     // 표시
     <div id="app">
       <app-header></app-header>
     </div>
     
     // 생성
     Vue.component("app-header", {
       template: "<h1>Header</h1>",
     });
     

  4. new Vue({ el: "#app", // #app에서만 사용할 수 있는 지역 컴포넌트 components: { // '컴포넌트 이름' : { 컴포넌트 내용 }, } });
  5. Vue.component('컴포넌트 이름', { // 컴포넌트 내용 });
  6. </aside>
  7. 컴포넌트간의 통신 방식※ 상위에서 하위로는 데이터, 하위에서 상위로는 이벤트 하위 컴포넌트 → (이벤트 발생) → 상위 컴포넌트 상위 컴포넌트 → (props 전달) → 하위 컴포넌트
     1. props (상위→하위)
     2. <div id="app"> <app-header v-bind:propsData="message"></app-header> </div> <script> // 컴포넌트를 분리하여 작성하고 등록하는 방식으로 가독성을 높임 var appHeader = { template: "<h1>{{ propsData }}</h1>", props: ["propsData"], // props 속성 이름 지정 }; new Vue({ el: "#app", components: { "app-header": appHeader, } data: { message: "hi", }, }); </script>
     3. 이벤트 (하위→상위)
     4. <div id="app"> <app-header v-on:pass="logText"></app-header> </div> <script> var appHeader = { template: "<button v-on:click='passEvent'>Click Me</button>", methods: { passEvent: function () { this.$emit("pass"); // 이벤트 명 }, }, }; new Vue({ el: "#app", components: { "app-header": appHeader, }, methods: { // 이벤트 발생시 실행할 메서 logText: function () { console.log("hi"); }, }, }); </script>
     5. 같은 레벨의 컴포넌트 간의 통신 방식이벤트로 Root로 전달하고 Root에서 props로 전달
     6. var appContent = { template: "<div>content<button v-on:click='passNum'>pass</button></div>", methods: { passNum: function () { // 10을 같은 레벨인 appHeader에 전달하기 위해서 // 먼저 Root로 올려 전달하고 Root에서 appHeader로 내려 전달하는 방식 // 상위로 올릴 때는 event 내릴 때는 props this.$emit("pass", 10); }, }, };
     7. 
  8. 
  9. 뷰 라우터
     1. 뷰 라우터 : 뷰 라이브러리를 이용하여 SPA를 구현할 때 사용하는 라이브러리 : SPA(Single Page Application)를 구현하기 위한 라우팅 라이브러리
     2. 라우터 인스턴스 생성
     3. // 라우터 인스턴스 생성 var router = new VueRouter({ // 라우터 옵션 }) // 인스턴스에 라우터 등록 new Vue({ router: router })
     4. 라우터 옵션
        • routes : 페이지의 라우팅 정보 (라우팅할 url과 컴포넌트)
          • path : 페이지의 url
          • component : 해당 url에서 표시될 컴포넌트
        • mode : URL의 해쉬 값(#) 제거 속성
     5. router-view
        1. url에 따라 해당하는 컴포넌트를 보여주는 태그
        2. 뷰 인스턴스에 라우터를 연결해야 사용 가능

        <router-view></router-view>
        

     6. router-link
        1. 특정 url로 이동시켜주는 태그 (=html a 태그와 같은 역할)

        <router-link to="이동할 url"></router-link>
        

        Login Home

        var LoginComponent = {
          template: "<div>login</div>",
        };
        var HomeComponent = {
          template: "<div>home</div>",
        };
        
        new VueRouter({
          mode: 'history',  // url 해시값 제거
          routes: [
        		// '/login'에서 LoginComponent 컴포넌트 표시
            { path: '/login', component: LoginComponent },
        		// '/home'에서 HomeComponent 컴포넌트 표시
            { path: '/home', component: HomeComponent }
          ]
        })
        
        new Vue({
            // 인스턴스에 라우터 연결
            router: router,
          });
        

  10. Vue CLI
      1. CLI (Command Line Interface) : 명령어를 통해 특정 액션을 실행하는 도구
  11. 싱글 파일 컴포넌트
  12. // 파일 구조 <template> <!-- HTML --> </template> <script> // Javascript - 인스턴스 속성들 </script> <style> /* css */ </style> // ※ 템플릿 루트는 무조건 하나여야 한다. -> 전체 태그를 하나의 태그가 감싸고 있어야 함 // ※ 파스칼 케이스로 네이밍 + 최소 두단어 이상으로 조합
• Vue의 핵심 → Reactivity (반응성)
• Attrubute Binding
  • 태그안에 속성 값을 data값으로 세팅하려면 v-bind를 사용
• Methods : 함수형태로 정의되며, v-on을 사용하여 이벤트와 연결
• Vuex : 상태 관리 패턴으로서, 컴포넌트간 데이터 전달을 간편하게 해줌
• 트랜지션
  • 애니메이션 효과 css를 태그에 적용할 수 있게 함
  • transition 태그에 지정한 name으로 class 생성
    • {name}-enter -> {name}-enter-to로 이동
    • {name}-leave -> {name}-leave-to로 이동
    • {name}-enter-active, {name}-leave-active

var vm = new Vue({
	// body 태그안에서 #app을 찾아 해당 인스턴스를 붙이겠는 뜻
	// el을 정의하지 않으면 속성들을 정의하더라도 #app 에서는 사용불가
	// 무조건 el을 특정 태그에 붙여줘야만 사용 가능
	el : '#app'
});

🌱 Vue.js 기본 문법 정리

• 기초 설명
  1. 인스턴스 : 뷰로 화면을 개발하기 위한 생성 단위
     • 인스턴스 생성 방법
     • new Vue();
     • 인스턴스 속성

       var vm = new Vue({
       	// body 태그안에서 #app을 찾아 해당 인스턴스를 붙이겠는 뜻
       	// el을 정의하지 않으면 속성들을 정의하더라도 #app 에서는 사용불가
       	// 무조건 el을 특정 태그에 붙여줘야만 사용 가능
       	el : '#app'
       });
       

     • new Vue({ el: , template: , data: , methods: , created: , watch: , }); // el : 인스턴스가 그려지는 화면의 시작점(특정 Html 태그) // template : 화면에 표시할 요소 ( HTML, CSS 등) // data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성 // method : 화면의 동작과 이벤트 로직을 제어하는 메서드 // created : 뷰의 라이프 사이틀과 관련된 속성 // watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
  2. 템플릿 문법
     1. 데이터 바인딩 : 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법. 콧수염 괄호 {{ }}
     2. <div>{{ message }}</div> new Vue({ data: { message: 'Hello World'; } })
     3. 디렉티브 : 화면 요소를 조작하기 위한 문법
        1. v-text : JS innerText
        2. <span v-text="msg"></span> <!-- 같은 방법 --> <span>{{msg}}</span>
        3. v-html : JS innerHTML
        4. <div v-html="html"></div>
        5. v-if : 조건에 따라 렌더링 여부를 결정 + v-else / v-else-if
        6. <!-- v-if - loading이 참일 때 보임 --> <div v-if="loading">Loading...</div> <!-- v-else - loading이 거짓일 때 보임 --> <div v-else>test user has been logged in</div> new Vue({ data: { loading: false } })
        7. v-show : v-if와 비슷하게 조건에 따라 Element 표시<aside> 💡 v-if 와 v-show 의 차이 v-show의 엘리먼트는 항상 렌더링 되어 DOM에 남아있음. v-show는 단순히 display 속성 (display:none)을 변경하는 것이고, v-if는 조건에 따라 실제로 DOM을 제거하고 생성하는 것!
        8. </aside>
        9. <div v-show="loading">Loading...</div> new Vue({ data: { loading: true } })
        10. v-for : 데이터 속성의 갯수만큼 화면의 요소를 반복출력
        11. <ul> <li v-for="(item,i) in items">{{ item }}</li> </ul> new Vue({ data: { items: ['Home', 'About', 'Login'] } })
        12. v-bind : 동적으로 엘리먼트 속성 설정

            // Exam
            <!-- id, class 바인딩 -->
            <p v-bind:id="uuid" v-bind:class="name">{{number}}</p>
            
            <script>
              new Vue({
                el: "#app",
                data: {
                  uuid: "abc123",
                  name: "text-blue",
                },
              });
            </script>
            

        13. <div v-bind:속성="사용할 속성명(data)"></div>
        14. v-on : 이벤트 처리

            // Exam
            <!-- 클릭할 때마다 이벤트 실행 -->
            <button v-on:click="logText">Click Me!</button>
            <!-- 키보드를 누를 때마다 이벤트 실행 -->
            <input type="text" v-on:keypress="logText" />
            <!-- 엔터키를 누를 때마다 이벤트 실행 -->
            <input type="text" v-on:keypress.enter="logText" />
            
            <script>
              new Vue({
                el: "#app",
                methods: {
                  // 이벤트 함수
                  logText: function () {
                    console.log("clicked");
                  },
                },
              });
            </script>
            

            <aside> 💡 v-on : 이벤트이름.prevent 이벤트 새로고침 막기 (event.preventDefault(); 와 동일)
        15. </aside>
        16. <button v-on:이벤트 이름="실행할 메소드"></button>
        17. v-model : input 값 구하기
        18. <input type="text" v-model="message" /> <p>{{message}}</p> <script> new Vue({ el: "#app", data: { // input 값이 바뀔 때마다 자동으로 message가 변경됨 message: "", }, }); </script>
     4. this
        1. 인스턴스 안의 메서드에서 사용되는 this는 해당 인스턴스를 가리킴
        2. 객체에 속한 메서드에서 사용될 때 this가 해당 메서드를 호출한 객체를 가리키는 것과 비슷한 관점에서 바라보면 됨
     5. computed : 간한한 연산 수행 → data가 변경되면 연산수행
        1. computed 속성은 반응형(reactive) 종속성에 기반하여 캐시됨

        <script>
        new Vue({ 
          el: "#app",
          data: {
            number: 100,
          },
          // number의 값이 바뀌면 doubleNum도 같이 바뀜
          computed: {
            doubleNum: function () {
              return this.number * 2;
            },
          },
        });
        </script>
        

     6. watch : 매번 실행되기 부담스러운 무거운 로직(ex. 데이터 요청)
     7. <script> new Vue({ el: "#app", data: { num: 10, }, // watch - 데이터의 변화에 따라 특정 로직을 실행 watch: { num: function () { this.logText(); }, }, methods: { addNum: function () { this.num++; }, logText: function () { console.log(`${this.num} changed`); }, }, }); </script>
  3. 뷰 컴포넌트
     1. 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
     2. 컴포넌트 기반으로 개발시 코드의 재사용성 ↑ , 빠르게 화면을 제작 가능
     <aside> 💡 전역 컴포넌트 : 인스턴스를 생성할 때마다 따로 등록 필요X, 모든 인스턴스 사용가능 지역 컴포넌트 : 해당 인스턴스 내에서만 사용가능, 인스턴스마다 새로 생성해야함전역 컴포넌트 생성 방법지역 컴포넌트 생성 방법

     // Exam
     // 표시
     <div id="app">
       <app-header></app-header>
     </div>
     
     // 생성
     Vue.component("app-header", {
       template: "<h1>Header</h1>",
     });
     

  4. new Vue({ el: "#app", // #app에서만 사용할 수 있는 지역 컴포넌트 components: { // '컴포넌트 이름' : { 컴포넌트 내용 }, } });
  5. Vue.component('컴포넌트 이름', { // 컴포넌트 내용 });
  6. </aside>
  7. 컴포넌트간의 통신 방식※ 상위에서 하위로는 데이터, 하위에서 상위로는 이벤트 하위 컴포넌트 → (이벤트 발생) → 상위 컴포넌트 상위 컴포넌트 → (props 전달) → 하위 컴포넌트
     1. props (상위→하위)
     2. <div id="app"> <app-header v-bind:propsData="message"></app-header> </div> <script> // 컴포넌트를 분리하여 작성하고 등록하는 방식으로 가독성을 높임 var appHeader = { template: "<h1>{{ propsData }}</h1>", props: ["propsData"], // props 속성 이름 지정 }; new Vue({ el: "#app", components: { "app-header": appHeader, } data: { message: "hi", }, }); </script>
     3. 이벤트 (하위→상위)
     4. <div id="app"> <app-header v-on:pass="logText"></app-header> </div> <script> var appHeader = { template: "<button v-on:click='passEvent'>Click Me</button>", methods: { passEvent: function () { this.$emit("pass"); // 이벤트 명 }, }, }; new Vue({ el: "#app", components: { "app-header": appHeader, }, methods: { // 이벤트 발생시 실행할 메서 logText: function () { console.log("hi"); }, }, }); </script>
     5. 같은 레벨의 컴포넌트 간의 통신 방식이벤트로 Root로 전달하고 Root에서 props로 전달
     6. var appContent = { template: "<div>content<button v-on:click='passNum'>pass</button></div>", methods: { passNum: function () { // 10을 같은 레벨인 appHeader에 전달하기 위해서 // 먼저 Root로 올려 전달하고 Root에서 appHeader로 내려 전달하는 방식 // 상위로 올릴 때는 event 내릴 때는 props this.$emit("pass", 10); }, }, };
     7. 
  8. 
  9. 뷰 라우터
     1. 뷰 라우터 : 뷰 라이브러리를 이용하여 SPA를 구현할 때 사용하는 라이브러리 : SPA(Single Page Application)를 구현하기 위한 라우팅 라이브러리
     2. 라우터 인스턴스 생성
     3. // 라우터 인스턴스 생성 var router = new VueRouter({ // 라우터 옵션 }) // 인스턴스에 라우터 등록 new Vue({ router: router })
     4. 라우터 옵션
        • routes : 페이지의 라우팅 정보 (라우팅할 url과 컴포넌트)
          • path : 페이지의 url
          • component : 해당 url에서 표시될 컴포넌트
        • mode : URL의 해쉬 값(#) 제거 속성
     5. router-view
        1. url에 따라 해당하는 컴포넌트를 보여주는 태그
        2. 뷰 인스턴스에 라우터를 연결해야 사용 가능

        <router-view></router-view>
        

     6. router-link
        1. 특정 url로 이동시켜주는 태그 (=html a 태그와 같은 역할)

        <router-link to="이동할 url"></router-link>
        

        Login Home

        var LoginComponent = {
          template: "<div>login</div>",
        };
        var HomeComponent = {
          template: "<div>home</div>",
        };
        
        new VueRouter({
          mode: 'history',  // url 해시값 제거
          routes: [
        		// '/login'에서 LoginComponent 컴포넌트 표시
            { path: '/login', component: LoginComponent },
        		// '/home'에서 HomeComponent 컴포넌트 표시
            { path: '/home', component: HomeComponent }
          ]
        })
        
        new Vue({
            // 인스턴스에 라우터 연결
            router: router,
          });
        

  10. Vue CLI
      1. CLI (Command Line Interface) : 명령어를 통해 특정 액션을 실행하는 도구
  11. 싱글 파일 컴포넌트
  12. // 파일 구조 <template> <!-- HTML --> </template> <script> // Javascript - 인스턴스 속성들 </script> <style> /* css */ </style> // ※ 템플릿 루트는 무조건 하나여야 한다. -> 전체 태그를 하나의 태그가 감싸고 있어야 함 // ※ 파스칼 케이스로 네이밍 + 최소 두단어 이상으로 조합
• Vue의 핵심 → Reactivity (반응성)
• Attrubute Binding
  • 태그안에 속성 값을 data값으로 세팅하려면 v-bind를 사용
• Methods : 함수형태로 정의되며, v-on을 사용하여 이벤트와 연결
• Vuex : 상태 관리 패턴으로서, 컴포넌트간 데이터 전달을 간편하게 해줌
• 트랜지션
  • 애니메이션 효과 css를 태그에 적용할 수 있게 함
  • transition 태그에 지정한 name으로 class 생성
    • {name}-enter -> {name}-enter-to로 이동
    • {name}-leave -> {name}-leave-to로 이동
    • {name}-enter-active, {name}-leave-active