본문 바로가기

JavaScript/Vue26

[Vue.js] watch watch는 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다. 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다. 2022. 6. 6.

[Vue.js] computed 속성과 methods 속성의 차이점 methods = 호출할 때만 해당 로직이 수행(수동적인 데이터 갱신) computed = 대상 데이터의 값이 변경되면 자동적으로 수행(능동적인 데이터 갱신) 2022. 6. 6.

[Vue.js] Vue Directive Vue Directive(뷰 디렉티브)란 HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미한다. 디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다. 즉, 화면의 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작할 수 있다. v-if 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. v-for 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다. v-show v-if와 유사하다. 다만, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none;으로 주.. 2022. 6. 6.

[Vue.js] Vue에서의 자바스크립트 표현식 데이터 바인딩 방법 중 하나인 {{ }} 안에 자바스크립트 표현식을 넣으면 된다. {{ message }} {{ message + "!!!" }} {{ message.split('').reverse().join('') }} 하지만 분기 구문(if문 등등), 선언문(var a = 10; 이런것), 그리고 위와 같이 복잡한 연산(message.split('').reverse().join(''))은 사용할 수 없다. 2022. 6. 6.

[Vue.js] v-bind v-bind는 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식이다. v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여준다. 아이디 바인딩 클래스 바인딩 스타일 바인딩 2022. 6. 6.

Named View Named View(네임드 뷰)는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다. 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다. 2022. 6. 6.

이전 1 2 3 4 5 다음

티스토리툴바