Vue.js 기초 문법 정리

📖 인프런 강의 :: Vue.js 시작하기 - Age of Vue.js 에서 배운 내용을 기록해보았다.

 

cdn을 이용해 vue.js import

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

 

vue 인스턴스 생성

<div id="app">
    {{ message }} <!-- (Data Binding) hi가 출력됨 -->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'hi'
        }
    });
</script>

 

컴포넌트

<div id="app">
    <app-header></app-header>
    <app-content></app-content>
    <app-footer></app-footer>
</div>

<div id="app2">
    <app-header></app-header>
    <app-footer></app-footer> <!-- 지역 컴포넌트 이므로 사용 불가 -->
</div>

<script>
    // 전역 컴포넌트 등록방식
    // Vue.component('컴포너트 이름', 컴포넌트 내용);
    Vue.component('app-header', {
        template: '<h1>Header</h1>'
    });
    Vue.component('app-content', {
        template: '<div>content</div>'
    });

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

    new Vue({
        el: '#app2' 
    });
</script>

 

props

상위 컴포넌트 -> 하위 컴포넌트로 전달

v-bind:하위 컴포넌트 props 속성이름="상위 컴포넌트의 데이터 이름"

<div id="app">
    <app-header v-bind:propsdata="message"></app-header>
    <app-content v-bind:propsdata="num"></app-content>

</div>

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

    var appContent = {
        template: '<div>{{ propsdata }}</div>',
        props: ['propsdata'] // props 이름 정의
    }

    new Vue({
        el: '#app',
        components: {
            'app-header' : appHeader,
            'app-content' : appContent
        },
        data: {
            message: 'hi',
            num : 10
        }
    });
</script>

상위 컴포넌트 data(message) 선언 > v-bind를 통해 하위 컴포넌트로 전달 > 하위 컴포넌트에서 전달받을 props 정의(propsdata) > 전달받은 props 출력 ({{ propsdata }})

 

event-emit

하위 컴포넌트 -> 상위 컴포넌트 이벤트 전달

v-on:하위 컴포넌트에서 발생한 이벤트 이름($emit으로 전달한 이름)="상위 컴포넌트 메서드 이름"

<div id="app">
    <app-header v-on:pass="logText"></app-header>
    <app-content v-on:increase="addNum"></app-content>
    <p> {{ num }} </p>
</div>

<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>',
        props: ['propsdata'],
        methods: {
            addNumber: function() {
                this.$emit('increase');
            }
        }
    }

    new Vue({
        el: '#app',
        components : {
            'app-header' : appHeader,
            'app-content' : appContent
        },
        methods: {
            logText: function() {
                console.log('HIHI');
            },
            addNum: function() {
                this.num++;
            }
        },
        data: {
            num: 10
        }
    });
</script>

하위 컴포넌트에서 메소드 호출(passEvent) > 상위 컴포넌트로 이벤트 전달($emit('pass')) > 하위 컴포넌트로부터 전달받은 메소드로 상위컴포넌트 메소드(v-on:pass="logText") 호출(logText)

 

router

<div id="app">
    <!-- url/login 입력 시 login 컴포넌트가 표시될 영역 -->
    <router-view></router-view>

    <div>
        <!-- <a href="/login">Login</a> -->
        <router-link to="/login">Login</router-link>

        <router-link to="/main">Main</router-link>
    </div>
</div>

<!- 라우터 CDN -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    var LoginComponent = {
        template: '<div>login</div>'
    }

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

    var router = new VueRouter({
        mode: 'history', // url해쉬태그(#) 제거
        // 페이지의 라우팅 정보
        routes: [
            {
                // 페이지의 url이름
                path: '/login',
                // 해당 url에서 표시될 컴포넌트
                component: LoginComponent
            },
            {
                path: '/main',
                component: MainComponent
            }
        ]
    });

    new Vue({
        el: '#app',
        router: router
    });
</script>

 

axios

axios는 promise 기반

<div id="app">
  <button v-on:click="getData">get user</button>
  <div>
    {{ users }}
  </div>
</div>

<!-- axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      users: []
    },
    methods: {
      getData: function() { 
        var vm = this;
        axios.get('https://jsonplaceholder.typicode.com/users/')
          .then(function(response) {
            console.log(response.data);
            // this.users로 하면 비동기처리 후 바뀐 실행 컨택스트가 this 주체임
            // 비동기 처리 전에는 new Vue가 this로 되어있음
            vm.users = response.data;
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    }
  })
</script>

 

뷰 디렉티브(v-bind, v-if, v-show, v-model)

v-bind로 해당 태그의 id, class 설정 가능

v-if는 DOM에서 해당 구문을 제거하고 v-show는 css display:none;으로 설정(DOM에서 해당 구문 표시됨)

<div id="app">
    <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
    
    <div v-if="loading">
        Loading...
    </div>
    <div v-else>
        teest user has been logged in
    </div>
    
    <div v-show="loading">
        test
    </div>

    <input v-model="message" placeholder="edit me" type="text">
    <p>Message is : {{message}}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            uuid: 'abc1234',
            name: 'text-blue',
            loading: true,
            message: ''
        }
    });
</script>

 

watch vs. computed

단순 text 입력 또는 단순 계산, validation 등은 computed 사용(권장)

매번 수행되기 부담스러운 로직 등에서 watch 사용

<div id="app">
  {{ doubleNum }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      num: 10
    },
    computed: {
      doubleNum: function() {
        return this.num * 2;
      }
    },
    watch: {
      num: function(newValue, oldValue) {
        this.fetchUserByNumber(newValue);
      }
    },
    methods: {
      fetchUserByNumber: function(num) {
        console.log(num);
      }
    }
  });

 

Vue CLI

vue cli 설치를 위해선 nodejs와 npm이 설치되어 있어야 한다.

터미널 창에 해당 명령어를 입력한다.

npm install -g @vue/cli
#OR
yarn global add @vue/cli

권한 문제로 오류가 발생할 경우 명령어 앞에 sudo 키워드를 추가한다.

 

Vue CLI 3 프로젝트 생성

vue create 프로젝트_이름

생성한 프로젝트 실행

cd 프로젝트_위치
npm run serve

npm run serve :: 프로젝트\package.json 문서의 script에 정의된 serve 명령어를 수행