글 작성자: 택시 운전사
반응형

[Vue.JS 2.0] 소개 및 시작하기

  • Vue는 다른 프레임워크나 라이브러리에 비해 신생언어
  • 가볍고, 복잡도가 낮아서 사용이 편하고 시작하기 쉽다.
  • 이름처럼 View에만 초점을 두었기 때문에 다른 라이브러리나 프레임워크와 혼용하기 쉽다.
  • 처음 시작하는 단계의 과정이 복잡하다.
  • 한글화가 잘 되어있다.
  • React보다 성능이 뛰어나다.
  • React에서 JSX를 사용하는 것처럼 Vue도 비슷한 템플릿을 사용한다.(원한다면 JSX도 사용 가능하다.)
  • 템플릿의 장점은 HTML파일에서 바로 사용할 수 있다는 점이다.
  • SSR이 지원된다.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width-device-width" />
    <title>JS Bin</title>
  </head>
  <body>
    <div id="app">
      <h1>Hello, {{ name }}</h1>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </body>
</html>

JS

var app = new Vue({
  el: '#app', 
  data: {
    name: "geon"
  },
});

[Vue.JS 2.0] Directive(지시문), Vue 엘리멘트를 위한 특별한 속성

Directive?

  • 지시문과 같은 성격
  • Directive의 종류
  1. v-text
  • {{}}대신 사용 가능한 directive
  1. v-html
  • html형식으로 렌더링(React의 dangerouslySetInnerHTML과 비슷한 역할)하는 directive
  1. v-show
  • 해당 엘리멘트를 visibility 결정하는 directive
  1. v-if
  • 해당 조건문을 만족할 때 visible한 directive
  1. v-else
  • 해당 조건문을 만족하지 않을 때 visible한 directive
  1. v-else-if
  • 첫 번째 조건문을 만족하지 않을 때, 확인하는 다른 조건문에 해당하는 directive
  • 위치는 항상 v-if 다음 위치에 있어야하고, v-else를 사용한다면, 그 사이에 있어야합니다.
  • 여러번 사용이 가능합니다.
  1. v-pre
  • 특정 엘리먼트를 무시하는 directive
  • 컴파일 속도를 빠르게해준다.
  • {{}} 머스태쉬 태그를 그대로 표시할 수 있음
  1. v-clock
  • JavaScript가 실행되기 전에 즉, Vue.JS instance가 제대로 준비되기 전까지 우리의 템플릿을 위한 HTML 코드를 숨기고 싶을 때 사용하는 directive
  1. v-once
  • 초기에 딱 한번만 렌더링하는 directive
  • 변동이 없고 한결같은 정적인 부분에 사용합니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="app" v-cloak>
    <h1 v-if="value > 5">value가 5보다 크군요</h1>
    <h1 v-else-if="value===5">value가 정확히 5네요</h1>
    <h1 v-else="value > 5">value가 5보다 작아요</h1>
    <h2 v-once>초기 값: {{value}}</h2>
    <h2>현재 값: {{value}}</h2>
    <h1 v-pre>{{ 그대로 렌더링 }}</h1>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

CSS

[v-cloak] {
  display: none;
}

JS

var app = new Vue({
  el: '#app', 
  data: {
    name: "<i>italic</i>",
    visible: false,
    value: 0
  },
});
  1. v-bind
  • 엘리먼트의 속성값을 바꾸는 데 사용하는 directive
  • 생략이 가능하며 내부에서 JavaScript 코드 사용이 가능합니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="app" v-cloak>
    <h1>Hello, {{name}}</h1>
    <h2>{{ Date() }}</h2>
    <img :src="smile ? feelsgood : feelsbad"/>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

JS

var app = new Vue({
  el: '#app', 
  data: {
    name: "Vue",
    smile: true,
    feelsgood: "https://i.cbc.ca/1.4986551.1548087152!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/smile-emoji.jpg?",
    feelsbad: "https://i.pinimg.com/originals/4f/49/65/4f4965192fc86eeb8057219075ebc2bd.png"
  }
});
  1. v-for
  • 배열 렌더링을 위한 directive
  • item in items 혹은 (item,index) in items의 형태로 사용한다. (JS의 array method 사용법과 for loop를 섞은 느낌)

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="app" v-cloak>
    <h2>To do</h2>
    <ul>
      <li v-for="(todo, index) in todos">{{index}}. {{todo.text}}</li>
    </ul>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

JS

var app = new Vue({
  el: '#app', 
  data: {
    todos: [
      { text: 'Vue.js 튜토리얼 작성하기'},
      { text: 'Webpack2 알아보기'},
      { text: '사이드 프로젝트 진행하기'}
    ]
  }
});
  1. v-model
  • 양 방향 데이터 바인딩을 위한 directive

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="app">
    <h1>Hello, {{ name }}</h1>
    <h3><input type="checkbox" v-model="smile"/> smile emoji</h3>
    <img :src="smile ? feelsgood : feelsbad"/>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
  1. v-on
  • 이벤트를 처리하기 위한 directive
  • Vue Object의 methods에 있는 함수를 이용합니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="app">
    <h1>Counter: {{number}}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

JS

var app = new Vue({
  el: '#app', 
  data: {
    number: 0
  },
  // app Vue instance를 위한 methods
  methods: {
    increment: function() {
      // instance 내부의 데이터모델에 접근할 땐, this를 사용한다.
      this.number++;
    },
    decrement: function() {
      this.number--;
    }
  }
});

Vue Components

  • 화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것(React랑 똑같다)
  • Vue instance를 생성하기 전에 꼭 Component부터 등록해야한다.

Vue Object Property

  1. methods
  • v-on에 쓰일 함수를 정의합니다.
  1. filters
  • 문자열에 변화를 줍니다.

HTML

...
<li>{{ cat.name | capitalize | kittify }}</li>
...

JS

...
filters: {
    capitalize: function(value) {
        return value.toUpperCase()
    },
    kittify: function(value) {
        return value + 'y'
    }
}
...

Vue Lifecycle method

부모 자식 컴포넌트 간의 통신

  • JS에서 props 변수의 이름을 camelCase로 하면 HTML에서는 kebab-case로 접근해야합니다.
    HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width-device-width" />
      <title>JS Bin</title>
    </head>
    <body>
      <!-- 상위 컴포넌트 -->
      <div id="app">
        <!-- 하위 컴포넌트에 상위 컴포넌트가 갖고 있는 message 를 전달함 -->
        <child-component v-bind:passed-data="message"></child-component>
      </div>
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <script src="vue.js"></script>
    </body>
    </html>

    JS

    Vue.component("child-component", {
    props: ["passedData"],
    template: "<p>{{ passedData }}</p>"
    });
    
    // parent Component  
    var app = new Vue({  
    el: "#app",  
    data: {  
    message: "Hello Vue! from Parent Component"  
    }  
    });  
    \`\`\`
    Vue.JS에서의 컴파일
  • 템플릿으로 작성한 코드가 자바스크립트 형태로 변환되어 Vue에서 조작할 수 있도록 하는 과정

  • CDN을 사용하는 경우 Browser에서 이루어지고, 이를 runtime-compilation이라 한다.

참고

반응형