[Vue.js][유튜브 강의 노트] 개발자의품격_한시간만에 끝내는 Vue.js 입문 #2

학습내용

1. 강의영상

https://youtu.be/sqH0u8wN4Rs

유튜버 개발자의 품격님의 "한시간만에 끝내는 Vue.js입문" 강의 내용은 크게 두 파트로 나눌 수 있겠다.

본 페이지에는 Vue.js의 다음과 같은 내용을 다룬다.

• 데이터 처리
• 메소드
• Instance-Lifecycle
• 데이터 바인딩 v-model 사용
• @이용 이벤트 호출
• 배열 형식의 데이터 v-for 콘트롤
• v-if(또는 v-show) 이용한 엘리멘트 화면 보이기(감추기)
• watch 이용 실시간 데이터 모니터링

 

2. 학습 중 작성한 코드

<!-- src/views/Home.vue -->

<template>
  <div>
    <h1>Welcome to {{title}}!</h1>
    <h1>Welcome to {{title2}}!</h1>
    <input type="text" v-model="input1" />
    <button type="button" @click="getData">Get</button>
    <button type="button" @click="setData">Set</button>

    <select class="form-control" v-model="region" @change="changeRegion"> <!-- 이벤트 @이용 호출 -->
      <option :key="i" :value="d.v" v-for="(d,i) in options">{{d.t}}</option>
    </select>

    <table class="table table-bordered" v-if="tableShow"> <!-- v-if는 조건이 맞지 않으면 렌더링 하지 않음, 반면 v-show는 조건과 관계없이 렌더링함. -->
      <tr :key="i" v-for="(d,i) in options">
        <td>{{d.v}}</td>
        <td>{{d.t}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
    // 데이터 처리
    data() {
        return {
            title: "개발자의 품격",
            title2: "Seoul",
            input1: "abcd",
            options: [
              { v: "S", t: "Seoul" },
              { v: "J", t: "Jeju"},
              { v: "B", t: "Busan"},
            ],
            region: "B", // 콤보박스 기본값
            tableShow: true, // v-if 이용, 테이블 보이기 또는 감추기
        };
    },
    // 데이터 모니터링
    watch: {
        input1() {
            console.log(this.input1);
        },
        title() {},
    },
    methods: {
        getData() {
            alert(this.input1);
        },
        setData() {
            this.input1 = "12345";
        },
        changeRegion() {
            alert(this.region);
        }

    },

    // https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
    beforeCreate() {
        console.log("beforeCreate");
    },
    created() {
        console.log("created");
    },
    beforeMount() {
        console.log("beforeMount");
    },
    mounted() {
        console.log("mounted");
    },
    beforeUpdate() {
        // console.log("beforeUpdate");
    },
    updated() {
        // console.log("updated");
    },
    beforeDestroy() {
        console.log("beforeDestroy");
    },
    destroyed() {
        console.log("destroyed");
    },
};
</script>

 

3. 코드 실행

C:\workspace\vuejs\test>npm run serve

---

학습소감

Java의 Spring framework를 학습한 경험이 있는데,

그때에 비해 쉽게 다가왔다.

React나 Angular 경험, 그외 Front-end 경험이 전무 하기 때문에 다른 비교는 안된다!

개발자의 품격님에 의하면 Vue.js가 여러 복잡한 코드를 작성해야 하는 일들을

간단히 해결 할 수 있게 해 주었다고 한다!