Posted Updated  minkuen Vue.js3 minutes read (About 413 words)

Vue Cli 실습

[인프런 강의] Vue.js 시작하기 - Age of Vue.js

  • 기존의 서버가 실행되고 있다면 종료 : Ctrl + c

  • 터미널을 새로 연다 → command prompt 터미널

  • 프로젝트 생성 : vue create vue-form

  • 옵션 : vue2 선택

  • 경로 이동 : cd vue-form

  • 서버 실행 : npm run serve

  • 출력된 주소로 이동한다

  • 생성된 프로젝트 확인

  • HelloWorld.vue 제거

  • App.vue에서 코드 작성

    • 첫 생성 상태의 코드 삭제
    • 기본 코드 생성 : vueinit Tab

  • 기본 틀 생성

  • 코드 - App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template lang="">
  <form action="">
    <div>
      <label for="username">id: </label>
      <input id="username" type="text">
    </div>

    <div>
      <label for="password">pw: </label>
      <input id="password" type="password">
    </div>

    <button>login</button>

  </form>
</template>
<script>
export default {
  
}
</script>
<style lang="">
  
</style>
  • 화면

Untitled

  • 입력 창과 컴포넌트에 같은 값이 담기도록 연결한다
    • 태그 출력 부에 v-model 사용
    • JS 부에 함수 생성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<label for="username">id: </label>
<input id="username" type="text" v-model="username">

...
...

<script>
export default {
  data: function(){
    return {
      username: ''
      , password: ''
    }
  }
  
}
</script>
  • 입력한 값과 같은 값이 컴포넌트에 담긴다

Untitled

  • login 버튼 클릭 → 두 입력 창의 값을 들고 오게 해야 한다
  • 버튼에 type=”submit” 추가
  • 함수 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
<button type="submit">login</button>

... 
...
...

, methods:{
      submitForm: function(event){
        // 버튼 클릭시 새로 고침 되는 것을 막는다
        event.preventDefault();
        console.log(this.username, this.password);
      }
  }
  • 잠시 서버 종료 : Ctrl + c
  • axios 다운로드 : npm i axios

