인생쓰

오늘은 Vue에서 사용되는 이벤트들을 알아보려고 합니다. 일단 저희가 일반적인 자바스크립트나 Jquery를 이용해서 하는 이벤트를 볼까요? input값에 text를 입력하면 content에 입력값이 출력되는 이벤트입니다. 하지만 Vue에서는 좀 다르게 사용합니다. Vue.js에서는 v-model로 content를 지정후 v-html에 연결해서 데이터를 뿌려주게 됩니다. 이렇게만 보면 이해가 쉽지 않으니 다른 이벤트 핸들링으로 볼까요. 숫자 버튼을 클릭할때마다 버튼안의 숫자가 올라가는 코드를 짜보겠습니다. button 안에 v-on:click 라는걸 써서 counter 에 1씩 더해줍니다. 그리고 Script문에서 보시면 example-1안에 data의 counter가 0부터 시작한다는 것을 알 수 있습니..

오늘은 Vue에서 조건문과 반복문에 대해서 알아보려고합니다. 일단 먼저 알아야 될것은 v- 로 시작하는 속성에 대해 알아보려고 합니다. 보시면 v-if 이런식으로 되어있는데 이것을 디렉티브라고 합니다. 여기서 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 조건문 v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. 이런식으로 if else를 구성할수 있네요. 스크립트를 보시면 app3라는 돔을 연결 후 awesome속성을 true로 정해주면 Vue is awesome이 출력됩니다. 반대로 false를 써주면 else문..

발표준비 겸 배우다가 중도포기했던 자바스크립트 프레임워크를 배워보려고합니다. 처음에는 리액트를 준비했지만 라라벨을 준비하면서 더 어울리는건 Vue가 더 어울린다고 생각해서 공부하게 되었습니다. 일단 자바스크립트 프레임워크는 자바스크립트로 작성된 애플리케이션 프레임 워크입니다. 여기서 프레임워크는 복잡한 코드나 내용을 간단하게 해주면서 미리 규격화 모듈화 되어있는 도구를 말합니다. 라이브러리는 단순 활용가능한 도구들의 집합을 말하고 프레임워크는 뼈대나 기반구조를 떠올리면 됩니다. 이제 Vue를 사용하려는 이유에 대해서 말하자면 자바스크립트의 유연함 때문인지 코드가 조금씩 복잡해지기 시작했고 이는 유지보수에 큰 악영향을 미쳤습니다. 이렇게 자바스크립트의 인기가 내려갈때 쯤 이 문제점들을 해결해주는 프레임워크..