Vue js

태량·2023년 7월 11일
공부
0

뷰 인스턴스 & 뷰 컴포넌트

  • 화면 개발을 위한 필수 단위
  • 컴포넌트 단위로 조립해서 웹페이지를 완성.
  • 뷰 인스턴스의 하위 객체를 컴포넌트라고 생각하면 됨.

1. 뷰 인스턴스

1) 뷰 인스턴스의 정의

  • 자바 객체와 같다고 생각하면 됨.

2) 뷰 인스턴스 속성

  • 자바 객체의 프로퍼티처럼 속성을 가짐. 속성에는 대표적으로
    • el : 인스턴스가 할당될 div id 값 #add
    • data : map 구조의 데이터
    • template : html 태그
    • methods : function 기능 (자바 메소드)
    • created : 인스턴스 생성되자마자 실행될 로직. initailiza bean과 유사
const app = new Vue({
    el: "#app",

    data: {
        message: "Hello Vue!, passed From Parent Component",
        message2: "Another MSG!! Hello Vue!, passed From Parent Component"
    }
})

3) 뷰 인스턴스 유효 범위

  • 실제 html 문서에서 뷰 인스턴스의 데이터나 메소드가 적용될 범위.

4) 뷰 인스턴스의 적용 과정

Untitled

5) 뷰 인스턴스 라이프 사이클

Untitled

(1) 크게 4가지 단계가 있다. 생성 → 부착 → (내용 갱신)→ 소멸

  • 내용 갱신은 데이터의 변화에 따라 있을 수 있고 없을 수 있는 단계

