vue.js

node.js // vue.js 환경 만들기

vue 설치 및 환경설정

App.vue 와 index.js 등

export default { watch : { // 상태변수 값 변화 감지 chk1 : { handler(e) { console.log(e); }

data 부분이 div 로 가고div에서 바뀐값이 위 부분으로 간다이후 data 부분의 값이 methods로 가고methods의 값이 백엔드로 간다.백엔드의 값이 methods로 오면methods 의 값이 data로 가고data (상태변수) 가 바뀌면 화면이 바뀐다.

method 의 데이터가 data (상태변수)로 간다export default {

axios를 설치한다.

v-for반복문 사용

체크박스의 값(handleCheck(idx))이 true 로 @change 했을때tmp.sum 에 tmp.price \* tmp.cnt 값을 표시함.// idx는 items의 숫자? 순서? 를 나타냄.// v-for="(tmp, idx)~ 로 idx = 0 1 2 3

반복문, 항목추가, 반복문을 이용한 함수, 함수의 결과값 표시, table에 어떻게 나오는지

총 합계 Table1.vue 참고해서 완성 해보기,항목 추가, 정의, 연산, 결과값,

Comp1.vue 라는 하위 컴포넌트 생성 (but, 우리가 짠게 아니라는 가정) // 외부 컴포넌트 가져와서 CompProps.vue 라는 기존 위치의 컴포넌트 생성 CompProps.vue 에 Comp1.vue 연결 // 사용 할 컴포넌트 등록!! 이와 동시에

$emit

methods 에서 정의 하고, div 에서 사용함 상태변수는 백엔드와 프론트엔드 사이에서 값의 가변성을 정의한다. 프론트에서 값이 변화하면 상태변수도 변하고 변화된 상태변수를 백으로 던진다. 백에서 온 데이터가 다르게 오면 상태변수가 바뀌고

emit은 자식이 부모에게 함수를 보냄 props는 부모가 자식에게 값을 보냄

// let arr = []; // arr.push({id:'a', name:'b'}); // 배열에 추가 // arr.pop() // 배열에서 제거 (뒤에서부터) // arr.splice(4, 1) //배열에서 제거 (위피, 개수)

main.jsApp.vue 를 시작점으로 잡음import routes from './routes/index.js';// createApp(App)// .use(routes)// .use(routes)// .mount('// 이렇게 계속 많아짐. 그

f5를 누를때마다 홈으로 가버림.컴포넌트 채로 새로고침 됨.sessionStorage.setItem('activeIndex2', idx);를 사용해서 세션저장소에 현재 메뉴의 index값 저장sessionStorage.getItem('activeIndex2');를 사용

부모 컴포넌트로부터 호출받는 값 props 자식 컴포넌트 내에 위치함 이런 형태. 부모컴포넌트에서는 CompProp.vue (부모) 이런형태로 불러와서 이렇게 컴포넌트를 불러와서 이렇게 사용한다. >자식 컴포넌트로부터 호출 받는 값 $emit

get(조회), post(추가), put(수정), delete(삭제)

store 사용

vue.config.js 백엔드의 http://localhost:3000 이 vue에서 url을 생략해서 사용 가능 하도록 설정 > 게시글쓰기 methods : { async handleData() { const

게시글 삭제 - DELETE

GET / PUT / 이전글 / 다음글 / 조회수증가

CMD> npm i vueperslides@next --save

각 테이블 컬럼에 scope 값을 줘서 $index와 함께 사용: 항목의 순서로 각 아이템의 위치를 파악: 가져오는 전체 항목을 :data="items" 안에 다 넣어서 가져옴: this.items = response.data.result;: 각 항목을 scope와 $

get(조회), post(추가), put(수정), delete(삭제)조회 : await this.axios.get(url, {headers:headers});추가 : await this.axios.post(url, body, {headers:headers});수정 :

mypage/Menu2.vue

npm run buildvue_20211223/dist 다 복사해서exp_20211227/public 에 붙여넣기localhost:3000으로 접속

회원관리