본문 바로가기

분류 전체보기101

[Vue.js] 리스트 변경 ● 리스트에 요소 추가 이름 추가하기 ID.{{ item.id }} {{ item.name }} 나이{{item.age}} var app = new Vue({ el: '#app', data: { name: '김민호', list: [ { id: 1, name: '홍길동', age: 25}, { id: 2, name: '김영희', age: 19}, { id: 3, name: '김철수', age: 30} ] }, methods: { //추가 버튼을 클릭했을 때의 핸들러 doAdd: function(){ //리스트 내부에서 가장 큰 ID 추출하기 var maxId = this.list.reduce(function(a, b){ return a > b.id ? a : b.id }, 0 ) //새로운 사람을 리스트에.. 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] key 역할 리스트를 변경할 때 요소의 식별과 효율적인 렌더링 처리를 위해서 요소에 유니크한 key 속성을 설정하는 것이 권장됨 * 컴포넌트를 사용한 렌더링을 할 때는 key 속성이 필수 2024. 1. 17.
[Vue.js] 리스트 데이터출력-반복렌더링 ● 반복 렌더링 v-for 디렉티브 사용 반복변수 = item 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} ] } }) 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.
[Vue.js] 옵션 구성 ● 기본 옵션 구성 var app = new Vue({ el: '#app', //마운트할 요소 data: { // 애플리케이션에서 사용할 데이터 //객체 또는 배열로 지정하는 것이 일반적 message: 'Vue.js' }, computed: { computedMessage: function(){ //산출 속성 //함수로 인해 산출되는 데이터 return this.message + '!' } }, created: function(){ //라이프 사이클 훅 //일정한 라이프사이클을 미리 등록해서 적절한 시기에 자동으로 호출함 //그 시점을 낚아채서 원하는 처리를 할 수 있게 하는 것을 Hook이라고 함 //하고싶은처리 }, methods: { myMethod: function(){ //애플리케이션에서 사용.. 2024. 1. 17.
728x90

티스토리툴바