vue.js48 09장 03. 정리 Markdown으로 표시 1. marked.js 라이브러리를 CDN에서 설치 2. Markdown 기법의 문자열을 HTML로 변경하고 싶을 때는 marked(문자열);을 사용. 여기서는 문자열이 들어간 this.input을 넣는다. marked(this.input) Markdown 에디터 예제 new Vue({ el:'#app', data:{ input:'' }, computed:{ // input이 변하면 convertMarkdown 실행 convertMarkdown: function(){ return marked(this.input); } } }) 2023. 5. 16. 09장 02. Markdown 에디터 작성 Markdown 에디터 예제 : markdown.html 1. 준비 - Vue.js 라이브러리와 marked.js 라이브러리 연결 2. HTML 태그 준비 3. Vue 인스턴스의 작성 - data: 에 input 프로퍼티를 준비하고 값을 공백으로 초기화 - computed: 에 convertMarkdown 프로퍼티를 준비하고 function을 만들어 this.input의 값을 Markdown 형식으로 변환하도록 반환한다. new Vue({ el:'#app', data:{ input:'' }, computed:{ // input이 변하면 convertMarkdown 실행 convertMarkdown: function(){ return marked(this.input); } } }) 4. 연결법 결정 - t.. 2023. 5. 16. 09장 01. Markdown 에디터란? - Markdown 기법 : 문장/문서를 가볍게 작성할 수 있는 "문장 작성법" 중 하나 항목 Markdown HTML 표제1 # text text 표제2 ## text text 표제3 ### text text 표제4 #### text text 표제5 ##### text text 번호 없는 리스트 - text text 번호 있는 리스트 * text text 강조 *text* text 강한 강조 **text** text 취소선 ~~aa~~ text 수평선 ---- 링크 [text](url) text Markdown 에디터의 설계 1. 준비 - Vue 라이브러리와 Markdown 라이브러리를 설치 markded.js 라이브러리의 CDN 지정 방법 2. HTML 태그 준비 - textarea 태그(입력용)과 .. 2023. 5. 16. 08장 03. 정리 - 어떤 데이터의 값을 바꿀 때 자동으로 계산하고 싶다면 computed 옵션 - Vue 인스턴스의 computed: 에 data: 의 프로퍼티를 사용한 계산식을 준비해두면 프로퍼티 값의 변화가 있을 경우 자동으로 재계산. - 어떤 데이터의 값이 바뀔 때 자동으로 메소드를 재실행 시키는 것은 watch 옵션 - Vue 인스턴스의 watch: 에 data: 의 프로퍼티를 사용한 메소드를 준비해두면 프로퍼티 값이 변할 때 자동으로 재실행. 데이터가 변하면 자동으로 다시 계산 1. HTML에서 표시하고 싶은 곳에 {{ 프로퍼티명 }}으로 작성 {{ taxIncluede }}원 2. Vue 인스턴스의 computed: 에 데이터가 변하면 다시 계산하는 계산식을 준비 computed: { taxIncluded: .. 2023. 5. 15. 08장 02. 데이터의 변화를 감지 : 감지 프로퍼티 보호되어 있는 글 입니다. 2023. 5. 15. 08장 01. 데이터를 사용한 별도 계산 : 산출 프로퍼티 보호되어 있는 글 입니다. 2023. 5. 12. 이전 1 2 3 4 5 6 7 8 다음