수업내용

20230616 수업내용🫡🫡🫡

titlejjk 2023. 6. 16. 10:37

오늘의 첫수업은 이클립스를 이용한 Vue2수업!

 

서버에서 바꿔준것이 아닌 사용자입장에서 바꿔진 것을 클라이언트사이드렌더링이라 한다. 

미리만들어진 틀을 원하는 곳에 끼워넣어 만들어 쓸수 있다.

이런 방식은 compoents라는 방에 object를 만들어주고 그 object안에는 사용 할 option을 넣어준다.

your-component의 '안녕하세요'가 출력되는 과정을 설명하는 그림

props는 프로퍼티스인데 이는 여러개를 전달 가능하다.

friends-componet의 작동원리

 

components는 하나이지만 data를 friends와 friend2를 나누어서 출력을 두개로 사용할 수 있다.

Vue객체는 하나가 아닌 여러개를 나누어 사용도 가능하다.

그리고 기존에는 data에 methods를 따로 사용했었는데 data에 funciton type도 넣을 수 있다.

두번째 app2에 function return greet:"안녕하세요!"는 object type(Model)이다.

component의 model을 정의 할때는 두번째 코드 처럼 작성해야하며, app2를 줄인 것은 app3이다.

 

재사용 가능한 컴포넌트를 전역으로 정의도 가능하다.

더보기

Vue.component("컴포넌트 이름",{컴포넌트 데이터});

컴포넌트 자체적으로 자체적인 동작, 외부로부터 데이터받기 등도 가능하다.

카멜케이스인 props를 사용할 때에는 v-bind뒤에 케밥케이스로 사용해야한다. 이유는 모룸

props:["imageinfo"]를 전달 받아서.src/.caption을 사용하고 있는데 이것을 보면imageinfo는 object를 전달 받아 사용해야한다는 것을 할수 있다.

<img src = "{{모델명}}">형태로는 사용이 불가능하고 아래와 같이 v-bind:src="모델명"형식을 사용해야 한다.

<img v-bind:src="path"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_example.html</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div class="container" id="app">
        <h1>component 예제</h1>
        <div class="row">
            <figure-component 
                v-for="(item, index) in imageList"
                v-bind:imageinfo="item"
                v-bind:key="index"></figure-component>
        </div> 
        <h1>bind:src 가 필요한 이유</h1>
        <p>{{path}}</p>
        <p v-text="path"></p>
        <!-- 
        	<img src="{{모델명}}" >  형태로는 사용이 불가하고 
        	아래와 같이 v-bind:src="모델명" 형식을 사용해야 한다.
         -->
        <img v-bind:src="path"/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component("figure-component",{
            template:`
            <div class="col">
                <figure class="figure">
                    <img v-bind:src="imageinfo.src" class="figure-img img-fluid rounded">
                    <figcaption class="figure-caption">{{imageinfo.caption}}</figcaption>
                </figure>
            </div>
            `,
            props:["imageinfo"]
        });

        let app=new Vue({
            el:"#app",
            data(){
                return {
                    imageList:[
                        {src:"images/image1.png", caption:"어쩌구... 저쩌구..."},
                        {src:"images/image2.png", caption:"어쩌구... 저쩌구..."},
                        {src:"images/image3.png", caption:"어쩌구... 저쩌구..."},
                        {src:"images/image4.png", caption:"어쩌구... 저쩌구..."}
                    ],
                    path:"images/kim1.png"
                };
            }
        });
    </script>
</body>
</html>

vue는 요기까지. 개념이 충분하지 않은 상태로 들으니 이해는 가지만 코드를 써내려가라면 못쓰겠다;;