(2) 라이프 사이클에서의 속성 변화

  1. 인스턴스 생성

    1. beforeCreate
      • 인스턴스가 생성되고 가장 처음 속성, 이때 인스턴스에 정의된 속성 데이터는 아직 초기화 X
    2. created - 인스턴스의 속성이 초기화된 상태
    3. beforeMount - 인스턴스안의 template 속성을 다루는 단계

  2. 인스턴스가 화면에 부착

    • mounted : html에 지정한 요소(div id=”app”)에 new Vue( el: “#app”)이 연결된 상태.

  3. 인스턴스 내용 갱신 ( 있을 수도 있고 없을 수도 있음)

    a. beforeUpdated : $watch 속성으로 데이터가 변화가 되는지 감시되는 상태. 데이터가 바뀌

    진 않았음.

    b. updated : 실제로 데이터 변경이 일어난 후 속성.

  4. 인스턴스 소멸

    1. beforeDestory : 아직은 소멸되진 않은 단계. 소멸 될랑 말랑.
    2. destroyed : 인스턴스 소멸

2. 컴포넌트

  1. 컴포넌트 정의
    • 추상화된 template 블록
    • 인스턴스가 컴포넌트를 생성.
    • 기존에 페이지 마다 html 코드를 중복해서 썼었는데, 추상화된 컴포넌트를 이용하면 해결 할 수 있을 듯.
  2. 컴포넌트 등록
    1. 전역 컴포넌트
      • Vue.componet 형식으로 만듦
    2. 지역 컴포넌트
      • 변수에 템플릿을 설정한 뒤 그 변수를 뷰 인스턴스안 components 속성에 추가.
  3. 지역 컴포넌트 VS 전역 컴포넌트
    • 전역 컴포넌트는 div id = “app” 과 div id = “app2” 두 곳 모두 사용가능.
    • 지역 컴포넌트는 속해 있는 vue 인스턴스의 el에 해당하는 div id에서만 사용가능. 다른 div id에 적용하려면 새로운 인스턴스에 다시 정의해야함.

3. 컴포넌트간 통신

  1. 뷰의 컴포넌트 통신 특징

    • 뷰 프레임워크에선 컴포넌트와 컴포넌트 사이의 직접적 데이터 참조를 못하게 둠.
    • 아래의 방법으로 데이터 전달을 하게끔 규칙을 만듦

  2. 상-하위 컴포넌트 관계

    • 트리구조의 부모 노드와 자식 노드라 생각하면 됨.
    • 상위 → 하위로는 데이터 전달 (props)
    • 하위 → 상위로는 이벤트 전달, 이벤트의 매개변수로 데이터를 넣어서 전달 가능하긴 함.

  3. 상위 → 하위 데이터 전달

    • 하위 컴포넌트에 props 속성을 통해 상위 컴포넌트로 데이터를 전달 받음.
    <div id="app">
    <test4 v-bind:props-data="message2"></test4>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

<script>

    Vue.component("test4",{

        props: ["propsData"],
        template: "<p>{{propsData}}</p>"
        }
    )

    new Vue({
        el: "#app",
        data : {
          message: "This is Massage", message2 : "this is Massage2"
        }
    })

</script>

  4. 하위 → 상위 이벤트 전달

    1. <event-comp v-on:event1="printConsole"></event-comp> 
	-> <button v-on:click='makeEvent'>show</button>로 치환

2. 사용자의 클릭시 v-on:click='makeEvent'에 적혀 있는 makeEvent 메소드 호출

3. makeEvent 메소드에는 this.$emit('event1')이 정의되어 있기 때문에, 'event1'이라는 이름으로 이벤트 발생. <event-comp v-on:event1="printConsole"></event-comp> 에서 event1 = "printConsole" 정보를 바탕으로 printConsole 메소드 호출.

<div id="app">
<event-comp v-on:event1="printConsole"></event-comp>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>

    Vue.component("eventComp",{

        template: "<button v-on:click='makeEvent'>show</button>",

        methods: {
            makeEvent: function (){

                this.$emit('event1')
            }
        }
    })

    new Vue({

        el: "#app",

        data: {
            message: "hello vue"
        },

        methods: {
          printConsole: function (){
console.log("This is Test Console print")
          }
        }

        }
    )

</script>

  5. 이벤트 버스

    • 컴포넌트간 데이터를 전달하기 위해선 각각의 단계들을 거쳐야 하는데, 이것을 생갹하고 다이렉트로 전달하는 방법.
    <div id="app">
<child></child>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

<script>

    const eventBus = new Vue(); -> 이벤트 버스를 위해 새로운 뷰 인스턴스 생성

    Vue.component("child",{

        template: "<button v-on:click='translate'>show</button>",

        methods: {
            translate: function (){
                eventBus.$emit('event',100);
								-> 이벤트 버스에게 emit 메소드를 통해 이벤트 이름과 데이터를 전달
            }
        }

    })

    new Vue({
        el: "#app",

        mounted: function (){

            eventBus.$on('event',function (value) {
console.log(value+100); -> 이벤트 버스의 on 메소드를 통해 전달 받을 하위 컴포넌트의 이벤트 이름과 거기에 담긴 데이터를 받음.
            })

        }
        }
    )

</script>

라우터와 HTTP 통신

뷰 라우터

  1. 라우팅이란?

    • 서버로 부터 미리 웹 페이지를 받아놓고 웹페이지 이동시 이용. → 매번 요청마다 응답을 받는 시스템 X

  2. 뷰 라우터

    • 라우팅 기능 라이브러리
    <div id="app">
    <h1>라우터 예제</h1>
    <p>
        <router-link to= "/main">Main 컴포넌트로 이동</router-link>
        <router-link to= "/login">Login 컴포넌트로 이동</router-link>

				** <router-link to = "url명"> -> 뷰 라우터의 페이지 이동 태그
    </p>
    <router-view></router-view>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
-> CDN을 통해 뷰 라우터 라이브러리 가져오기

<script>

    const Main = {
        template: "<div>Main</div>"
    };

    const Login = {
        template: "<div>Login</div>"
    };

-> Main과 Login 변수는  <router-view>에 실제로 변환될 내용을 템플릿 속성으로 정의.

    var routes = [
        { path: '/main', component: Main},
        { path: '/login', component: Login}
    ];

-> routes는 path와 component를 매핑하는 변수

    const router = new VueRouter({
        routes
    });

-> new VueRouter를 통해 뷰 라우터 인스턴스 생성. 그 인스턴스에 매개변수로 위에 정의한 routes(path와 컴포넌트 매핑)를 넣어줌.

    const app = new Vue({
            router
    }
    ).$mount('#app');

-> div id = 'app'에 매핑하기 위해 뷰 인스턴스를 생성하면서 거기 매개변수에 위에 생성한 router 인스턴스를 넣어줌. 그리고 $mount 메소드로 el = "#app" 지정 같이 지정함

</script>

  3. 네스티드 라우터

    • nested란 집합의 의미를 갖는다.
    <div id="app">
    <router-view></router-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

<script>

    const post = {
        template: "<p>Hi I'm Post Component!!</p>"
    };

    const profile = {
        template: "<p>Hi I'm Profile Component!!</p>"
    };

    const user = {
        template:"<div> <p>Hi I\\'m User Component!!</p>\n" +
            "\n" +
            "            <router-view></router-view>\n" +
            "            </div>"

    };
-> 네스티드 라우터는 특징적으로 상위 컴포넌트 템플릿 속성안에 <router-view> 을 집어넣는다

    const routes = [

        {path: "/user", component: user,

            children: [
                {path: "post", component: post},
                {path: "profile",component: profile}
            ]

						-> children 속성을 추가하여 네스티드 라우터 적용될 하위 컴포넌트를 설정 해준다.
        }
    ];

    const router = new VueRouter({
        routes
    });

    new Vue({router}).$mount("#app");

</script>

  4. 네임드 뷰

    • 컴포넌트가 많아지면 복잡해지는 네스티드 라우터를 보완한다.
    <div id="app">
    <router-view name="header"></router-view> -> 매핑 정보를 name 속성에 사용자 정의로 정해준다.
    <router-view></router-view>
    <router-view name="footer"></router-view>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

<script>

    const Header = {
        template: "<h1>Hi I'm Header</h1>"
    };

    const Body = {
        template: "<h1>Hi I'm Body</h1>"
    };

    const Footer = {
        template: "<h1>Hi I'm Footer</h1>"
    };

-> 위에 라우터 뷰에 적용될 템플릿들을 정의한다.

    const router = new VueRouter({
        routes: {
            path: "/",
            components: {
                default: Body,
                header: Header,
                footer: Footer
            } -> component's' 속성에 위에 view name key와 템플릿 변수들을 매핑 해준다.
        }
    });

    new Vue({router}).$mount("#app");

</script>

뷰 HTTP 통신

  1. HTTP 통신 방법
  2. 뷰 리소스
    • ajax 방식 http 통신 라이브러리
  3. 액시오스
    • 뷰에서 현재 가장 많이 쓰이는 http 통신 라이브러리
<div id="app">
    <button v-on:click="getContent"> 클릭 </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

    new Vue({

        el: "#app",

        data: {

            message: 100
        },

        methods: {

            getContent: function () {
                axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
                    .then(function (value) {
console.log(value)

-> 액시오스 http 통신 메소드. get이나 post 메소드를 호출하여 http 메소드를 지정하고, 매개변수로 해당 서버 url을 입력한다. 그리고 then을 써서 그 다음 행동을 정의한다.

                    })
            }

        }

    })

</script>

템플릿과 프로젝트 구성

뷰 템플릿

  1. 뷰 템플릿이란?

    • 실제 html에 끼워넣고 싶은 내용들을 담고 있는 속성.
    • 개발자가 작성한 데이터가 render() 메소드로 변환되어 이 메소드가 화면에 표시 해주는 역할을 한다.

    1) template 속성을 이용한 방법

    2) 싱글 파일 컴포넌트(SFC)을 이용한 템플릿 방법

  2. 템플릿에서 사용하는 뷰의 속성과 문법.

    1) 데이터 바인딩 - 뷰 인스턴스의 데이터와 html 화면요소에 연결하는 행위

    (1) {{}} 콧수염 괄호

    (2) v-bind 

    <div id="app">
    <h1 v-bind:id="here" v-bind:style="myColor">Hi</h1>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

