[유튜브] 한시간만에 끝내는 Vue.js 입문

• 배운것
  • vue 설치 (nodejs 설치 필수) - npm install -g @vue/cli
  • 폴더 생성 방법 - vue create test ('test'라는 프로젝트 생성)
  • bootstrap vue 설치 방법
  •  
  • data를 {{ }} 로 표시하는 방법
  • watch 의 기능
  • method (function)
  • create, mount, update, destroy 타이밍
  • App.vue / main.js / router.js / Header.vue / Home.vue / About.vue 각 무슨 기능을 하는지 잘 모르겠음
• 데이터 바인딩 {{ }}
• 이벤트 @click @change
• 다중데이터 v-for
• 조건에 따라 보여주기 
  • v-if : 렌더링 X
  • v-show : 렌더링O 보여주진않음.

<template>
    <div>
        <h1>
            Welcome to home~~~ ★
            <p>{{ title }}</p>
            <p>{{ name }}님 환영합니당</p>
        </h1>
        <input type="text" v-model="input1" />
        <button type="button" @click="getData">클릭해보세요</button>
        <button type="button" @click="setData">값을 바꿔요</button>

        <select class="form-control" v-model="region"  @change="changeRegion">
            <option :key="i" :value="d.v" v-for="(d,i) in opts2">{{ d.t }}</option>            
        </select>
        <table class="table table-bordered" v-show="tableShow">
            <tr :key="i" v-for="(d,i) in opts2">
                <td>{{d.v}}</td>
                <td>{{d.t}}</td>

            </tr>     
        </table>    
    </div>

</template>

export default {
    data(){
        return{
            name: "최솔이" ,
            title: "최솔이의 Vue 공부",
            input1: "abc",
            opts2 : [
                {
                    v:"S", t:"Seoul",
                },
                {
                    v:"J", t:"Jeju"
                },
                {
                    v:"B", t:"Busan"
                }
            ],
            region: "B",    //v-model 에 data를 기본값을 지정
            tableShow : true,

        }
    },
    watch:{ //보고있다. 
        input1(){       //input1의 데이터 값이 변경 될때마다 뭔가 작동을 시킬 수 있음.
            console.log("★★ :-> " + this.input1);
        },

    },
    methods:{
        getData(){
            alert(this.input1);
        },
        setData(){
            this.input1 = "ABCDEFG";
        },
        changeRegion(){
            alert(this.region);
        }
    },
    beforeCreate(){
        console.log("beforeCreate");
    },
    created(){
        console.log("created");
        //DB에서 데이터를 가져올때 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");
    }

}

 

 

참고 유튜브 영상 ▼

https://www.youtube.com/watch?v=sqH0u8wN4Rs