월루를 꿈꾸는 대학생

$data 현재 인스턴스의 데이터 객체에 접근하기 위한 속성 Vue인스턴스 내의 데이터를 동적으로 조작할 수 있음 {{ message }} Update Data Using $data $data.message로 데이터 바인딩을 할 수 있음 --- {{ option }} export default { data() { return { title: '', type: 'movie', number: 10, year: '', filters: [ { name: 'type', items: ['movie', 'series', 'episode'] }, { name: 'number', items: [10, 20, 30] }, 반복문 사용할 때 양방향 데이터 바인딩을 써서 각 셀렉트들의 값들을 어느 변수랑 연동할지 $data[..

뷰의 router에서 제공하는 컴포넌트 유저가 해당 부분을 누르면 라우터를 통해 해당 페이지 전환을 처리함 새로고침을 하지 않고 화면을 새로운 거로 재랜더링함 보통 a 태그 대신 사용한다고 보면 되고 해당 링크를 눌렀을 때 활성화한 스타일 저장을 위해 active-class속성 사용이가능 Home 1. router-link 부분을 누름 = a 2. to속성이 href 대신으로 이동할 링크를 알려줌 3. 해당 링크 활성화시 적용할 클래스를 active-class에 지정하면 클래스가 별도랑 "active"로 새롭게 지정이 됨 nav-pills클래스를 사용해서 꾸밀 수 있음 https://getbootstrap.kr/docs/5.0/components/navs-tabs/ 내비게이션과 탭 Bootstrap에 포..

라우팅을 통해 변경되는 컴포넌트의 내용을 표시 라우터가 변경될 때 마다 즉 url이 변경이 될 때마다 그에 맞는 정보를 route파일에서 찾아서 해당하는 url과 컴포넌트를 확인한다 그 후에 해당 컴포넌트를 빌드함 ! 동적인 컴포넌트 전환 및 다른 경로를 탐색할 때 쓴다 const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ]; const router = new VueRouter({ routes }); url 맞는 컴포넌트르 자동으로 빌딩해주니까 아주 달달한 컴포넌트다

npm run dev 명령어를 입력했을 때 밑에 에러가 뜸 [webpack-cli] Unable to load '@webpack-cli/serve' command [webpack-cli] TypeError: devServerFlags is not iterable 그냥 새로 설치하면 에러 사라짐 npm list webpack-cli npm install --save-dev webpack-cli rm -rf node_modules rm package-lock.json npm install