Lololol Lololol

• 1장 Vue.js 프레임워크의 기초 • 2장 데이터 등록과 변경 • 3장 이벤트와 입력 양식 • 4장 데이터 감시하고 가공하기 • 5장 컴포넌트로 UI 부품 만들기 • 6장 트랜지션과 애니메이션 • 7장 큰 규모의 애플리케이션 개발하기 • 8장 Vuex로 애플리케이션 상태 관리하기 • 9장 Vue Router로 SPA 만들기

컴포넌트 재사용을 하는 경우에 대부분 같은데 가끔 다른게 나오는 경우가 있다. 댓글은 달리는데 댓글 다는 사람과 내용, 날짜가 다른 것 처럼 메뉴도 같은 모양이지만 글자 내용이 달라지는 것 처럼 props를 사용해서 차이를 줄 수 있다. props사용 아래와 같이 같은 기능을 하는 컴포넌트에 시작 단어를 다르게 주고 싶다면 컴포넌트를 쓰는 쪽에서 startWord를 넣어주고 컴포넌트를 정의하는 부분에서는 startWord를 받겠다 그리고 word는 this.startWord로 받아준다. Vue.component('word-relay', { // 전역 컴포넌트 template: ` ... `, props: ['start-word'], data() { return { word: "this.startWord"..

클릭이벤트 onClick, onKeydown 등등으로 이벤트를 만들었을 텐데 vue에서는 앞에 @를 붙여 만들 수도 있고 (@click) 앞에 v-on:을 붙여 만들수도 있다.(v-on:click) 골뱅이가 짧으니 골뱅이로 쓰도록 하자 Add1 vue에서 모든 함수는 method 안에 만들어야 한다. 데이터 기본값도 정해주고 결과 체인지 이벤트 주로 select, checkbox, radio에서 사용된다. 멀티설렉트 ==도시선택== {{ city.title }} {{ dong.dongTitle }} 중간에 강사가 지정한 변수명때문에 너무 헷갈려서 내가 해석하기 편하게 지정해서 구현했다 결과 change이벤트를 써서 구현을 했는데 또 다른 방법이 있다. (함수내용을 직접 집어 넣는 방법) {{ dong.d..

vue가 가진 가장 큰 장점중 하나인 양방향 데이터 바인딩을 합시다 양방향 데이터 바인딩 DataBindingInputView.vue vue에서는 name="" id=""를 쓸 일이 없다. v-model 을 사용해 데이터값을 받아온다 결과 select box 사용자가 입력하는 개념이 아닌 옵션에 있는 아이템을 선택해 밸류값을 변경시킬 수 있다. 밸류값을 변경시킬 수 있으니 v-model을 이용 DataBindingSelectView.vue 선택 서울 경기 부산 결과 스타일 바인딩 오브젝트 형식으로 지정해 줄 수 있다. 스타일 바인딩: 글씨는 red, 폰트크기:30px 스타일 바인딩: 글씨는 green, 폰트크기:30px 색상 바꾸기 결과 state는 집에가 엄마는 vue 할거야

재활용이 뛰어난 뷰 컴포넌트는 viues 폴더와 components 폴더에 주로 만들게 된다. 일단은 단방향 데이터 바인딩 views 폴더에 넣을 vue 파일은 끝에 View로 이름을 맞춘다. 컴포넌트 만들기 빈 공간에 입력 template //html script //javascript vue style //css-scoped 데이터 함수와 데이터를 추가해 준다. vue에서는 데이터 함수를 만들때 function 키워드를 사용하지 않아도 된다. html 태그는 template 태그 안에 들어가면 된다. javascript 태그는 script태그 안에 들어가면 된다. css 는 style scoped 안에 들어가면 되는데 현재 함께 보이는 화면에만 적용이 된다. 다른 컴포넌트로 가면 적용이 안된다! 다른..

index.js 사용자가 메뉴를 클릭할 때 마다 해당하는 path가 있고 App.vue 에서 경로가 path 정보에 해당하는 값이다. . . . const routes = [ //오브젝트로 들어가 있다. { path: '/', // App.vue에서 연결되는 path key name: 'home', // 동일한 이름이 있으면 안된다. component: HomeView // path키를 사용해 불러왔을 때 실제로 가져올 컴포넌트 }, . . . Router에 컴포넌트를 import 하는 방법1 상단에 임포트해서 불러오기 import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue'..

설치 폴더 생성, 폴더에서 터미널 열기 설치가 됐는지 확인 vue --version //@vue/cli 5.0.8 //설치되어있네?? 설치 명령 npm install -g vue //-g 는 글로벌로 설치한다는 것을 의미 vue cli 설치 npm install -g @vue/cli //cli? //vue 프로젝트를 빠르게 생성할 수 있게 도와준다. //다양한 설정파일, 폴더 구성을 위해 만들어야하는데 일일히 만들지 않게 도와줌 //누가 만들더라도 기본적으로 같은 form을 사용할 수 있음 //create react app?????? 뭐만 설치할라하면 Cannot read properties of null (reading 'pickAlgorithm') 이녀석은 계속 뜬다 npm cache clear --..