IT이야기/Vue 공부하기 (3) 썸네일형 리스트형 vue js! select value값 연동하기! v-model의 사용법 응용중 하나. select 뿐 아니라 checkbox도 동일! 하나만 선택 가능 복수응답 가능 대충 이런식으로 사용한다. 스크립트 소스는 사용하는것중 다 자르고 일부만 가져온것으로 전부 복붙 하지 않기로 하자. v-model="picked" 의 picked가 변수명이다. 그리고 스크립트에서 this.picked를 하면 선택한 밸류값을 가져올 수 있다. 당연 양방향 바인딩이기에 변경도 가능. 일렉트론 + vue 다른 js 파일 import 하기! 개발환경: 일렉트론, vuejs 웹이 아닌 윈도우 어플리케이션으로 만들 경우 vue 기본 틀이 달라지기에 어떻게 import를 할지 정리겸 써봄 우리가 포함할 대모는 바로 이것! 이거 그냥 캔버스같은거임. 설명이 매우 심플하며 vue용이 아닌 일반 js html5 기반이다.! 일단 npm으로 인스톨! 하지만 일렉트론의 경우는 yarn add를 통해 해당 모듈을 포함해준다. 그런후 내가 넣고 싶은 페이지로 이동! 가이드 대로 id값을 맞춰준후 template에다가 넣기! 이런식으로 import를 해주면 완성! 알고보면 어렵지 않지만 일렉트론이 typescrit 기반이기때문에 문법 오류등 다양한 오류를 직면하면 하나하나 해결하는데 힘들고 아리까리해진다. 그러나 알고보면 쉽다는거! vue v-model 사용법! v-model의 동작 원리와 활용 방법 들어가며 오랜만에 글을 쓰네요. 오늘은 Vue.js로 Form 요소를 개발할 때 사용하는 v-model 속성에 대해서 살펴보려고 합니다. 이 속성은 그냥 사용하면 그렇게 어렵지 않은데 실제 애플리케이션을 개발할 때는 꽤 주의해서 다뤄야 합니다. 그럼 v-model의 동작 원리와 활용 방법 등에 대해서 알아볼게요! v-model 속성 공식 문서에 안내된 v-model 속성의 사용법은 아래와 같습니다. 이렇게 사용자의 입력을 받는 UI 요소들에 v-model이라는 속성을 사용하면 입력 값이 자동으로 뷰 데이터 속성에 연결됩니다. v-model은 어떻게 동작할까? v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작합니다. 매번 사용자가 일일이 v-bind.. 이전 1 다음
