Vue.js20 [Vue.js] input 입력 핸들링 v-model, 체크박스,radio, select ● v-model 사용법 - v-model 디렉티브 값에 사용자입력과 동기화할 데이터를 지정함. input 값과 message속성을 바인딩 ▼ input의 값을 변경하면, 동기화되면서 message 문자 변경됨 {{ message }} var app = new Vue({ el: '#app', data: { message: 'Hello !' } }) - 체크박스 하나의 요소를 선택하는 체크박스는 기본적으로 데이터를 boolean 으로 다룸 -> 체크 상태에 따라 요소에 값을 설정하고 싶은 경우에는 true-value, false-value 라는 특별한 속성을 사용함 {{ val }} var app = new Vue({ el: '#app', data: { val: true } }) 실제 렌더링 ▼ 여러 개의.. 2024. 1. 18. [Vue.js] 메서드 이벤트, 인라인 메서드 이벤트 1. 메서드 이벤트 핸들러 메서드 이벤트 핸들러는 컴포넌트의 methods 옵션에 정의되어 있는 메서드 이름을 지정함. 클릭 => 버튼의 클릭 이벤트 핸들러를 handleClick 메서드로 지정하는 코드 v-on 디렉티브는 @ 로도 사용가능함 클릭 var app = new Vue({ el: '#app', methods: { handleClick: function(){ alert('클릭') } } }) 2. 인라인 메서드 핸들링 - 디렉티브의 값에 자바스크립트 식을 직접 작성하는 것 클릭 2024. 1. 18. [Vue.js] 제어 디렉티브 v-pre v-once v-text v-html 1. v-pre : 템플릿 컴파일 생략 - 자식 컴포넌트를 포함한 내부의 HTM을 컴파일하지 않고, 정적콘텐츠로 다룰 때 사용함 Hello {{ message }} => Mustache 와 디렉티브 등이 그대로 출력된다. 2. v-once : 한 번만 바인딩 - 템플릿을 한 번만 컴파일하고 이후에는 정적 콘텐츠로 다루고 싶을 때 사용 - 렌더링 후에 message 속성이 변경되어도 DOM은 변경되지 않음 3.v-text - 텍스트 콘텐츠가 단일 Mustache만으로 구성되어 있는 경우 v-text 디렉티브로 대신 사용 가능함 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, }) 4. v-html :HTML 태그를 그대로 렌더링 va.. 2024. 1. 18. [Vue.js] $el $refs ● $el - 컴포넌트 템플릿을 감싸고 있는 루트 요소는 $el (element) 을 사용해서 DOM을 직접 참조할 수 있음 Hello var app = new Vue({ el: '#app', mounted: function(){ console.log(this.$el) } }) => 라이프 사이클 중 mounted 이후부터 사용할 수 있음. ● $ref - 루트 이외의 요소는 ref와 $ref 를 사용해서 참조할 수 있음 템플릿에서 대상 요소에 ref 속성을 지정하고 이름을 붙여줌 Hello var app = new Vue({ el: '#app', mounted: function(){ console.log(this.$refs.hello) //p요소를 DOM으로 다룰 수 있음 } }) 2024. 1. 17. [Vue.js] 반복렌더링 조건 ● 조건으로 클래스 조작 ID.{{ item.id }} {{ item.name }} HP.{{item.age}} 청소년입니다. var app = new Vue({ el: '#app', data: { list: [ { id: 1, name: '홍길동', age: 25}, { id: 2, name: '김영희', age: 19}, { id: 3, name: '김철수', age: 30} ] } }) ● v-for 출력조건 반복요소에 직접 v-if 디렉티브를 적용 ID.{{ item.id }} {{ item.name }} HP.{{item.age}} 2024. 1. 17. [Vue.js] 템플릿 조건분기 v-if v-show var app = new Vue({ el: '#app', data: { ok: false } }) => v-if 는 주석으로 출력 v-show 는 스타일로 displage:none; 처리 ● v-if v-if는 단일 요소에 적용해야됨. 여러 요소에 같은 조건을 부여한다면 template 태그를 사용하면됨. *v-show 는 불가 title contents ● v-else-if, v-else A B 모든 조건을 만족하지 않음 var app = new Vue({ el: '#app', data: { type: 'A' } }) 2024. 1. 17. [Vue.js] SVG 데이터 바인딩하기 Vue.js와 SVG를 조합해서 간단하게 UI조작과 움직이는 그래프 등을 구현할 수 있음 원의 반지름을 변화시키는 코드 var app = new Vue({ el: '#app', data: { radius: 50 } }) 2024. 1. 17. [Vue.js] 데이터 바인딩 - 텍스트, 속성 ● 객체와 배열 내부의 요소 출력 - 루트에 정의한 속성뿐만 아니라, 객체 내부의 속성과 배열의 요소도 지정할 수 있음 {{ message.value }} {{ message.value.length }} {{ list[2] }} {{ list[num] }} var app = new Vue({ el: '#app', data: { //객체 데이터 message: { value: 'Hello Vue.js!' }, //배열 데이터 list: ['사과', '바나나', '딸기'], //다른 데이터를 사용해서 list에서 값을 추출하기 위한 요소 num:1 } }) ● 표현식과 문장의 차이 주의 * Mustache : 별도의 태그를 사용할 필요 없이 중괄호를 사용하기만 하면, 해당 위치에 텍스트 데이터가 출력됨 ->.. 2024. 1. 17. [Vue.js] 데이터 바인딩 ● 데이터바인딩 : DOM 변경을 자동화 -> 템플릿에서 사용하는 모든 데이터를 리액티브 데이터로 정의해야됨 ● 리액티브 데이터 : Vue.js 에서 get, set, hook 처리가 등록되어 반응하는 데이터 (Vue.js 코드를 보면 메서드를 호출하지 않아도 무언가 처리되고 있음) ● 리액티브 데이터 정의하기 - 컴포넌트의 data 옵션에 문자열 또는 객체 등의 데이터를 정의하면, 인스턴스 생성 때 모두 리액티브 데이터로 변환됨 var app = new Vue({ el: '#app', data: { message: 'Vue.js' //이렇게 정의한 message 는 변화를 감지할 수 있게 됨 } }) - 옵션 외부에서 데이터를 정의하더라도, Vue.js 데이터로 등록하면 모두 리액티브 데이터로 변환됨 .. 2024. 1. 17. 이전 1 2 3 다음 728x90
