본문 바로가기

전체 글743

[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.

Nested Router Nested Router(네스티드 라우터)는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시된다. 2022. 6. 6.

[Vue.js] router URL의 해시 값(#)을 없애는 법 vue router의 기본 URL 형식은 해시 값(#)을 사용한다. 만약 index.html/login과 같이 해시 값을 없애고 싶으면 히스토리 모드(history mode)를 활용하면 된다. var router = new VueRouter({ mode: 'history', routes }) 2022. 6. 6.

Vue router Vue router는 vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. Vue router를 구현할 때 필요한 특수 태그의 기능은 다음과 같다. 태그 설명 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 URL로 이동한다. 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역. 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 var app = new Vue({ router }).$mount('#app') 이 부분은 새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가하는 코드이다. 여기서 $mount()는 el 속성과 같이 인스턴스를 화면에 붙여주는 역할을 한다. 인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 .. 2022. 6. 6.

이전 1 2 3 4 5 6 7 ··· 124 다음

티스토리툴바