Untitled

  • axios import : import axios from ‘axios’;
  • 전체 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
  <form v-on:submit.prevent="submitForm">
    <div>
      <label for="username">id: </label>
      <input id="username" type="text" v-model="username">
    </div>
    <div>
      <label for="password">pw: </label>
      <input id="password" type="password" v-model="password">
    </div>
    <button type="submit">login</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  data: function () {
    return {
      username: ''
      , password: ''
    }
  },
  methods: {
    submitForm: function () {
      // 새로고침을 막는 명령어
      // event.preventDefault();
      console.log(this.username, this.password);
      var url = 'https://jsonplaceholder.typicode.com/users';
      var data = {
        username: this.username,
        password: this.password
      }
      axios.post(url, data)
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
}
</script>

<style></style>
  • 결과
  • 입력한 값이 버튼 클릭과 동시에 넘어감을 확인

Untitled

Posted Updated  minkuen Vue.js5 minutes read (About 791 words)

Vue Cli

[인프런 강의] Vue.js 시작하기 - Age of Vue.js

Vue CLI 공식 사이트 링크

CLI란?

  • CLI = Command Line Interface

설치 방법

  • 구글링 : vue cli
  • Vue CLI 공식페이지 → Installation → 설치 코드 복사

Untitled

  • VSCode → 터미널 → 새 터미널
  • 버전 확인
1
2
3
4
// 10 이상인 버전이어야 한다
node -v
// 6 이상인 버전이어야 한다
npm -v
  • 설치 코드 복사 붙여넣기
1
2
3
4
npm install -g @vue/cli

// 권한이 없다면 다음 코드 실행
sudo npm install -g @vue/cli
  • 설치에 시간이 걸릴 수 있다. 대기한다.

Untitled

CLI 버전별 차이

  • VUE CLI 2.X

    • vue init ‘프로젝트 템플릿 유형’ ‘프로젝트 폴더 위치’
    • vue init webpack-simple ‘프로젝트 폴더 위치’

  • VUE CLI 3.X

    • vue create ‘프로젝트 폴더 위치’
    • 더 간단하다

CLI 사용법

  • VSCode → 터미널 → 새 터미널 → Command Prompt 터미널
  • 생성 : vew create [프로젝트 폴더 위치]

Untitled

  • Vue CLI 버전 4.5 이상이라면 Vue 2 선택한다

Untitled

  • 생성 성공 시 출력되는 메세지

Untitled

  • vue-cli 라는 프로젝트가 성공적으로 생성되었다.
  • 다음 명령으로 실행시킬 수 있다.
1
2
$  cd vue-cli
$  npm run serve
  • 명령 실행 후에 출력되는 주소로 이동

Untitled

  • 다음과 같이 출력되면 성공

Untitled

CLI로 생성한 프로젝트 폴더 구조 확인 및 main.js 파일 설명

  • 위 과정을 거치면서 다음과 같이 vue-cli 프로젝트가 생성되었다

Untitled

Vue 파일 구조

  • 한 파일에 HTML , JS, CSS 가 모두 들어있다
1
2
3
4
5
6
7
8
9
10
11
<template>
    <!-- HTML -->
</template>

<script>
    // Java Script
</script>

<style>
    /* CSS */
</style>

개발할 때 고려해야 할 점

  • VSCord 플러그인 설치

    • Vue 3 Snippets
    • Vue 파일에서 ! Tab 과 같은 역할을 한다.
    • vueinit 입력하고 Tab

  • 서버 실행 명령에 의해 출력되는 주소에 App.vue 의 코드가 반영된다

  • 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template lang="">
    <div>
        app 
    </div>
</template>

<script>
export default { 
    
}
</script>

<style lang="">  
</style>
  • 결과

Untitled

script의 문자 데이터를 화면에 출력

  • 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template lang="">
    <div>
        {{ str }}
    </div>
</template>

<script>
export default { 
    data:  function(){
        return{
            str: 'hi'
        }
    }
}
</script>

<style lang="">
</style>
  • 결과

Untitled

싱글 컴포넌트 체계에서 컴포넌트 등록하기

  • components 폴더 하위에 생성해야 한다

  • 파일 생성 : AppHeader.vue

  • 코드 - AppHeader.vue

  • ‘renew’ 라는 이름으로 $emit 한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    <header>
        <h1>{{ propsdata }}</h1>
        <button v-on:click="sendEvent">send</button>
    </header>
</template>

<script>
export default {
    props: ['propsdata']
    ,methods: {
        sendEvent: function () {
            this.$emit('renew');
        }
    }
}
</script>

<style></style>
  • 코드 - App.vue
  • AppHeader.vue의 $emit을 받아서 renewStr 함수를 실행
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
    <div>
        <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
        <app-header v-bind:propsdata="str" v-on:renew="renewStr"></app-header>
    </div>
</template>

<script>
// 사용할 컴포넌트를 import 한다
import AppHeader from './components/AppHeader.vue';

export default {
    data: function () {
        return {
            str: 'Header'
        }
    },
    components: {
        'app-header': AppHeader
    },
    methods: {
        renewStr: function () {
            this.str = 'hi';
        }
    }
}
</script>

<style></style>
  • 결과
  • 버튼 클릭 → 문자 Header가 hi로 변경된다

Untitled

템플릿

Posted Updated  minkuen Vue.js4 minutes read (About 625 words)

Vue 라우터

[인프런 강의] Vue.js 시작하기 - Age of Vue.js

뷰 라우터

  • 뷰 라이브러를 이용하여 싱글 페이지 에플리케이션을 구현할 때 사용하는 라이브러리

싱글 페이지 에플리케이션

  • 싱글 페이지 애플리케이션은 서버로부터 완전한 새로운 페이지를 불러오지 않는다
  • 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다

뷰 라우터 사용법

Untitled

  • 파일 작성 : router.html
    • Vue.js 가 위
    • Vue router가 아래
    • 순서가 중요하다!
1
2
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
  • 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    <script>
        var routerOne = new **VueRouter**({

        });

        new Vue({
            el: '#app'
            , **router**: routerOne
        });

    </script>
  • 결과
  • router 확인 가능

Untitled

Router 속성

  • routes : 페이지의 라우팅 정보. 배열 형태로 담긴다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var routerOne = new VueRouter({
            // 페이지의 라우팅 정보
            routes : [
                // 로그인 페이지 정보
                {
                    // 페이지의 url
                    path: '/login'
                    // 해당 url에서 표시될 컴포넌트
                    , component: LoginComponent
                }
                // 메인 페이지 정보
                , {
                    path: '/main'
                    , component: MainComponent
                }
            ]

        });
  • 코드
  • router-view 라는 설정되어 있는 태그를 사용하는 듯하다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div id="app">
        <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    <script>
        var LoginComponent ={
            template : '<div>login</div>'
        } 

        var MainComponent ={
            template : '<div>main</div>'
        }

        var routerOne = new VueRouter({
            // 페이지의 라우팅 정보
            routes : [
                // 로그인 페이지 정보
                {
                    // 페이지의 url
                    path: '/login'
                    // 해당 url에서 표시될 컴포넌트
                    , component: LoginComponent
                }
                // 메인 페이지 정보
                , {
                    path: '/main'
                    , component: MainComponent
                }
            ]

        });

        new Vue({
            el: '#app'
            , router: routerOne
        });

    </script>
  • 결과
  • 주소 창에 입력해줘야 한다
    • login
    • main

Untitled

라우터 링크

  • 링크로 사용하는 라우터
  • 코드
    • 위 코드에서
      태그 부분만 변경한다
    • router-view 와 같이 설정되어 있는 고유의 태그인 router-link 사용한다
1
2
3
4
5
6
7
8
<div id="app">
    <div>
         <!-- <a href="" ...> 로 쓰는 앵커 태그와 같은 역할  -->
        <router-link to="/login">Login</router-link>
        <router-link to="/main">Main</router-link>
    </div>
    <router-view></router-view>
</div>

참고자료

1
2
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
Posted Updated  minkuen Vue.js9 minutes read (About 1294 words)

Vue 컴포넌트

[인프런 강의] Vue.js 시작하기 - Age of Vue.js

Vue 컴포넌트

  • 화면의 영역을 구분하여 개발하는 기능
  • 코드의 재사용성이 올라가고 빠르게 화면을 제작 가능

Untitled

  • 컴포넌트 등록 코드
1
Vue.component('컴포넌트 이름', '컴포넌트 내용');

전역 Component

  • 파일 생성 : component.html
  • 직접 태그를 생성할 수 있다
  • 태그 내에 생성한 태그 적용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
    <app-header></app-header>
		<app-content></app-content>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	// 전역 컴포넌트
   Vue.component('app-header', {
        template: '<h1>Header</h1>'
    });

    Vue.component('app-content', {
        template: '<div>content</div>'
    })

    new Vue({
        el: '#app'
    });

</script>
  • 결과
  • Root 아래로 하위 Component 가 생성되었다.

Untitled

지역 Component

  • 실제로 가장 많이 사용되는 방식
  • 문법
1
2
3
4
5
6
7
8
9
10
// 전역 컴포넌트
Vue.component('컴포넌트 이름', 컴포넌트 내용);

// **지역 컴포넌트**
new Vue({
    el: '#app',
    components: {
        '컴포넌트 이름' : 컴포넌트 내용
    }
});
  • 실제 지역 컴포넌트 등록, 출력
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
        <app-footer></app-footer>
</div>

<script>
	new Vue({
	      el: '#app',
				// 지역 컴포넌트 등록 방식
	      components: {
	          // '컴포넌트 이름' : 컴포넌트 내용
	          'app-footer': {
	              template: '<footer>footer</footer>'
	          }
	      }
	  });
</script>
  • 결과

Untitled

Component 통신

  • 프롭스 속성 : 상위에서 하위로는 데이터를 내려줌
  • 이벤트 발생 : 하위에서 상위로는 이벤트를 올려줌

Untitled

  • 데이터의 흐름을 추적할 수 있다.
    • 이벤트는 올라간다
    • 데이터는 내려간다

Untitled

실습

  • 데이터를 내려본다
  • 파일 생성 : props.html
  • 코드 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    var appHeader = {
        template: '<h1>header</h1>'
    }

  new Vue({
    el: '#app',
    components: {
        'app-header': appHeader
    },
    data: {
        message: 'hi'
    }
  })

</script>
  • root에서 관리하는 데이터 (메세지 : ‘hi’ ) 가 보인다
  • 해당 데이터를 app-header 컴포넌트에 내려볼 예정이다

Untitled

  • 문법
  • v-bind: 프롭스 속성 이름=“상위 컴포넌트의 데이터 이름”
1
2
3
<div id="app">
   <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
</div>
  • 코드
  • 데이터를 받을 변수 이름을 설정해주는 듯하다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
    <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
    <app-header v-bind:propsdata="message"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var appHeader = {
        template: '<h1>header</h1>'
        , **props: ['propsdata']**
    }

  new Vue({
    el: '#app',
    components: {
        'app-header': appHeader        
    },
    data: {
        message: 'hi'
    }
  })

</script>
  • 결과
  • Root의 데이터가 AppHeader로 잘 내려갔다

Untitled

Props 데이터

데이터 바인딩

1
2
3
4
var appHeader = {
    template: '<h1>{{ propsdata }}</h1>'
    , props: ['propsdata']
}
  • 결과
  • Root에서 수정 시, 화면, 하위 컴포넌트에 모두 반영된다

Untitled

여러 데이터를 서로 다른 하위 컴포넌트에 내려보내기

  • new Vue의 데이터 안에 변수 생성
  • 태그 등록 부에 설정 추가
  • 태그 출력 부에 props 설정 추가
  • 데이터 바인딩
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
            <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
            <app-header v-bind:propsdata="message"></app-header>
            <app-content v-bind:propsdata="num"></app-content>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>
            var appHeader = {
                template: '<h1>{{ propsdata }}</h1>'
                , props: ['propsdata']
            }
            var appContent = {
                template : '<div>{{ propsdata }}</div>'
                , props: ['propsdata']
            }

          new Vue({
            el: '#app',
            components: {
                'app-header': appHeader
                , 'app-content': appContent
            },
            data: {
                message: 'hi'
                , num: 10
            }

          })

        </script>
  • 결과

Untitled

이벤트 올리기

  • 데이터는 내려 보낸다.
  • 이벤트는 올려 보낸다.
  • 파일 생성 : event-emit.html
  • 문법 : **v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"**
  • 코드 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
  <app-header></app-header>
</div>      
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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
    }
});

