VueJS 정리

# 단방향 연결 
# 양방향 연결
# let, const
# MVVM 

# Vue JS를 사용하려면..

-VueJS를 사용하기 위해서는 필요한 의존성을 불러와야 하며, 다양한 방법들이 존재한다. 여러 방법 중 가장 간편하게 사용할 수 있는 CDN을 사용하며, 공식 문서에 나와 있는 unpkg에서 제공하는 CDN을 사용한다.

 

** controller에 @requestbody 적기! ( post,put,patch)

<!-- async(비동기) = >전송형태 json 그래서  스프링에서 @modelattribute 사용 불가, 대신 @requestbody(post,put,patch에만 적을수있음)사용해야함 -->

 

- <script src="https://unpkg.com/vue@3.2.36"></script> 무조건 최신버전으로 넣어준다.

 

## Vue instance

1. data
2. v-model
3. template
4. computed
5. watch
6. methos

## Vue directive

1. v-text
2. v-html
3. v-bind
4. v-on ( v-on:click="함수이름" → 클릭 시 함수를 Vue가 호출하도록 위탁
               v-on:click="함수()" → 클릭 시 함수를 내가 호출)
5. v-show
6. v-if
7. v-for

<div id="app"> 
	<div class="row" v-for="(pocketmon,index) in pocketmonList" v-bind:key="pocketmon.no"> <!--pocketmonList를 pocketmon으로 변수 선언-->
 
                번호 : {{pocketmon.no}},
                이름 : {{pocketmon.name}},
                속성 : {{pocketmon.type}}

            번호 : {{pocketmonList[index].no}},
            이름 : {{pocketmonList[index].name}},
            속성 : {{pocketmonList[index].type}}
            
                    <!--
             한글 쓸 예정이면 아래 코드를 작성하면된다. keyword부분만 달라짐
            v-on:input="keyword=$event.target.value

            한글 등 IME 입력 이슈에 대응하기 위한 방법
            - v-model만으로는 어려우므로 v-on:input을 같이 사용
            - v-on:input으로 입력 발생 시 수동으로 데이터를 갱신하도록 자성
            - v-on:input="데이터" = $event.target.value"
            - $event 는 Vue에서 관리하는 이벤트 정보 객체
        -->
</div>

<script>
        Vue.createApp({
            //데이터 설정 영역을 만든다.
            data(){
                return{
                    //화면에서 사용할 데이터를 선언한다.
                    //나중에 불러오더라도 배열은 최초 선언이 필요하다.
                    pocketmonList:[] 
                };
            },

          computed:{
                //데이터 실시간 계산 영역
                //- 사용하고 싶은 변수명으로 함수를 선언
                //- 함수 내부에는 보여주고 싶은 값을 코드로 반환하도록 작성
                //- vue에 등록한 값에 접근할 때 반드시 this를 붙여야 함
                //- 코드가 길면 안됨(무리가 많이 가기때문)

              ex) len(){}, - 중괄호안에는 return 이 들어감.

                    result(){},
           },
           methods:{
           	//메소드 영역
            //- 코드를 저장해두고 필요 시 호출할 수 있다.
            //- 필요하다면 매개변수를 설정할 수 있고, 반환값을 가질 수 있다.
            
                    //부르는 방식에 따라 전달되는 값이 다름
                    //Vue가 부르면 이벤트 정보가 전달됨
                    //내가 부르면 이벤트 정보가 전달되지 않음
			deleteItem(index){
                    //this.todoItems.splice(몇번째부터,몇개);
                    this.todoItems.splice(index,1);
                },
                
                 //메소드 생성 시 async 키워드를 쓰면 동기화된 처리를 보장
                //- async 메소드에서는 await 키워드 사용이 가능
                async loadData(){
                    const resp = await axios.get("http://localhost:8080/pocketmon/");
                    this.pocketmonList.push(...resp.data);
                }   
                
                
                //뷰 인스턴스의 생성 시점에 따른 간섭 처리 구현
            //- create 시점에서는 데이터가 생성된다
            //- mount 시점에서는 화면이 생성된다(=화면에 Vue가 부착된다)
            //- update 시점에서는 화면이 변경된다
            beforeCreate(){
                //생성 전에는 데이터가 없다
                console.log("before create");
                console.log(this.pocketmonList);
            },
            created(){
                //생성 후에는 데이터가 있다
                console.log("after create");
                console.log(this.pocketmonList);
                   this.loadData();
            },
            beforeMount(){
                //마운트 전에는 v-로 만든 화면이 존재하지 않는다
                console.log("before mount");
                console.log(document.querySelectorAll(".row"));
            },
            mounted(){
                //마운트 후에는 v-로 만든 화면이 모두 존재한다
                console.log("after mount");
                console.log(document.querySelectorAll(".row"));
            },
            beforeUpdate(){
                //업데이트 전에는 데이터가 바뀌기 전 상태이다
                console.log("before update");
                console.log(document.querySelectorAll(".row"));
            },
            updated(){
                //업데이트 후에는 데이터가 바뀌고 난 상태이다
                console.log("after update");
                console.log(document.querySelectorAll(".row"));
            }
           }, 
        }).mount("#app");
