Vue.js란 / 기초 개념 위주

Vue.js

컴포넌트 기반의 SPA를 구축하는 웹 프론트엔드 프레임워크

컴포넌트

• 웹을 구성하는 UI 요소들(로고, 메뉴바, 버튼, 모달창 등)
• 재사용성을 위해 구조화됨

SPA

• 단일 페이지 어플리케이션
• 하나의 화면에서 필요한 CSS, JS를 다 로딩한 상태(초기 로딩이 있다)에서 사용자 입력에 따라 변경될 부분만 리로딩됨
• UX 및 성능의 개선 가능
  • 빠른 페이지 변환
  • 높은 반응성
  • 낮은 트래픽

Vue Router

// router.js 생성
import Vue from "vue";
import VueRouter from "vue-router";
// 표시할 컴포넌트 불러오기
import Home from "./views/Home";
import About from "./views/About";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    // 컴포넌트별 path 설정!
    { path: "/", component: Home },
    { path: "/about", component: About },
  ],
});

export default router;

// main.js에 new Vue에 router 선언
import Vue from "vue";
import App from "./App.vue";
// router 불러오기
import router from "./router";
// bootstrap 관련 ---------------------------------------
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

// Import Bootstrap an BootstrapVue CSS files (order is important)
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);
// ------------------------------------------------------

Vue.config.productionTip = false;

new Vue({
  // router 선언!
  router,
  render: (h) => h(App),
}).$mount("#app");

Data 선언 및 LifeCycle 관련

• new Vue - Vue의 시작!
• beforeCreate - 가장 먼저 실행
• created - 바인딩 될 데이터 조작·옵션 적용시 사용
• beforeMount - 실제 컴포넌트가 돔에 추가되기 직전에
• mounted - 컴포넌트가 돔에 추가될 때
• beforeUpdate - 데이터 변형시, 리렌더링 직전에
• updated - 리렌더링 직후에
• beforeDestroy - 컴포넌트를 벗어나기 직전에
• destroyed - 컴포넌트를 벗어난 직후에 호출

<script>
export default {
    // data() = 데이터 선언부
    data() {
        return {
            data1: 'asd',
            data2: [a, s, d],
        }
    },
    // watch = 선언된 데이터 감시 기능
    watch: {
        data1() {
            console.log("data1 변경됨!")
        }
    },
    // Life Cycle 관련
    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>

• v-model: 데이터 연동
• @click: 클릭 이벤트
• @change: form에서의 값 변경 이벤트
• v-for: 배열 형식의 데이터 for문 돌리기, ex) v-for="(d(값), i(index)) in array", :key="i" 필수!
• v-show: false라도 렌더링은 한다
• v-if: false시 아에 렌더링도 안 함