[Vue.js] Vue.js 기초 예제 - 출력, 조건, 반복, 이벤트

Vue.js 기초 예제
출력
조건문
반복문
이벤트

참고 : https://vuejs.org/v2/guide/

Introduction | Vue.js

vuejs.org

Vue.js 기초 예제

Vue.js 는 따로 설치할 필요 없이 간단하게만 실행해보려면 html에 스크립트 코드만 한 줄 추가하면 된다.

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

위 스크립트는 개발 버전이기 때문에 콘솔 창에 경고, 로그 등을 출력해준다.

출력

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <br />
    
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
        }
      });
    </script>
  </body>
</html>

Vue.js를 사용하여 화면에 message를 출력하였다.

Vue.js를 사용하면 데이터와 DOM이 연결되며, 반응형으로 동작하기 때문에 콘솔 창에서 message 값을 변경하면 바로 화면에 변경된 내용이 적용된다.

콘솔 창에서 app.message를 출력하면 기존 new Vue({})에서 설정한 message 값이 들어가 있다.

app.message를 '안녕하세요 Vue!'로 설정하면 화면에 보이는 문구도 설정한 값으로 출력됨을 확인할 수 있다.

Vue.js devtools 사용

Vue.js devtools를 사용해서도 message 값을 변경할 수 있다.

Vue 탭에서 Components를 살펴보면 위처럼 data > message 값이 떠 있는데 해당 부분을 수정하여 데이터를 변경할 수 있다.

인스턴스를 생성하면 해당 인스턴스는 기본적으로 Root 컴포넌트가 된다.

커서를 가져다 대면 오른쪽에 연필 아이콘이 뜬다. 이를 눌러 수정하면 된다.

자바스크립트 코드에서는 문자열을 작은따옴표로 감싸도 되었지만 Vue.js devtools에서는 문자열을 큰 따옴표로 감싸주어야 한다.

Vue Instance

new Vue()를 사용하여 뷰 인스턴스를 생성한다고 한다. 이때 Vue를 생성자라고 한다.

vm은 Vue Model의 약자이다.

var vm = new Vue();
console.log(vm);

생성한 인스턴스 뷰를 변수에 담아 이를 출력할 수 있다.

출력 시 해당 인스턴스에 대한 정보가 나온다.

현재는 아무런 속성도 설정하지 않았기 때문에 아래와 같은 내용이 출력된다.

만약 앞서 Hello Vue! 문구를 출력한 것처럼 el 속성과 data 속성 값을 지정해주면 아래와 같이 설정한 속성 값이 추가되어 보인다.

조건문

v-if

v-if 디렉티브를 사용하여 조건문을 사용할 수 있다.

v- 접두어가 붙어있으면 DOM에서 특수한 반응형 동작을 한다. 따라서 반복문과 이벤트 설정도 v-bind 속성을 사용하여 구현한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-if="testif">조건문</p>
    </div>
    <br />
    
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          testif: false
        }
      });
    </script>
  </body>
</html>

v-if 디렉티브에 testif를 주고, 뷰 인스턴스에서 data 속성 내에 똑같은 이름을 가진 속성을 주고 해당 값을 false로 설정하였다.

p 태그가 엄연히 존재하지만 실제 사이트에서는 아무런 문구도 출력되지 않는다.

콘솔 창에서 vm.testif 속성 값을 true로 주면 문구가 출력된다.

v-if를 사용할 수 있듯이, v-else-if와 v-else도 사용할 수 있다.

v-else-if 블록은 v-if에 대한 else if이므로 v-if 뒤에 위치해야 하고, v-else 블록 또한 v-if 또는 v-else-if 뒤에 위치해야 한다.

v-show

v-if와 유사한 동작을 하는 v-show 디렉티브가 존재한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getting Strated</title>
  </head>
  <body>
    <div id="app">
      <p v-if="test">If</p>
      <p v-show="test">Show</p>
    </div>

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

true인 경우에는 v-if와 v-show가 동작하는 데 차이가 없어 보인다.

하지만 위 예제 코드처럼 test를 false로 설정하고 실행해보면 html이 다른 걸 확인할 수 있다.

v-if와 같은 경우는 아예 삭제되어서 <p> 태그 자체가 보이지 않지만, v-show 디렉티브를 사용한 <p> 태그는 display: none이 되어 html 내에 존재한다.

