vue.js38 04장 01. 입력 폼을 데이터와 연결하기 : v-model 보호되어 있는 글 입니다. 2023. 5. 8. 03장 02. 정리 - v-bind 복습 - 준비한 데이터로 HTML의 속성을 지정하고 싶은 경우 v-bind를 사용. - 데이터는 Vue 인스턴스의 data:에 입력. 이미지 지정 1. HTML의 이미지 태그에 v-bind:src="프로퍼티명"과 같이 작성 2. Vue 인스턴스의 "data:"에 프로퍼티를 준비하고 "이미지파일명"을 입력. data: { fileName: 'face1.png' } 링크 지정 1. HTML의 a 태그에 v-bind:href="프로퍼티명"과 같이 작성. 2. Vue 인스턴스의 data:에 프로퍼티를 준비하고 "링크 URL"를 입력. data:{ myURL:'링크URL' } 우측 정렬, 좌측 정렬, 가운데 정렬 지정 1. HTML의 블록/셀 태그에 v-bind:align="프로퍼티명"과 같이 작성. 2. Vue 인스.. 2023. 5. 8. 3장 01. 요소의 속성을 데이터로 지정하는 :v-bind 보호되어 있는 글 입니다. 2023. 5. 4. 02장 04. 정리 - 작성법 복습 데이터를 있는 그대로 표시할 때 1. HTML로 표시하고 싶은 곳에 {{ 프로퍼티명 }} 혹은 v-text="프로퍼티명" 의 형식으로 작성. {{ myText }} 2. Vue 인스턴스의 data: 에 프로퍼티를 넣고 "표시할 값"을 넣는다. data: { myText: "Hello!!!" } 데이터를 HTML로 표시할 때 1. HTML 로 표시하고 싶은 곳에 v-html="프로퍼티명"의 형식으로 작성. 2. Vue 인스턴스의 data: 에 프로퍼티를 넣고 "HTML 태그"를 넣는다. data: { myText: 'Hello!!!' } 여러 가지 데이터를 다룰 때 1. HTML에서 표시하고 싶은 곳에 {{ 프로퍼티명 }}의 형식으로 작성. {{ myNumber }} {{ myText }} {{ myBoo.. 2023. 5. 4. 2장 03. 사용할 수 있는 데이터의 종류 보호되어 있는 글 입니다. 2023. 5. 4. 2장 01. Vue 인스턴스 만들기 : new Vue vue 인스턴스란? - SPA를 뒤에서 움직이게 하는 실체 - Vue 인스턴스에 여러 옵션을 붙이는 것으로 SPA 기능이 동작하기 시작한다. Vue 인스턴스 작성 new Vue({ Vue 인스턴스 내용 }) 또는 var 변수명 = new Vue({ Vue 인스턴스 내용 }) el 옵션 - 어떤 HTML 요소와 연결할지 지정 - 작성 후 el 옵션으로 el: "#ID명" 으로 지정하여 요소와 연결 data 옵션 -data : { 데이터부분 } 에서 데이터부분 영역에 " : " 과 같은 형식으로 작성. Vue.js에서는 데이터 이름을 '프로퍼티'라고 한다. 데이터가 복수일 경우 콤마( , )로 구분하여 나열한다. Vue 인스턴스 작성( el, data 옵션 ) new Vue({ el: "#ID명", data.. 2023. 5. 3. 이전 1 ··· 3 4 5 6 7 다음