본문 바로가기
v-bind + 이벤트 핸들링 정리잘하신 블로그 v-bind Vue.js에서 HTML을 구성하는 요소에 값을 설정 할 때 사용하는 지시자이다. 속성, CSS, form 등 다양한 요소들에 값을 설정할 수 있다. HTML 태그의 속성을 세팅할 때는 v-bind:속석명을 사용한다. v-bind는 생략 가능하다. 강의를 들으면서 따라하다가..... 같은 코드이고 Vue2.0 버전으로 스크립트 했음에도 불구하고, 작동하지 않는 메서드들이 있었다... 우선은 검색하다가 정리 잘하신 블로그를 찾아서 기록해둔다.. https://www.joinc.co.kr/w/man/12/vuejs/events 뷰 공식 한국 문서 돌려주세요.......... 2022. 12. 21.
v-for 태그를 반복할 수 있다 {{a1}} {{idx}} : {{a1}} 추가 {{a2}} v-for 에서 methods 개념이 어려웠는데 조금씩 알 것 같다. HTML 삽입 미리보기할 수 없는 소스 2022. 12. 19.
v-html / v-bind vue 코드에 html 코드 삽입 v-html : 지정된 데이터를 html코드로 인식하여 바인딩한다. v-bind : 지정된 데이터를 지정된 속성 값으로 설정한다. *v-html {{a1}} {{a2}} {{a3}} *v-bind {{a1}} {{a2}} {{a3}} 2022. 12. 19.
beforeCreate / created Vue 생성주기 Vue 라이프사이클 다이어그램 beforeCreate 는 객체가 관리할 요소들이 만들어지기 전에 생기는 함수 created는 객체가 만들어진 후에 생기는 함수이다. **console.log(a1) 으로 하면 찍히지 않음. this.a1으로 작성해야 찍힘 el : '#test1' 를 대시한 태그도 있다. 해당 태그가 // 되었다고 생각하고 vm1.$mount('#test1') 를 vue안에 적어주기만 하면 해당 기능을 대신한다. 전체코드 {{a1}} 값변경 2022. 12. 19.
Vue 시작은 객체 생성부터, function () { [native code] } 오류 Vue data를 출력하는 예제를 따라하고있었는데 음..나만 methods 에 있는 data를 불러오지 못하고 function () { [native code] }가뜨는것이다.. 뭘까,..,, 구글링으로 검색후 찾아냈다. 우선 내가 출력하려고 했던 코드는 아래의 코드였다. var test4 = new Vue({ el : '#test4', data : { name: '홍길동', age : 30 }, methods :{ user_info : function(){ return '이름은 ' + this.name +' 이고 나이는 '+ this.age +'입니다' } } }) {{user_info}} {{user_info}} 를 {{user_info()}}로 변경.. {{user_info()}} 왜 이런 오류가 .. 2022. 12. 18.