본문 바로가기

프로그래밍/vue js5

[Vue] Vue 에디터 Toast ui editor 플러그인 설치 Toast Ui Editor를 vue/cli로 설치해서 사용하면 기본적인 editor 기능을 사용할 수 있지만, 기본으로 지원하지 않는 기능들을 플러그인으로 제공하고 있다. (에디터에서 제공하는 플러그인은 현재 5개이며, 추후 자주 사용되는 기능이 추가될 예정이라고 함 ) (https://github.com/nhn/tui.editor/blob/master/docs/ko/plugin.md 여기서 확인할 수 있다.) 이번에는 글씨색을 바꿔주는 플러그인을 설치해보려고한다. 1.vue/cli를 통한 설치 npm install --save @toast-ui/editor-plugin-color-syntax package.json에 의존성이 추가된 것을 확인할 수 있다. 2.editor components에 플러그인.. 2021. 7. 22.
[Vue] Vue.js 에디터 TOAST UI EDITOR 1. vue/cli를 이용해서 TOAST EDITOR 설치 npm install --save @toast-ui/vue-editor package.json에 dependencies가 생성됨을 확인할 수 있다. 2. ToastEditor 컴포넌트 만들어보자. src/components/common/ToastEditor.vue 3. 에디터 화면 2021. 7. 22.
[Vue.js] 2.Vue.js 인스턴스 ■인스턴스 1. 뷰 인스턴스 소개 뷰 인스턴스 : 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드입니다. º 인스턴스 생성 인스턴스를 생성하고 나면 아래와 같이 변수안에 인스턴스를 담을 수 있다. 그렇다면 해당 인스턴스를 어떻게 사용할 것인가? 1) 인스턴스를 생성해주고 2) 인스턴스 - 태그를 id값으로 연결해준다음에 속성값을 할당해주면 해당 태그는 인스턴스에서 사용가능. 2. 인스턴스 옵션 속성 인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다. ⊙ el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그) ⊙ template: 화면에 표시할 요소(HTML, CSS 등) ⊙ data: 뷰의 반응성(Reactivity)가 반영된 데이터 속성 ⊙ methods: 화면의 동작과 이벤트 로.. 2020. 1. 12.
[Vue.js] 1.Vue.js 개발환경 설정 세팅 Vue.js 소개 ■개발환경 설정 1. visual stuio code 설치 - https://code.visualstudio.com/ 에서 자신의 OS환경에 맞는 VSCode 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com ※ Visual Studio code란.. 2020. 1. 12.