vue18 [vue] v-slot 컴포넌트의 디자인을 바로 아래에 있는 컴퍼넌트에 전달해 재활용할 수 있는 기능이다. 부모 컴퍼넌트에 v-slot (#title) 로 정의 후 제목입니다 export default { name: 'Home', components: { About }, } 자식 컴퍼넌트에 를 이용해여 재활용한다 about 이라는 자식컴퍼넌트에선 로 감싸진 화면을 손쉽게 재활용 가능 동적으로 slot 할당하기 slotNum 데이터를 이용해 slot id를 동적으로 부여했다. 버튼을 클릭할때마다 slot id가 1,2를 왕복하며 움직인다. //부모 컴퍼넌트 {{slotNum}} //자식컴퍼넌트 1번쨰 슬롯 슬롯바깥 slotNum이 1일때에는 "슬롯바깥"이 출력되고 slotNum이 2일때에는 "1번째 슬롯"과 "슬롯바깥"이 출력된.. 2022. 1. 19. [vue] props props는 부모컴퍼넌트에서 자식 컴퍼넌트로 값을 전달할떄 사용함 단순 값 전달뿐 아니라 아래의 옵션 설정도 가능하다. props 각종 옵션들 - required 필수여부 - default 기본 값 - validator 유효성 검사 함수 #type props: { title: { type: [String,Number] //여러가지 타입 허용 } } #required props: { title: { type: [String,Number], //여러가지 타입 허용 required: true //필수로 전달 받아야함 } } #default props: { title: { type: [String,Number], //여러가지 타입 허용 default: 100 //부모 컴퍼넌트에서 보내주는 값이 없을시 기본값으로.. 2022. 1. 19. [vue] vue 키 이벤트 1차적으로 up, down, press를 입력한 후 추가로 enter, left, right, esc 등 조합하여 사용할 수 있다 data () { return { name: '' } }, methods: { printEvent (val) { console.log(val) } } 2022. 1. 19. [vue] watch / computed / watcheffect 위 키워드들은 데이터 값이 바뀔때마다 감시자 역할을 해주는 메소드들임 https://v3-docs.vuejs-korea.org/guide/essentials/watchers.html 감시자 | Vue.js v3-docs.vuejs-korea.org watch # watch 간단하게 사용하기 # 객체 감지하기 객체를 감지할때는 객체안의 요소만 감지할수는 없다. 첫번째 나열된 watch처럼 b 객체 전체를 감지해야한다. 이로 인해 특정한 데이터만 추출하여 감시하는 것이 아닌, 불필요한 데이터 전체를 감시하게 되어버리는데 이는 watch 문장을 조금 바꾸어주면 해결됨 # 기타 옵션들 ## deep deep은 배열이나 객체등 깊게 감시해주도록 나온것인데, 위에 나온대로 watch 문장을 바꾸어주니 해결됐음 v.. 2022. 1. 19. [vue] vue HTML 데이터 바인딩 (sanitize-html) v-html을 사용 div v-html="htmlString"> data() { return { htmlString: 'This is a red string.' } } 2023-01-14 v-html은 xss의 취약점이 있음 그래서 사용자로부터 입력받는 부분엔 사용하면 안됨. 만일 사용자가 라는 text값을 입력 후, 서버에 전송하여 데이터베이스에 저장하고 그걸 다른곳에서 v-html으로 호출할 시에, 실제로 스크립트가 실행됨 그런데 vue/cli@5.0.8 로 생성한 뷰 프로젝트에서는 v-html을 이용해 script태그를 넣어도 실행이 되지 않음 자체적으로 막아주게 패치됐나? 아무튼 다른 예시코드로 수정함 사용자가 click이벤트가 있는 div태그를 input으로 입력했다 가정할시, 실제로 이벤트가 .. 2022. 1. 19. [vue] vue 프로젝트 생성 # vue/cli 5.0.8 기준임 # npm init vite 명령어를 통해 vite 빌드도구를 선택할필요가 없다. ( vue/cli에서 기본적으로 vite를 선택하도록 바뀜 ) npm init vue를 입력시 아래 옵션이 제공된다. # project name # add typeScript # add jsx support : jsx 템플릿 기법을 사용할 것인지 => jsx란 리액트와 비슷하게 자바스크립형태로 템플릿을 작성함 # add Vue Router # add Pinia => 요새는 pinia로 가는것이 정배 # add vitest => 테스트 도구임 # add ESLint => 코드 검사도구 # add prettier => 코드 스타일 맞춰주는 도구 2022. 1. 18. 이전 1 2 3 다음