</script>

# 단방향 연결이란?

- 데이터가 변하면 자동으로 바뀌어서 출력

- 화면에서 값을 변화시킬 방법은 없음

- 계산식도 가능

ex) {{text}}

 

# 양방향 연결이란?

- Vue의 데이터를 변화시킬 수 있는 연결

- v-model 속성을 사용하여 데이터를 지정 (v-model.number : input 폼을 사용하여 입력값을 받는 경우 숫자 또는 문자 무엇을 입력해도 타입이 문자로 나타나게됩니다. 이 경우 타입을 number 즉, 숫자로 자동으로 바꾸어주는 방법으로 v-model.number를 사용할 수 있습니다.)

- 입력창에만 사용할 수 있다(input,select,textarea)

- 한글은 IME 방식이어서 바로 반영이 안되서 추가 입력처리가 필요하다.(v-on:input="text=$event.target.value")

 

#let과 const를 사용하는 이유

let과 const를 사용하게 된 이유에는 var로 선언된 변수의 문제점 때문이다.

1) var로 선언된 변수는 중복 선언이 가능하다.

 var name = "kim";
console.log(name);// kim
var name = "lee";
console.log(name); //lee

위의 예제와 같이 name을 중복해서 선언해도 에러가 발생하지 않는다. 

이는 개발자가 의도치 않게 변수명을 똑같이 선언하고 값을 재할당할 수 있게 되고 문제가 발생할 수 있다.

let과 const는 같은 스코프 내에 중복 선언을 허용하지 않는다.

 

2) 함수 레벨 스코프

var : 함수 레벨 스코프(함수 내부에서 선언한 변수는 지역 변수이며, 함수 외부에서 선언한 변수는 모두 전역변수이다. 전역변수를 남발하여 사용하면 개발에 있어 문제가 될 수 있다.)

let과 const : 블록 레벨 스코프(모든 코드 블록-함수,if문,while문 등) 내에서 선언된 변수는 코드 블록내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉 코드 블록 내부에서 선언한 변수는 지역변수이다.

var i = 10;

for (var i =0; i<3; i++){
	console.log(i) // 0 1 2
}

console.log(i); // 3

for문 안에서도 var 키워드는 전역변수가 되어 기존의 값을 바꿔버린다.

 

3) 변수 호이스팅

 

let과 const의 공통점

1. 변수 중복 선언이 안된다.
2. 블록 레벨 스코프다.

let과 const의 차이점

 

#  MVVM 패턴

 VueJS에서는 대화식 웹 인터페이스를 구축하기 위하여 MVVM 패턴을 사용한다VueJS에서는 대화식 웹 인터페이스를 구축하기 위하여 MVVM 패턴을 사용한다

출처:  Vue

MVVM(Model-View-ViewModel) 구조는 Model과 View를 단방향 또는 양방향으로 연결하기 위한 구조이다. 어떠한 방식으로 연결하느냐에 따라 다양한 변화를 처리할 수 있다.

**동일 프로그램 비교
input 태그에서 작성한 내용을 div 태그에 출력하는 프로그램을 각각 jQuery와 VueJS로 작성하여 비교해본다.

• jQueryjQuery

<html>
    <head>
        <title>jQuery 샘플</title>
    </head>
    <body>
        <input type="text">
        <div></div>
        
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function(){
                
                //input 태그에 input 이벤트를 설정하여 값을 불러온 뒤 div에 출력
                $("input").on("input", function(){
                    var text = $(this).val();
                    $("div").text(text);
                });
                
            });
        </script>
    </body>
</html>

• VueJSVueJS

<html>
    <head>
        <title>VueJS 샘플</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="text">
            <div>{{text}}</div>
        </div>
        
        <script src="https://www.unpkg.com/vue"></script>
        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        text:""
                    };
                },
            });
            app.mount("#app");
        </script>
    </body>
</html>