1. index.html getbootstrap.com 들어가서 css link 복사해서 연결해준다. 2.컴포넌트 연결하기 / v-for문 돌리기 components 파일에서 Todo.vue 컴포넌트 만들고 연결해준다. // App.vue 부모 Todo App // Todo.vue 자식 Buy a car :todo="todo" 로 하고 props에 todo로 받아와도 되는데 구분을 하기 위해 나는 :todoList로 바인딩을 해주었다. App.vue 에서 v-for문을 도는데 Todo.vue (자식) 컴포넌트에 데이터를 넘겨 줘야한다. 그래서 props로 데이터를 전달받아서 뿌려줌 ! 체크 박스도 전달 받아야겠지???? => :checked="todoList.checked" 해주고 true면 체킹이 되어..

헷갈리는 부분이 있어서 코지 코더 유튜브 보고 한번 더 기록하기로 함! 1. Props (부모 > 자식 데이터 보내기) 데이터 값으로 받고 싶을 때는 :content="cont"로 해서 data() 안에 cont로 글씨 써서 나타낸다!! Props 유효성 검사 props: { // 기본 타입 체크 (`Null`이나 `undefinded`는 모든 타입을 허용합니다.) propA: Number, // 여러 타입 허용 propB: [String, Number], // 필수 문자열 propC: { type: String, required: true }, // 기본값이 있는 숫자 propD: { type: Number, default: 100 }, // 기본값이 있는 오브젝트 propE: { type: Objec..

1. Props : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용 부모 컴포넌트(Compo.vue 5번 줄)에는 자식 컴포넌트(Button.vue 6번 줄)에게 print 라는 키 값을 통해 값을 보내고 있다. 여기서 print은 key가 되고 parentText 는 value 값이 된다. print를 키로 설정했다면 자식 컴포넌트에 등록 props { }을 해줘야 한다. props: { print: String, }, // 자식 컴포넌트에서는 props: { }라는 곳에 해당 키를 등록하고 사용하면 된다. 2. Emit : 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용 Emit은 @setInput이라는 키를 등록하고 함수를 보내고 있다. Emit은 내가 사용하고 싶은 부분에 t..

1. Slot 컴포넌트의 재사용성을 높여주는 기능 특정 컴포넌트에 등록된 하위 컴포넌트의 마크업을 확장하거나 재정의할 수 있다. 2. Slot의 기초 태그는 부모가 자식이 들어오기를 기대하는 위치에, 자리를 만들어놓는 것이다. 안녕 3. 이름이 있는 Slot 주의 사항 >> v-slot 디렉티브의 경우, 기존에 사용되던 slot 디렉티브와 다르게 반드시 태그에 추가되어야 한다. 2.6.0 버전에서 새로 추가된 Slot관련 내용 Dynamic Slot Names : Dynamic directive arguments를 v-slot에서 사용할 수 있다. ... Named Slots Shorthand : v-slot: 대신 #기호를 사용해서 간단하게 사용 할 수 있다. 제목 {{ user.firstName }}..

1. 문자열 BASE64 인코딩/디코딩 인코딩 디코딩 인코딩 버튼 디코딩 버튼 data() { return { memo: '', encode: '', decode: '' }; }, methods: { encoding() { this.encode = window.btoa(encodeURIComponent(this.memo)) }, decoding() { this.decode = decodeURIComponent(window.atob(this.memo)) }, } 단체오픈카톡방에서 백엔드분이 input값에 text를 쳐서 클릭 버튼을 누르면 또 다른 input값에 인코딩한 글씨가 보이게 어떻게 하냐고 해서 몇일 전 공부한 v-model 양방향에 대해 설명하다가 디코딩하는 부분은 구글링으로 통해 찾고, :va..

1. v-for로 엘리먼트 배열에 매핑하기 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭 이다. key에 대한 이상적인 값은 각 항목을 식별할 수 있는 고유한 ID이다. v-for를 쓴다면 :key 키값을 넣어주자! >> 코지코더 강의 듣는데 :key값에 index 넣는걸 별로 추천하지 않는다고 한다. 왜냐하면 3번째 index값을 만약에 삭제하면 4번째가 3번째로 되기 때문에 key로 가지기가 애매하다고 하셨다. {{ index + 1}} : {{ item.fruit }} data() { return { array: [ { fruit: 'apple' }, { fruit: 'banana' }, { fruit: 'mango' } ] }; }, 2. v-for와 객체 {{ val..

도대체 Computed 속성은 언제 써야 하고 methods랑 같은 기능을 하는 것이 아닌가? 생각했었는데 코지 코더라는 유튜브 슨생님 강의를 듣고 이해하게 되었다. 딱 내가 원하는 강의 스타일... 어렵지 않고 기본에 충실하게 가르쳐 주신다!! 1. computed 속성 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다. 2. computed 속성의 장점 뷰 템플릿 코드의 가독성을 높여줌 컴퓨티드 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다. 중복제거 Computed 속성 {{ message.split('').reverse().join('') }} {{ message.split('').reverse().join('') }} {{ message.s..

1. 클래스 바인딩 - 객체구문 :class="{ '적용될 클래스명': true 또는 false의 조건식 }" v-bind:class="클래스명" v-bind:class="{ 클래스명: 조건 }" 조건식을 사용하여 boolean값이 true인 경우에만 해당하는 클래스명이 적용됨 위와 같이 앞에는 적용될 클래스명 위치하고 뒤에는 true, false의 boolean이 위치 v-bind:class는 문자열과 객체 또는 배열을 둘 다 받을 수 있다. 만약 class명에 "-"가 존재한다면, 그 class명을 string으로 묶어주어야한다. www.naver.com class의 객체가 복잡할 때 classObject라는 객체를 data에 따로 만들고 각각의 class명에 값을 준 후 => 이를 class명에 써..

localhost:8080 을 치는데 계속 뒤에 /#/ 이 따라 붙는거당..... 메뉴를 클릭해도 localhost:8080/#/menu 로 넘어가서 중간에 #이 되게 거슬려서 없애는 방법을 찾다가!! 1. src/router/index.js const router = new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) export default router Vue.js는 mode설정을 하지않으면 기본적으로 hash모드로 동작한다. (이 경우 ’http://example.com/#/’ 과 같이 URL 뒤에 #이 붙는다.) const router = new Router({ mode: 'history', ro..

vue cli를 설치한 후 그다음 중요한 것이 디렉터리 구조였다. 프레임 워크를 쓰기전에는 그냥 index.html / css폴더 / js 폴더 / img 폴더만 있으면 했던 것이 이제는 좀 더 역할 별로 관리하기 위해 폴더들이 많아 짐에 따라 분리되어 있고 그것들이 의미하는 게 뭔지 알아야 한다. 제일 먼저 디렉터리 구조를 공부하지 않은 나를 반성하자.. 1. 디렉토리 구조 vue-login ├── src │ ├── main.js │ ├── App.vue │ └── models │ └── user.js │ └── router │ └── index.js │ └── services │ └── auth-header.js │ ├── auth.service.js │ └── user.service.js │ └──..

1. 스피너란? 웹 페이지의 로딩 상태를 나타내는 컴포넌트를 의미 2. npm 설치 https://www.npmjs.com/package/vue-full-loading npm i vue-full-loading 모듈 npm으로 쓰지 않고 직접 코드로 만든 블로그내용 https://blog.naver.com/PostView.nhn?blogId=pjok1122&logNo=221644786721&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView [Vue-CLI] Spinner Component 사용하기, vue router 라우터 네비게이션 가드 1. 스피너란? 웹 페이지의 로딩 상태를 나타내는 컴포넌트를 의미합니다. 2..

1. Components 폴더안에 button.vue 파일 생성 변수는 data() 항목에 정의할 수 있다. 메서드는 methods 항목에 정의할 수 있다. name이라는 변수와 onClick() 메서드를 만들었다. 그리고 @click를 통해 이벤트를 등록하고 {{ name }} 두 개에 중괄호 안에 변수를 적용 2. 컴포넌트 사용할 곳에 연결 태그로 연결해주고 import 불러오고 components 이름 써주기 한 컴포넌트를 만들어 놓으면 어디서나 갖다 쓸 수 있다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. DOM (Document Object Model) HTML로 작성된 웹 요소에 자바스크립트가 접근할 수 있도록 브라우저가 변환시킨 객체 문서 객체 : , 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(Object)로 만들면 그것을 문서 객체라고 함 모델 : 문서 객체를 '인식하는 방식' 2. 어떻게 생겼을까? 하나의 root node (html 루트요소)에서 시작됩니다. 그런데 나무는 땅에서 솟아서 점점 위로 뻗어나가지만 tree형 자료구조는 흔히 위의 root node에서 아래로 퍼져나가는 형태로 그립니다. tree에서는 위쪽의 node를 부모(parent) 노드 아랫쪽 노드를 자식(child)라고 합니다. ① Document Node ​트리 최상위 노드로 DOM Tree..