<script>

    new Vue({

        el: "#app",
        data: {
            here: "hello",
            myColor: "color: red"
-> red만 단독으로 쓰지 않게 주의!
        }
    })

</script>

    1. 자바스크립트 표현식

      • {{}} 콧수염 괄호에 자바스크립트 메소드를 이용해서 연산작업을 할 수 있음.
      • 사용하려면
      • computed 속성을 이용해서 계산되어지게 하고 그 값을 표시하는데 이용하는 메커니즘

    2. 디렉티브

      <div id="app">

    <p v-if="flag">Hi</p>
    <p v-show="flag">Hi-Show</p>
-> if와 show의 차이는 if는 false면 흔적도 없음. show는 태그가 남긴 함 다만 style= "display: none"으로 바뀌어서 안보이는거.

    <p v-for="system in systems">{{system}}</p>
    <button v-on:click="button1">버튼</button>

이거 이외에도 폼에 대한 디렉티브 v-model이 있음

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

<script>

    new Vue({

        el: "#app",

        data:{
            flag: true,
            systems: ["android","ios","window"]
-> Js에서 배열은 [] 대괄호, 속성에서는 맵 형태를 만들기 위해 {}
        },

        methods: {

            button1: function (){

                return alert("경고!");
            }
        }

    })

-> 메소드를 정의하려면 뷰 인스턴스에 methods 속성안에 메소드를 정의해야함! 자꾸 헷갈림. 그리고 button에서 클릭 이벤트를 넣을려면 v-on:"메소드명"이 아니라
v-on:click="메소드명"

