Vue.js

Vue란 MVVM 패턴의 뷰모델(ViewModel)레이어에 해당하는 화면 (View)단 라이브러리이다.사용자에게 보여지는 html 부분 DOM 이라는 것들을 이용해서 자바스크립트로 조작을 할 수 있게끔 구성되어져있다. Vue의 가장 큰 특징은 DOM Listeners

root componnt 의 num 이 바뀌었을 때 그 값이 바뀐 상태로 아래에 전달이 되고전달이 되는 값이 바로 화면에 반영되어서 그려지는 것이 reactivity 이다. 상위 컴포넌트로 데이터 전달 하고 싶을 때 : event 사용하면 됨event 사용하는 방법 =

뷰 템플릿 문법이란뷰로 화면을 조작하는 방법을 의미템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.데이터 바인딩이란뷰 인스턴스에서 정의한 속성들을 홤녀에 표시하는 방법가정 기본적인 데이터 바인딩 방식은 콧수염 괄호 ( Mustache Tag ) 임디렉티브란v- 라

href 에서 href/Controller/Action 까지만 사용하고싶기 때문에 "?" 이후로 모든 것을 제거하는 방법!!split() 기능을 사용하는 것이 가장 효율적이고 쉬운 방법이라고 생각한다.

인풋에 입력할때마다 변하게 하고싶으면oninpt 함수를 써서 이렇게 하면 즉각적으로 변하고 함수를 쓰고 싶으면 n1에 이렇게 해주면 된다. 여기서 e는 내가 콤마 넣고싶은 숫자 !

message 라는 메소드에서 this.sum을 보낸다.

forEach 사용하면 된다!!!

td같은태그는 value로 못 가져와서 innerText로 가져와야한다!

date.getTime() : 현재 시각 출력 (사용자 입장에서 보기 불편하다.)date.getFullYear() : 연도 출력date.getMonth() : 월 출력date.getDay() : 일 출력

화면이 랜더링 되자마자 합계가 표시되었으면해서 그냥 created() 대신 mounted() 로 해봤더니 된다. 찾아보니까 사용에 있어, 하나의 예로 created는 데이터 초기화에 대한 목적, mounted는 DOM 조작에 대한 목적으로 사용할 수 있다.고 한다자세

input 이나 textarea 에 적용할 수 있다. 태그 안에 contenteditable="true"를 심어주면 됨

mkActive() { //선택해서 저장된 데이터가 버튼을 누르면 activedata\[]로 들어가게 if (this.saveData0 != null) { this.exceptData.splice(this.exceptData.indexOf

아주 간단한 예제입니다. 클릭 가능한 스위치를 하나 만들고 이 버튼을 누르면 텍스트가 나타나고 사라지는 토글 기능 동작의 예제입니다.

? VueJS에서 엘리먼트, 컴포넌트 등을 숨기는 방법은?일반적으로 가장 많이 사용되는 방법은 v-if 그리고 v-show를 사용하는 방법입니다. 간단하고 빠르게 적용할 수 있기 때문이죠. 그런데 이 둘 중 어떤 것을 사용해야 할까요?! v-if 그리고 v-show의

위와 같이v-bind 동적으로 할 수 있게 하는데 todoItem.completed 가 true 면 textCompleted고 flase 면 사라짐v-bind로 동적으로 값에 따라서 클래스를 추가하거나 뺄 수 있는 것임로컬스토리지에 있는 데이터를 모두 지우는 api

컴포넌트 태그명 : 컴포넌트 이름 반응형 웹 view port 를 사용scope 를 쓰는 이유 CSS가 싱글 파일 컴포넌트에서 무시가 되고 컴포넌트 안에서만 유효한 스타일 속성으로 변환이 됨v-model :(two - way binding )화면에 있는 데이터랑 스크립

computed와 watch 를 이론적으로만 알고 실습에 사용한 건 거의 처음이다!첫날에는 헤매다가 차근차근 접근했더니 실마리가 풀렸다...!이 기분에 코딩하는 것 같다....ㅠㅠ이유가 별건 아니긴 했는데 점점 알아가는 것 같아서 기쁘다 ( 숫자+건)이 mounted에

그래서 나는 당연히 이렇게 구현했는데 자꾸만$refs.child.자식메소드() is not a function vue 이라고 뜨는 것 아니겠는가.....!!!!?!구글링해서 알아보니까 $ref로 가져온 자식 컴포넌트는 배열 형태이기 때문에 index 를 지정해줘야 된

배열과 객체를 선언하고 객체에 키값과 함께 데이터를 담는다!그리고 마지막에 push()를 해주면 되는데 arr.push({...obj}) 형태로 해야한다!!!객체를 꼭 spread operator를 사용해서 push를 해야 계속해서 들어간다 주의\~\~~

이전에 기입되지 않은 광고상품을 수정하고 api로 보내는 과정에서 백엔드담당자인 돌쇠님이 만든 api가 수정한 리스트를 url에 보내는 건데만약 수정했던 것을 또 수정하면, 뒤에 이어서 붙는게 아니라 이전에 수정되어서 추가됐던 데이터를 또 수정하는 방식으로 보내달라고

리스트에 담긴 데이터의 특성을 고려하여 매번 다른 모달을 띄워줘야했다나는 데이터별로 구별 했고 Modal을 리스트 컴포넌트 안에 넣어줬다다행이 지금은 데이터가 많지 않아서 과부하가 일어나지 않았지만만약 데이터가 무수히 많아진다면 한 리스트별로 모달이 3개씩 즉 data

광고 상품의 디테일 정보를 보여주는 모달의 etc에는 모달에서 전부 다 보여줄 수 없는 정보들을 다 더해서 담아줬는데,그 값들이 물론 다 있으면 좋겠지만 null인 경우도 있었다. filter를 써주면 간단했다!.이렇게