Vue.js25 [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. [Vue.js] Vue.js 기초 1. 디렉티브 : 'v-' 로 시작하는 속성. 주로 데이터 바인딩과 관련된 처리 * v-if, v-bind, key 등은 속성임 2. 데이터 바인딩: 데이터와 렌더링을 동기화하는 구조 ● 텍스트 바인딩 {{ message }} * new Vue() 는 한 개만 만들고, 컴포넌트로 UI를 구축한다. //관례적으로 app 또는 vm(ViewModel)라는 변수 이름을 사용함 var app = new Vue({ // new Vue() 는 한 개만 만들고, 컴포넌트로 UI를 구축한다 el: '#app', data: { message: 'Hello Vue.js' } }) console.log(app.message) // app.data.message 가 아니라는 점 주의 ● 반복 렌더링 data옵션에 등록한 배열.. 2024. 1. 17. 이전 1 2 3 다음 728x90