따라서 이러한 차이점을 알고 사용해야 한다.

반복문

반복문은 v-for 디렉티브를 사용한다. 이때, v-for 디렉티브는 배열 데이터를 바인딩하여 사용한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="i in arr">{{ i.text }}</li>
      </ul>
    </div>
    <br />
    
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          arr: [
            { text: '반복문 1'},
            { text: '반복문 2'},
            { text: '반복문 3'}
          ]
        }
      });
    </script>
  </body>
</html>

arr를 배열 형태로 생성하였기 때문에 콘솔 창에서 vm.arr.push({text: '반복문 4'}) 를 사용하여 값을 추가할 수도 있다.

vm.arr.pop()을 사용하여 마지막 배열 데이터 값을 제거할 수도 있다.

push()와 pop() 모두 동적으로 실행된다.

위 예제에서는 in 구분자를 사용하였다. 자바스크립트와 마찬가지로 of 구분자도 사용할 수 있다.

index

반복문 사용 시 매개변수 개수를 이용하여 index 값을 불러올 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getting Strated</title>
  </head>
  <body>
    <div id="app">
      <div v-for="(value, name, index) in object">
        {{ index }}. {{ name }}: {{ value }}
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          object: {
            title: "How to do lists in Vue",
            author: "Jane Doe",
            publishedAt: "2016-04-10",
          }
        }
      });
    </script>
  </body>
</html>

(value, name, index)로 object에서 불러오는 인자를 세 가지로 하였다.

첫 번째에 위치하는 인자는 말 그대로 value 값을 가져온다. 따라서 title의 value, author의 value, publishedAt의 value 값을 출력한다.

두 번째에 위치하는 인자는 key 값을 가져온다. 따라서 title, author, publishedAt을 출력하였다.

세 번째에 위치하는 인자는 불러오는 값의 index 값을 가져온다. index는 0부터 시작한다.

인자의 개수를 두 개로 줄이면 (value, name)의 형태가 된다. 그러므로 index 값을 가져오기 위해서는 인자 개수를 세 개로 해야 한다.

이벤트

v-on

이벤트는 v-on 디렉티브를 사용한다.

v-on 디렉티브를 사용하는 것은 직접적으로 DOM을 건드리지 않고 앱의 상태만을 업데이트한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <button v-on:click="changeMsg">메시지 변경</button>
    </div>
    <br />
    
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          message: "Hello Vue.js!"
        },
        methods: {
          changeMsg: function() {
            this.message = '안녕하세요 Vue.js!'
          }
        }
      });
    </script>
  </body>
</html>

message 값을 data에서 "Hello Vue.js!"로 설정한다.

button을 생성하고 해당 버튼에 v-on:click 디렉티브를 주어 버튼이 클릭되면, 뷰 인스턴스 내에 changeMsg라는 이름을 가진 메서드가 실행되게 하였다.

메서드 실행 외에도 data 값을 변경하거나, 위처럼 메서드 이름을 바로 작성하지 않고, 자바스크립트 구문에 메서드를 사용할 수도 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Getting Strated</title>
  </head>
  <body>
    <div id="app">
      <button v-on:click="num += 1">Add</button>
      <p>{{ num }}</p>
      <br>
      <button v-on:click="say('hi')">Say hi</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          num: 0
        },
        methods: {
          say: function(val) {
            alert(val);
          }
        }
      });
    </script>
  </body>
</html>

v-model

v-model 디렉티브를 사용하면 입력과 애플리케이션 상태를 양방향으로 바인딩할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
    <br />

    <script>
      var vm1 = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      });
    </script>
  </body>
</html>

<input> 태그에 v-model 디렉티브를 설정해주었다.

<input> 태그의 값을 변경하면 <p> 태그에 출력되는 문구 즉, {{ message }} 부분도 동적으로 바로 변경된다.

저작자표시

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[Vue.js] Vue.js 기초 예제 - 출력, 조건, 반복, 이벤트

Vue.js 기초 예제

출력

Vue.js devtools 사용

Vue Instance

조건문

v-if

v-show

반복문

index

이벤트

v-on

v-model

Vue.js 기초 예제

출력

Vue.js devtools 사용

Vue Instance

조건문

v-if

v-show

반복문

index

이벤트

v-on

v-model

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역