Vue.js (10) 썸네일형 리스트형 Vue 3 bootstrap 적용하기 부트스트랩 설치 npm install bootstrap-vue-3 설치 후 main.js 에 부트스트랩을 등록합니다. import { createApp } from 'vue' import App from './App.vue' //부트스트랩 import BootstrapVue3 from 'bootstrap-vue-3' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue-3/dist/bootstrap-vue-3.css' const app = createApp(App); app.use(BootstrapVue3); app.mount('#app'); 세팅완료 부트스트랩 class 또는 vue 전용 태그를 사용하시면 됩니다!. [Vue] 네비게이션 가드 / Navigation Guards 소개 네비게이션 가드는 주로 리디렉션 하거나 취소하여 네비게이션을 보호하는 데 사용된다. 네비게이션 가드를 설정하는 방법에는 전역, 라우트 내부, 컴포넌트 내부가 있다. 전역 가드 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 각 route 들이 호출될 때마다 실행되는 네비게이션 가드 입니다. to : 대상 Route 객체 from : 현재 Route 객체 next : 훅을 해결하기 위한 함수 next() 다음 훅으로 이동 next(false) 현재 네비게이션 중단, from 경로의 URL로 재설정 next('/') or next({ path : '/' }) 해당 위치로 리디렉션 next(err.. [Vue js] dynamic component, 원하는 컴포넌트 호출하기 + defineAsyncComponent() 개요 하나의 route 를 가지고 동적으로 컴포넌트 변경하기 Component 태그와 computed 활용 1. route 등록 동적 라우트 매칭을 통해 하나의 컴포넌트에 동적인 path를 받을 수 있도록 설정해 줍니다. const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', redirect: '/main' }, { path: '/main', name: 'main', component: () => import('../components/DefaultView.vue'), children: [ { path: '/main/:param1/:param2', // 동적 라우트 매칭 name: 'content', compone.. [Vue js] Vue Router / 뷰 라우터 전체요약 라우터 설치 -> 라우터 설정, 적용 -> 뷰 생성 -> 라우터 태그 등록 -> 실행 Vue Router 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. Vue Router 설치방법 npm install vue-router 설치 후 에러가 발생 할 경우 Vue 버전을 확인해 주세요. 더보기 2022년 2월 7일부터 Vue.js 라이브러리와 Vue Router 라이브러리의 CDN 주소는 Vue 3 기반의 라이브러리 코드를 들고 옵니다. 따라서, Vue 2로 라우터를 사용하고 싶으시면 라우터 3버전을 사용 하여야합니다. ex ) npm install vue-router@3 Vue-Router 구조 라우터 폴더와 js 파일을 만들고 main.js .. [Vue js] i18n 을 이용하여 다국어 설정 i18n i18n 은 사전적 의미로 국제화라는 뜻을 가지고 있다. 서비스는 다양한 사람들이 사용할 수 있으므로 편리성을 위해 각 나라에 맞는 언어로 번역해서 제공하는 것이 좋다. 프론트엔드 부분에서는 이러한 언어도 신경써야 하는데 i18n 라이브러리를 사용하면 손쉽게 해결할 수 있다. vue i18n 설치 npm install vue-i18n # or yarn add vue-i18n 기본설정 프로젝트 구조는 다음과 같다. src 하위에 locales 폴더를 만든다. 그후 원하는 언어폴더를 만들고 그 하위에 동일한 이름의 json 파일을 만든다. 폴더명과 json 이름은 자유다. 하지만 알아보기 쉽게 해당 나라를 쉽게 파악할 수 있는 폴더명이 좋다. 다음으로 src 밑에 i18n.js 파일을 만든다. me.. [Vue js] Vue emit 부모 컴포넌트로 데이터 보내기 emit 이란? Vue 에서는 부모 컴포넌트와 자식 컴포넌트간에 데이터를 주고 받기 위해서는 props나 emit을 사용하여야 합니다. 그 중 emit은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내는 방법 입니다. emit 사용방법 emit 구조 v-on:자식 컴포넌트에서 보내온 데이터 이름= "부모 컴포넌트에서 실행할 함수명 ' // 자식 컴포넌트 {{food}} // 클릭 이벤트를 주어 sendMsg 함수를 실행 시킵니다. 감사인사 // 부모 컴포넌트 // sendMsg는 자식 컴포넌트에서 보낸 식별자 이름 // receiveMsg 는 부모 컴포넌트의 메서드 명 {{ msg }} 결과 [Vue js] Vue Props Props? Vue는 부모 컴포넌트와 자식 컴포넌트가 서로 격리되어 있다. ===> 데이터를 직접적으로 참조 할 수 없음 따라서 Vue에서는 props를 이용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다. Props 구조 props의 기본 구조는 다음과 같습니다. v-bind:자식컴포넌트의 props 이름 = " 부모컴포넌트의 데이터 " // 부모 컴포넌트 App.vue // v-bind:자식 컴포넌트 props 명 = " 부모 컴포넌트 데이터 이름 " // 자식 컴포넌트 FoodView.vue {{food}} 부모 컴포넌트에서 foodname을 자식 컴포넌트의 food에 매핑 해주었습니다. 그 결과 자식 컴포넌트의 food에 소고기 가 매핑 된것을 보실 수 있습니다. props Type 설.. [Vue] Vue methods 사용법 Vue에서 methods는 자바스크립트의 function과 같습니다. Vue의 v- 디렉티브를 사용하여 간단하게 methods를 구현해보겠습니다. click v-on:click="outputLog" 에서 outputLog는 methods 안에 있는 함수 이름입니다. 따라서 디렉티브 태그를 클릭하게 되면 outputLog함수가 실행되어 console.log( "clicked")가 실행되게 됩니다. 뿐만아니라 Vue 인스턴스 안의 data값에 변화를 줄 수도 있습니다. click {{ num }} 버튼을 클릭하게 되면 data의 num가 올라가는것을 보실수 있습니다. 이전 1 2 다음