</script>

  • 결과

  • Vue → event 에서 확인가능

Untitled

Untitled

이벤트 올리기2

  • 버튼 클릭시 log 출력 : hihi
  • pass 라는 이벤트 발생을 조건으로 태그에 설정 추가
  • logText라는 mothods의 실행을 태그에 설정 추가
  • 문법 : **v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"**
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="app">
    <!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
    <app-header v-on:pass="logText"></app-header>
</div>      
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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('hihi');
            }
        }
    });

</script>
  • 결과

Untitled

이벤트 : 숫자 증가

  • 버튼 클릭마다 숫자를 1만큼 늘려 본다
  • 할 일
    • 해당 기능을 가질 버튼을 만든다
    • new Vue의 data에 숫자 데이터를 만든다
    • new Vue의 methods에 숫자 증가 함수를 만든다
    • 태그 출력 부에 조건과 실행 함수를 설정해준다
  • 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div id="app">
        <!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
        <app-header v-on:pass="logText"></app-header>
        <app-content v-on:increase="increaseNumber"></app-content>
    </div>      
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>'
            , methods: {
                passEvent: function(){
                    this.$emit('pass');
                }
            }
        }

        var appContent = {
                template: '<button v-on:click="addNumber">add</button>'
                , methods: {
                    addNumber : function(){
                        this.$emit('increase');
                    }
                }
            }

        new Vue({
            el: '#app'
            , components: {
                'app-header': appHeader
                , 'app-content' : appContent
            }
            , methods: {
                logText: function(){
                    console.log('hihi');
                }
                , increaseNumber: function () {
                    this.num = this.num + 1;
                } 
            }
            , data: {
                num: 10
            }
        });

    </script>
  • 결과
  • 버튼 클릭할 때마다 num값이 증가한다
  • 단 event 메뉴를 갔다 와야 변경된 점이 반영된다

