- Today
- Total
목록Web Development/Vue.js (9)
개성있는 개발자 되기
1. 인라인 스타일 인라인 스타일이란 HTML 요소의 style 프로퍼티에 CSS를 기술하는 방식을 뜻한다. 가능하다면 인라인 스타일은 사용하지 않는 것이 바람직하다. Vue.js에서는 v-bind:style로 인라인스타일을 작성할 수 있다. - 이벤트가 일어날 때마다 style1의 데이터 속성을 변경한다. - 변경된 속성은 v-bind:style="style1"을 통해 데이터에 바인딩 된다. 테스트 - 여러개의 스타일 객체를 바인딩 할수도 있다. 버튼1 2. CSS 클래스 바인딩 v-bind:class를 사용한다. boolean 값을 이용해 지정하는데, 개별적인 클래스 단위로 true가 되면 클래스가 주어진다. - 클래스 이름을 데이터 속성명으로 사용해서, v-model에 바인딩 해주면 해당 값의 tr..
다양한 이벤트의 사용 방법에 대해서 다음의 문서를 참고하자. https://developer.mozilla.org/ko/docs/Web/Reference/Events MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문서도 포함합니다. developer.mozilla.org https://www.w3schools.com W3Schools Online Web Tutorials HTML Example: This is a heading This is a paragraph. Try it Yourself » CSS Ex..
1. 옵션 객체 Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체를 data 옵션 객체라고 부른다. var model = { name : "홍길동" } var vm = new Vue({ // 옵션객체 el : "#test", data : model }) data 옵션에 주어진 모든 속성들은 Vue 인스턴스 내부에서 직접 이용되지 않고 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시를 두어 처리한다. ...더보기 vm.name = "이몽룡" model.name = "향단이" 위와 같이 객체의 속성처럼 접근할 수 있다. 이건 Vue 인스턴스가 프록시를 두어 Data옵션에 접근하기 때문이다. vm.$data.name = "성춘향" 직접 접근하려면 위와 같이 작성해야 한다. computed ..
1. 기본 디렉티브 꼭 콧수염 표현식이 아니더라도 HTML 요소 내부에 선언적 렌더링을 하는 건 아니다. 디렉티브라는 것이 있다. Vue.js의 기본 디렉티브들을 알아보겠다. ...더보기 v-text, v-html v-bind v-model v-show, v-if, v-else, v-else-if v-for v-pre, v-once 1.1 v-text, v-html 디렉티브 text를 바인딩 하는 디렉티브다. v-text 와 v-html 의 차이점은 실행화면에서 볼 수 있듯이, v-text는 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에 태그 문자열이 그대로 나타난다. 하지만 v-html 디렉티브는 v-bind:src 를 v-bind 생략하고 그냥 :src와 같이 작성해도 된다. 1.3 v-m..