</script>

    3. 이벤트 처리

      • v-on을 이용한 이벤트 처리

    4. 고급 템플릿 기법

      1) computed 속성

      • 메소드와 비슷한 형태이지만 두가지의 장점을 가짐 (1) 뷰 인스턴스의 data 속성에서의 데이터 변화가 있다면 자동으로 다시 실행 됨. (2) computed 속성안의 메소드가 실행되고 난 리턴 값을 캐싱으로 가지고 있다가 사 용함.

      2) method 속성과 computed 속성의 차이

      • 둘다 메소드가 호출되서 사용되긴 하지만, 사용되고 데이터 변화가 있으면 computed는 자동으로 적용. method는 그렇지 않음
      <div id="app">

    {{reverse}}
-> data의 reverseMsg가 아니라 computed속성의 reverse 메소드명이 들어감.
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

<script>

    new Vue({

        el: "#app",

        data: {
            reverseMsg: "hello Vue!"
        },

        computed: {

            reverse: function (){

                return this.reverseMsg.split("").reverse().join("");
            }
        }

    })

</script>

      3) watch 속성

      • 데이터 변화를 감지하여 로직 수행. computed 속성과 다른점은 비동기 처리를 지원함.

뷰 프로젝트 구성 방법

  1. HTML 파일에서 뷰 코드 작성시 한계점

    • script태그 안에서 html 코드를 작성하게 되면 줄바꿈시 + 가 생김. → 쓰기 불편, 가독성의 심각한 문제

  2. 싱글 파일 컴포넌트

    • 위에 한계점을 해결하기 위한 방법.
    • 하나의 컴포넌트를 .vue 파일로 구성하여 사용.

    Untitled

  3. 뷰 CLI(Command Line Interface)

    • 뷰 프로젝트 구조를 구성하게 해주는 커맨드 인터페이스

    1) 웹팩 : HTML,CSS,JS을 하나의 모듈로 묶어주는 모듈 번들러(묶어주는 도구)

  4. 뷰 CLI로 프로젝트 생성

  5. 뷰 로더

    • .vue 파일을 웹 브라우저에서 표시될 수 있게 변환해주는 라이브러리.
profile
태량
좋은 영향력과 교류를 위하여
이전 포스트

[Spring] CacheControl

다음 포스트

Vue js

0개의 댓글