HTML5 aduio 태그 사용 방법 1. 일반 연결 방법 2. 링크가 달라 질 때 마다 변경 하는 방법 1. 일반 연결 방법 Vue templete 안에 태그를 넣어 src로 링크를 연결 해주면 된다. ex) 2. 링크가 달라 질 때 마다 변경 하는 방법 * 방법이 다른 이유 나뉜 이유 연결 링크는 바뀌었고 데이터도 바뀌었지만 태그는 이전에 연결 된 링크를 잡고있기 때문에 따로 append 해주어야 한다. 1. audio 함수를 생성해준다. 2. 나와야 하는 audio 태그를 string형식으로 return 할 수 있게 만들어 준다. 3. template 태그에서 태그안에 audio 함수를 넣어준다. 4. 들어가야하는 음성 링크를 작성한다. ex)

Vue 개발 중에 한 줄 띄어쓰기 같은 html 속성을 사용하려고 할 때 // parent.vue modalMsg.value = `안녕! 안녕하세요?`; //children.vue {{ props.msg }} modalMsg에서 받은 데이터를 html태그로 인식 하지않고 그대로 나오게 된다. 해결 방법 // parent.vue modalMsg.value = `안녕! 안녕하세요?`; //children.vue v-html에 전달 받은 데이터를 넣어준다. 결과 를 html 태그로 인식하고 한 줄 띄어쓰기를 한다.

파일을 업로드 할 때 이용자가 어떤 이미지 파일을 넣었는지 알 수 있게 화면에 띄우는 방법 vuetify, vue 사용 Web API의 readAsDataURL() 함수를 사용 https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL FileReader.readAsDataURL() - Web API | MDN readAsDataURL 메서드는 컨텐츠를 특정 Blob 이나 File에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, readyState (en-US) 의 상태가 DONE이 되며, loadend (en-US) 이벤트가 트리거 됩 developer.mozilla.org 추가 * vuetify의 v-file..

view와 component 모두 같은 .vue의 확장자 파일이다. router에서 경로 변경 하여 view를 호출 => view에 사용하는 component를 import => 화면 출력 종류 사용 이유 view router에서 호출할 경로가 설정된 vue 파일 (경로 역활) component view에서 import할 vue파일 (method등 실제 작동하는 코드 보유)

부모 컴포넌트에서 props으로 Object 형식으로 값을 넘겨 줄때 1. Object를 전체로 넘겨주는 경우 //부모 컴포넌트 /////////////////////////////////// //자식 컴포넌트 watch:{ data(){ console.log('감지') } } Object 하나를 다 던져 주고 watch로 잡는다면 data.name이 변경이되어도 감지가 되지않는다. 2. Object 안에 변수 하나하나를 props로 내려주는 경우 //부모 컴포넌트 /////////////////////////////////// //자식 컴포넌트 watch:{ name(){ console.log('name 감지') }, age(){ console.log('age 감지') } } watch가 data.na..

차트 생성방법: https://crispypotato.tistory.com/146 Vue에서 Chart.js만 사용하는 방법 vue-chart.js와 같은 vue에서 chart.js를 쉽게 사용할수있는 라이브러리가 있지만 chart.js를 그대로 사용하는게 react와같은 프레임워크가 다른 곳에서도 사용하기 좋을꺼같아 chart.js만 사용하여 데이터 crispypotato.tistory.com 위에 링크대로 차트를 구현하고 안에 데이터값만 변경해주면 mounted 될 때 자동 적용/변경 이라고 생각을 했다. 하지만 이전 데이터가 출력이 되는 현상이 생겨 알아보니 데이터가 변경되는것을 감지해야한다. 순서 1. props 또는 vuex를 이용한 데이터 받아오기 2. let chart 변수 생성 3. cre..