프론트엔드/뷰(Vue) (8) 썸네일형 리스트형 vue3 setup 클릭 이벤트로 토글 제어하기 클릭 이벤트로 토글값 제어하기간단하지만 자주 쓰여서 기술 해보고자 한다.. Click me //클래스 값이 isOpen이면 top-line을, 그게 아니라면 빈 값 여기서 중요한건 ref는 .value로 값을 참조한다는 것 이고,클래스를 바인딩해서 상태에 따라 변경값을 줄 수 있다는 것 이다. vue3 라이브러리 primevue 적용 및 사용하기 vue3를 사용하게 되면서 다양한 라이브러리들 중 Primevue를 사용하게 되었다. 아래 링크에서 각 라이브러리의 점유율을 확인 할 수 있었다. https://npmtrends.com/bootstrap-vue-vs-element-ui-vs-primevue-vs-quasar-framework-vs-vuetify bootstrap-vue vs element-ui vs primevue vs quasar-framework vs vuetify | npm trends Comparing trends for bootstrap-vue 2.23.1 which has 331,837 weekly downloads and 14,446 GitHub stars vs. element-ui 2.15.14 which has 299,1.. Vue3 Composition API와 기초 문법 다뤄보기(2) Vue3 Composition API와 기초 문법 다뤄보기(1) 에 이어서 나머지 문법을을 다뤄보고자 한다. 6. 조건부 렌더링 v-if는 엘리먼트를 조건부로 렌더링 하기 위해 사용된다. 토글 버튼 Vue는 굉장해! 엄청나! 오 안돼 😢 v-if와 v-else가 있는 태그는 위 아래로 붙어 있어야 동작한다. 7. 리스트 렌더링 v-for을 사용해서 자료 배열을 렌더링 할 수 있다. {{todo.text}} v-for 사용시에는 고유의 key값을 꼭 넣어줘야한다. key를 사용하면 vue가 각 li를 정확하게 이동시켜 배열에서 해당 객체의 위치와 일치하게 할 수 있다. 할 일 추가 {{ todo.text }} X 8. 계산된 속성, computed computed는 반응 데이터 소스를 기반으로 .value.. Vue3 Composition API와 기초 문법 다뤄보기(1) 이번 프로젝트 때 Vue3 환경에서 Composition API를 사용하고 있다. vue3 기본문법을 정리하고자한다. 1.Vue3의 특징 1-1. 선언적 랜더링 (Declarative Rendering) 컴포넌트를 랜더링 할 때 HTML과 vue에서 제공하는 Template 문법을 가지고 컴포넌트가 어떻게 보이면 되는지를 정의해주면 된다. 쉽게 말해서 컴포넌트 형태를 정의하면 되는 것 이다. 상태가 변경 될 때 자동으로 업데이트 된다. 1-2. 반응성 (Reactive) 변경될 때 업데이트를 트리거 할 수 있는 상태를 반응형으로 간주한다. Vue에서 reactive() 를 선언하면 반응형 상태가 된다. reactive()는 객체(배열, Map, Set)에서만 작동한다. 반면 ref()로 선언해주면 모든 .. visual studio에서 Vue 처음 셋팅해보기 스크립트 연결 대신 웹팩을 이제 사용해보자.(스크립트가 많아지고 복잡해짐에 따라 하나로 합쳐버릴려고) 먼저 node를 설치하고(LTS를 받는 것이 좀 더 안정적임) 노드 설치하고 터미널에서 버전확인 가능 node를 설치하면 npm 사용가능 남이 만든 자스코드를 가져다 쓸 수 있음(버전 나옴) package.json 까지 생성완료! (버전관리를 정확히 기억하기 위해서 package.json을 만듬) 뷰 설치..(내가 듣는강의가 vue2를 사용하는지라... @2를 붙힘) 웹팩과 웹팩 cli를 사용하겠다. 개발할 때만(-D) -D대신 --save-dev 입력해도됌. Vue component(컴포넌트)의 특성을 알아보자 Component 기본 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 시킨다. html이 중복되서 같은 코드를 반복 할 때 그 코드를 그대로 html에 두지말고 컴포넌트를 하나 생성해서 그 안에다가 선언해주면 된다. Vue 컴포넌트는 Vue 인스턴스이기도 하다. 따라서 모든 옵션 객체를 사용할 수 있다.(루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있다. 컴포넌트 사용하기 1. 전역등록 Vue.component('example-component',{ //옵션 }) 이렇게 등록 한 후 2. 컴포넌트는 인스턴스에서 커스텀 엘리먼트로 사용이 가능하다. //등록하기 Vue.component('example-component',{ template:'사용자 정의 컴포넌트' }) //루.. Vue를 이용한 구구단 만들기 (v-on:submit, ref, v-model) {{first}} 곱하기 {{second}}는? 입력 {{result}} v-on:submit 버튼을 클릭하거나 Enter키를 눌러 양식 제출을 하면 Vue의 구성요소에서 정의된 onSubmitForm가 실행된다. 동일한 결과를 얻기 위해서는 @submit.prevent="onSubmitForm"도 사용이 가능하다. v-model 변경과 데이터를 엮어줌, v-model이라고 선언한 곳과 데이터가 쌍방향으로 연동된다. (form의 input요소나 textarea, select 요소에 데이터 바인딩을 만들고 싶을때) refs 개발자가 직접 DOM 엘리먼트에 접근해야 하는 경우가 있을 수 있다.(ex. input에 커서를 올리지 않아도 focus 유지 되게끔) ref = "answer" 로 선언해주고, thi.. Vue.js 기초셋팅 1. Vue 사용시 cdn 스크립트 추가 2.react와 마찬가지로 처음에 id="root"로 큰 div하나를 만들어주고 그 안에 마크업을 해준다. 조아! 여기서 변수는 언제든 바꿔도 상관이 없지만 안에 들어가는 el, data, methods는 외워둘 것! 3.이후에 실행하고자하는 코드들을 추가해준다(button을 누르면 '눌렸음' 이라는 텍스트가 button 대신 나오게끔) 눌렸음 조아! 여기서 html 앨리먼트 태그에 붙은 v-if, v-else-if는 앞에 v가 붙음으로서 vue가 통제하겠다는 뜻. onClick 이런것들도 앞에 v를 붙혀주면됨. ex) onClick -> v-on:click="onClickButton()" v-if, v-else-if 같은경우 형제이기 때문에 중간에 다른 태그나 .. 이전 1 다음
