Vue 기초 - newlife-js/Wiki GitHub Wiki

Vue 문법 찾기

https://vuejs.org/ 에서 검색

인스턴스 : 각 tag에 연결되는 Vue 객체

// Vue library를 CDN 방식으로 설치하는 script
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
new Vue(){
    el: '#app',
    data: {
        message: 'hi',
        num: 10
      }
};

Component : 웹의 각각 화면 frame

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

Props : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달(Vue -> Root 컴포넌트)

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

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

Event emit : 하위 컴포넌트에서 상위 컴포넌트로 event 전달

<div id="app">
    <app-header v-on:pass="logText"></app-header>
</div>

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

Router : 다른 Component를 link로 연결하기 위한 방법

// router 설치(CDN)
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <div>
      // a tag와 같음
      <router-link to="/login">Login</router-link>
    </div>
    // router-link에서 클릭된 페이지(component)를 router-view에 표시
    <router-view></router-view>
</div>

var LoginComponent = {
      template: '<div>login</div>'
}

var router = new VueRouter({
      // 페이지의 라우팅 정보      
      routes: [
        {
          // 페이지의 url
          path: '/login',
          // name: 'login',
          // 해당 url에서 표시될 컴포넌트
          component: LoginComponent
        }
      ]
    });

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

Axios : Vue에서 HTTP 비동기 통신을 위한 라이브러리

<script src="https://unpkg.com/axios/dist/axios.min.js"></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);
              vm.users = response.data;
              // 이 안에서 this를 직접 쓰면 axios 내의 this이므로 변수로 만들어서 쓴다.
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
})

네트워크 패널 보기

템플릿 문법

1. 데이터 바인딩(mustach tag)

<div> {{ message }} </div>
  • computed 속성 : data 변수에 logic을 더한 값
<div>{{ doubleNum }}</div>
new Vue({
            el: '#app',
            data:{
                num: 10,
                uuid: 'abc1234'
            },
            computed:{
                doubleNum: function(){
                    return this.num * 2;
                }
            }

        })
  • v-bind:id="someid" -> someid에 정의된 값이 id로 변환되어 바인딩됨

id를 class 등으로 바꿔 쓸 수 있음

// 아래 두 line은 같은 것을 뜻함.
// data 내부의 uuid가 바뀌면 p tag의 id도 변경됨.
<p v-bind:id="uuid">{{ num }}</p>
<p id="abc1234">{{ num }}</p>

2. 디렉티브(v-bind를 제외한 v-~~ 속성들, v-if, v-else, v-show 등)

<div> 
  Hello <span v-if="show">Vue.js</span>
</div>
  • v-if는 아예 DOM이 사라지지만, v-show는 style="display: none;"인 상태로 남아있음.
<div id="app">
        <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
        <p id="abc1234">{{ num }}</p>
        <p>{{ doubleNum }}</p>
        <div v-if="loading">
            Loading...
        </div>
        <div v-else>
            test user has been logged in
        </div>
        <div v-show="loading">
            Loading...
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                num: 10,
                uuid: 'abc1234',
                name: 'text-blue',
                loading: true
            },
            computed:{
                doubleNum: function(){
                    return this.num * 2;
                }
            }

        })
    </script>

3. 메소드

methods:{메소드이름 : function(){}, }

<button v-on:click="메소드이름 ">click me</button>
<input type="text" v-on:keyup.enter="메소드이름 ">

4. watch

특정 data 변수가 바뀔 때마다 method를 실행할 수 있도록 하는 속성

data:{
    num: 10,
},
watch: {
    num: function() {
        this.logText();
    },
    num: function(newValue, oldValue) { // 바뀐 값을 newValue, 이전 값을 oldValue로 받을 수 있음
         this.fetchUserByNumber(newValue);
    }
},
methods:{
    addNum: function() {
        this.num += 1;
    },
    logText: function() {
        console.log('changed');
    }
}
  • computed에 비해 더 무거운 함수를 다룰 때 씀 참고자료

5. computed

data가 바뀌었을 때 logic을 구현할 수도 있지만, 메소드를 class binding으로 받을 수도 있음.

 <style>
  .warning {
    color: red;
  }
  </style>
</head>
<body>
  <div id="app">
    <p v-bind:class="errorTextColor">Hello</p> // 아래와 같음
    <p v-bind:class="{ warning : isError }">Hello</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        isError: false
      },
      computed: {
        errorTextColor: function() {
          return this.isError ? 'warning' : null;
        }
      }
    });
  </script>

Vue CLI

vue create '프로젝트 이름'

※cli 4.X 버전에서는 create했을 때 2버전을 선택해야함.

Vue CLI v4.5.14
? Please pick a preset: Default ([Vue 2] babel, eslint)

npm run serve == vue-cli-service serve @package.json

Vue 프로젝트 파일 구조

  1. 빌드된 파일은 public/index.html의 body에 inject됨.

  2. @src/main.js

new Vue({
  render: h => h(App), //import한 App(from ./app.vue)이라는 component를 연결함
}).$mount('#app')

$mount('#app') == el:'#app'

  1. .vue 파일(싱글 파일 컴포넌트) : HTML, Javascript, CSS를 한 파일에 정의
  • vu + tab 입력
<template>
  <!-- HTML -->
</template>

<script>
export default {
    // Javascript
}
</script>

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

@App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> // == <hello-world>  </hello-world>
  </div>
</template>

import HelloWorld from './components/HelloWorld.vue'

export default {
 // 인스턴스 옵션 속성 or 컴포넌트 옵션 속성
  name: 'App',
  components: {
    HelloWorld // == 'hello-world' : HelloWorld
  }
}
  • Vue 인스턴스와 다르게 data를 선언할 때에 function return을 이용해야 함
<script>
export default {
  data: function(){
    return {
      str: 'hi'
    }
  }
}
</script>
  1. Components
  • Component 폴더 내의 .vue 파일들은 camel case를 써야 함. -> tag 이름이 ㅁㅁ-OO 되도록 두단어로 쓰는게 좋음.

※ button의 type을 submit으로 하면 상위 form으로 이벤트 버블링이 일어남.
form의 submit 동작은 새로고침이 default임.
이를 막기 위해서는
event.preventDefault();
또는 v-on:submit.prevent="submitForm"과 같이 .prevent를 붙여준다.

⚠️ **GitHub.com Fallback** ⚠️