Untitled

같은 레벨에서의 컴포넌트 통신 방법

  • 같은 레벨끼리 바로 통신은 불가능
  • Root를 거쳐서 통신해야 한다

Untitled

  • 파일 작성 : component-same-level.html
  • 1단계 : 코드 작성- Root로 숫자 10 보내기
    • this.num을 이용해 컴포넌트의 mothods에 담긴 값 10을 넘겨준다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="app">
        <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
			  <app-content v-on:pass="deliverNum"></app-content>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            template: '<div>header</div>'
        }

        var appContent = {
            template: '<div>content<button v-on:click="passNum">pass</button></div>'
            , methods: {
                passNum: function(){
                    this.$emit('pass', 10);
                }
            }
        }

        new Vue({
            el: '#app'
            , components: {
                'app-header': appHeader
                , 'app-content': appContent
            }
            , data: {
                num: 0
            }
            , methods: {
                deliverNum: function(value){
                    this.num = value;
                }
            }
        })

    </script>
  • 코드 작성
  • 2단계 : 코드 작성- Root에서 해당 컴포넌트로 숫자 10 보내기
    • props속성을 정의해주고 Root에서 10을 넘겨준다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div id="app">
        <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
        <app-header v-bind:propsdata="num"></app-header>
        <app-content v-on:pass="deliverNum"></app-content>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script> 
        var appHeader = {
            template: '<div>header</div>'
            , props: ['propsdata']

        }

        var appContent = {
            template: '<div>content<button v-on:click="passNum">pass</button></div>'
            , methods: {
                passNum: function(){
                    this.$emit('pass', 10);
                }
            }
        }

        new Vue({
            el: '#app'
            , components: {
                'app-header': appHeader
                , 'app-content': appContent
            }
            , data: {
                num: 0
            }
            , methods: {
                deliverNum: function(value){
                    this.num = value;
                }
            }
        })

    </script>
  • 결과
  • appHeader 컴포넌트에 10이 전달되었다

