vue6 유효성 검증을 위한 vee-validate 플러그인 설치 version 3.4.10 npm install vee-validate // main.js import veeValidate from 'vee-validate'; new Vue({ veeValidate }).$mount('#app'); 적용 // in component import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'; import * as rules from 'vee-validate/dist/rules'; import {messages} from 'vee-validate/dist/locale/ko.json'; import {configure} from 'vee-validate'; // configure 통해 각 .. 2021. 7. 15. vue에서 textarea의 줄바꿈 글을 표현할 때 vue에서 textarea로 입력받은 값을 textarea 안에서가 아닌 일반 html에서 보여줄 때의 방법을 정리해본다. 줄바꿈이 들어간 경우 바로 html에 값으로 넣어주면 줄바꿈이 표시되지 않는데 이럴땐 아래 계산식 즉, computed를 이용하여 값을 정제해준다. computed: { content() { return this.content.split('\n').join(' '); //return this.content.replace(/(?:\r\n|\r|\n)/g, ' '); 정규식 }, }, copputed를 작성 후, 해당 html이 들어간 content 값을 dom에 넣어야하는데 {{ 값 }}으로 넣어주면 string으로 표현되기 때문에 v-html을 같이 써줘야한다. 이렇게 하면 br 속.. 2021. 7. 15. vue-awesome-swiper 의 IE issue Syntax error vue-awesome-swiper 설치 후 IE11 에서 안보이는 이슈가 발생하였다. 코드는 아래와 같이 작성하였다. import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; export default { name: 'test', components: { Swiper : Swiper, SwiperSlide : SwiperSlide }, directives: { swiper: directive, } //...생략 } 뭐 대강 이런식으로.. 그런데 확인겸 IE를 확인해보다가 구문오류 이슈를 확인한 것이다. IE 꼭 맞춰야하나.... 내년이면 아웃인데.... 찾고찾고찾고. 이것때문에 아까운 .. 2021. 7. 7. Vue.js 처음에 알았더라면 좋았을 사소한 것들. Vus.js를 처음 사용하는 사람이 알았으면 좋았을.. 사소한 것들을 정리 한다. 1. Alias (별칭) 보통 vue 에서 PATH 에 대한 별칭으로 @ (이하 /src/) 를 쓰는데 style에서는 단독으로 쓰여지지 않는다. style에서는 ~를 앞에 붙여 적용하면 @가 반영된다. @import "~@/assets/css/common"; // style 2. 라이브러리 버전에 따른 빈번한 오류 CDN이 아닌, CLI를 통한 Vue를 쓸때 라이브러리 버전이나, 웹팩버전이 여러가지인데 .. 무조건 최신의 것이 좋은 것은 아니라는 것이다. 라이브러리마다 또는 Vue버전마다 상호 작용하는게 달라서 이를 맞추지 않는다면 빈번한 오류를 경험하게 된다. vue-cli를 통해서 프로젝트 생성시 최신의 버전이 설치되.. 2021. 6. 29. Vue.js 문법 정리 해당 게시물에 계속해서 업데이트합니다. {{변수명}} // 문법 new Vue({ el : '#test', data : {}, // 데이터 변수 method : {}, // 함수 computed : {} // 계산식 }) 1. v-html="vue변수명" - 태그 변수를 넣을때 사용. 부모 엘리먼트에 속성으로 넣어주면 안에 만들어짐. // js new Vue({ el : '#test', data : { tag : 'test' } }) // html //div 안에 tag의 할당된 태그가 넣어짐. 2. v-bind:속성이름 - 속성에 뷰 변수를 넣을때 사용 v-bind:href="vue변수명" - 약어 : // js new Vue({ el : '#test', data : { site : 'http://te.. 2021. 6. 29. Vue.js 환경 만들기 환경 설정에 대한 정리 포스팅입니다. node.js 다운로드 및 설치 vscode 에 터미널로 프로젝트를 할 폴더에 npm install (vscode에 Veter 설치) 터미널 vue install -g @vue/cli // vue-cli 설치 vue create 프로젝트명 // 프로젝트 생성 * create 명령어 썼다가 오류 발생 찾아보니 vscode가 기본으로 설정되는 터미널이 파워쉘을 쓴다고 해서 문제가 된 듯하다. 기본 터미널을 cmd로 바꿔줘야한다고 한다. vscode 에서 ctrl+shift+p 로 shell default 를 cmd로 변경해도 같은 오류가 나서 결국 cmd 창을 켜서 했더니 프로젝트 만들어진다. 개짜증 * npm을 통해 다운로드한 모듈을 다음에도 패키지로 다운로드 할 수.. 2021. 6. 29. 이전 1 다음
