Dandy Now!
  • [Vue.js][유튜브 강의 노트] 개발자의품격_한시간만에 끝내는 Vue.js 입문 #2
    2021년 11월 25일 14시 09분 25초에 업로드 된 글입니다.
    작성자: DandyNow
    728x90
    반응형

    학습내용

    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가 여러 복잡한 코드를 작성해야 하는 일들을

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

    728x90
    반응형
    댓글