Untitled

Posted Updated  minkuen Vue.js2 minutes read (About 341 words)

Vue 인스턴스

[인프런 강의] Vue.js 시작하기 - Age of Vue.js

인스턴스

  • 인스턴스는 Vue로 개발할 때 필수로 생성해야 하는 코드
1
new Vue();
  • 생성 후에 콘솔 창에서 확인 가능
1
2
var vm = new Vue();
console.log(vm);
  • 파일 생성 : instance.html
  • 코드 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
        <!--  -->
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hi' 
            }
        });
            
    </script>
  • 결과

Untitled

생성자 함수

  • 함수 이름의 첫 이니셜이 대문자이다
  • 콘솔 창에서 코딩
1
2
3
4
5
6
function Person(name, job){
	this.name = name;
	this.job = job;	
}

var p = new Person('josh', 'developer');

Untitled

  • 미리 함수를 정의한다
  • 정의된 함수를 언제든 가져다 사용 가능하다
  • 이것이 new Vue()를 사용하는 이유

Untitled

인스턴스 속성

  • 인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다
1
2
3
4
5
6
7
8
9
new Vue({
	el: ,
	template: ,
	data: ,
	methods: ,
	created: ,
	watch: ,

});
  • el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
  • template : 화면에 표시할 요소(HTML, CSS 등)
  • data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성
  • methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
  • created : 뷰의 라이프 사이클과 관련된 속성
  • watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
Posted Updated  minkuen Vue.js6 minutes read (About 900 words)

Vue.js 기초 개념

[인프런 강의] Vue.js 시작하기 - Age of Vue.js

Vue는 무엇인가?

  • View = HTML. 브라우저에서 사용자에게 보여지는 요소들 (버튼, 입력 창 등)
  • DOM = HTML 은 DOM을 이용해 JAVA Script로 조작할 수 있게 구성된다.
  • Vue
    • DOM Listneners = View 의 이벤트를 청취하여 JavaScript의 데이터를 바꿔주거나 특정 로직을 실행한다
    • Data Biindings = JavaScript에서 관련 로직을 실행하고 View에 반영한다

Untitled

실습1

  • 폴더 생성

  • 파일 생성 : web-dev.html

  • 기본 코드 생성 : ! + TAB

  • 패널 토글 : *Ctrl + *

  • 쉽게 작성 예시 : div#app 입력한 후에 Enter

  • console.log 가 div 태그의 정보를 받아와서 출력한다

1
2
3
4
5
6
7
8
9
10
11
<div id="app"></div>

  <script>
      
      var div = document.querySelector('#app');
      console.log(div);
			div.innerHTML = 'hello world';

			str = 'hello world!!!';  // 여기까지만 작성하면 !!!는 반영되지 않는다
      div.innerHTML = str;
  </script>
  • 서버 실행
  • F12
  • Console 칸에서 결과 확인

Untitled

실습2

