공부/Vue.js6 [vue] 별점만들기 vue로 별점 스코어 만들기. :_uid를 통해 컴포넌트를 여러개 불러와도 해당 컴포넌트만 인식해 체크되도록 했다. 별점 점수 표현을 parseInt(score).toFixed(1)로 소수점 1자리까지만 표현하였다. (5.0) {{ parseInt(ratings).toFixed(1) }} {{ parseInt(score).toFixed(1) }} 2023. 4. 4. [Vue.js / javascript] 숫자 3자리마다 콤마(,)찍는 정규식 (필터) 필터 안에 comma함수 생성, data에서 값 받아오기 필터위치는 data()와 동일선상 코드(script) data() { return{ filterNumber : 1000000 } } filters: { comma(val) { return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ',') } } 사용법(Html) {{ filterNumber | comma}} 결과화면 1,000,000 2023. 2. 21. Vue 기초- components 연결, 데이터 전달(props) Vue.js 기본 컴포넌트 상위 컴포넌트(부모 컴포넌트)와 생성한 하위 컴포넌트(자식 컴포넌트)간의 연결 및 데이터전달 연결방법 : 상위에서 import하고 경로작성 , components로 명시 데이터 전달 방법 상위 > 하위 : props 하위 > 상위 : 이벤트만 전달 가능 상위컴포넌트 하위 컴포넌트 {{ 프롭스이름 }} 예시) // 상위 컴포넌트 ======================================== // 하위 컴포넌트 {{ test }} 2023. 1. 30. vue 시작하기 Vue.js vue 공식 사이트 설치 npm install --global @vue/cli vue --version // 뷰 버전확인(설치확인) 시작 vue create 폴더명 // 작업폴더 생성 cd 폴더명 // 폴더로 경로이동 npm run serve // 서버실행 세팅 터미널 새로 오픈시 경로 확인(생성한 폴더 내부에서 작업) 1. 라우터 설치 npm i vue-router --save 설치확인 : package.json파일에서 vue-router이 추가되었는지 확인 "dependencies": { "vue-router": "^3.5.2" } 2. vutify Vue에서 가장 많이 사용되는 UI toolkit 기초문법 v-for 반복문 {{ todo.text }} v-if / v-else 조건문 반.. 2021. 11. 3. 이전 1 2 다음 반응형