1
2
3
4
Object.defineProperty(대상 객체, 객체의 속성, {

            
        })
  • 사용 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app"></div>

    <script>
      var div = document.querySelector('#app');
      var viewModel = {};

      Object.defineProperty(viewModel, 'str', {
            // 속성에 접글했을 때의 동작을 정의
            get: function(){
                console.log('접근');

            },
            // 속성에 값을 할당했을 때의 동작을 정의
            set: function(newValue){
                console.log('할당', newValue); 

            }

          })
    </script>
  • 결과

Untitled

  • set:function 수정
1
2
3
4
5
// 속성에 값을 할당했을 때의 동작을 정의
  set: function(newValue){
      console.log('할당', newValue); 
      **div.innerHTML = newValue;**
  }
  • 결과
  • 실행 결과 곧바로 화면에 반영!
  • data binding
    • = Re Activity 특성

Untitled

  • 위에서 작성한 코드를 함수에 담는다
  • 그 함수를 즉시 실행 함수 문법에 담는다 : (function() { … } )();
  • div.innerHTML = newValue; 부분을 render(newValue)로 대체한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function() {
            function init() {

                Object.defineProperty(viewModel, 'str', {
                    // 속성에 접글했을 때의 동작을 정의
                    get: function () {
                        console.log('접근');

                    },
                    // 속성에 값을 할당했을 때의 동작을 정의
                    set: function (newValue) {
                        console.log('할당', newValue);
                        // div.innerHTML = newValue;
                        **render(newValue);**
                    }
                });
            }

            function **render**(value) {
                div.innerHTML = value;
            }

            init();

        })();
  • 결과

Untitled

Vue 개발자 도구 사용법

  • getting-started → index.html
  • vue.js 스크립트를 들고 와서 실행하는 간단한 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting Started</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js'
        }
      })
    </script>
  </body>
</html>

  • 라이브 서버 실행

  • Vue 개발자 도구 확인

    • Vue → Components

    Untitled

  • data 변경 가능

    • 화면에 반영된다

Untitled

Slot

랜더링(Rendering)

  • 읽어들인 코드를 웹 표준에 맞게, 화면에 적절히 그려내는 중요 구성요소
  • 즉, HTML, CSS, JS 등을 통해 만든 페이지가 브라우저에서 보여지게 되는 것
  • https://velog.io/@plum3526/랜더링Rendering
Posted Updated  minkuen Vue.js / setting3 minutes read (About 450 words)

Vue.js 기초 환경설정

[인프런 강의] Vue.js 시작하기 - Age of Vue.js

사전 설치 목록

  • chrome 브라우저 설치
  • Visual Studio 설치
  • Node.js 설치
    • LTS 선택해서 다운로드
  • Vue.js devtools
    • 크롬 확장 프로그램

vue.js 강의 수강 기록

git repository

VSCode 확장 프로그램(플러그인) 설치

  • 좌측 메뉴에서 extention 클릭
  • 설치할 프로그램 검색 후 설치
  • Vetur
    • Vue tooling for VS Code
  • Material Icon Theme
    • 아이콘 테마
  • night owl
    • 코드 강조
  • Live server
    • Launch a development local Server with live reload feature for static & dynamic pages
    • 정적 및 동적 페이지에 대한 실시간 로드 기능이 있는 개발 로컬 서버 시작
  • Vue 3 Snippets
    • Vue 파일에서 ! Tab 과 같은 역할을 한다.

Untitled

필수는 아니지만 있으면 좋은 플러그인

  • ESLint
    • Integrates ESLint JavaScript into VS Code.
  • Prettier
    • Code formatter using prettier
  • Auto Close Tag
    • Visual Studio IDE 또는 Sublime Text와 동일한 HTML/XML 닫기 태그 자동 추가
  • Atom Keymap
    • Popular Atom keybindings for Visual Studio Code

테마 관련 플러그인 적용

  • 설치 후 VSCode 다시 시작
  • extension
  • 설치한 테마 플러그인 → 테마 설정

Untitled

Live Server 사용

  • 확인할 html 파일을 우 클릭 → Open with Live Server

Untitled

  • 결과

Untitled

Vue 개발자 도구 ( Vetur )

  • html 페이지 출력 한 곳에서 우클릭 → 검사 or F12
  • Vue 클릭

Untitled

  • 확인 가능

Untitled

Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×