본문 바로가기
반응형

Library & Framework/VueJS33

[VueJS] vuejs 기본 템플릿 자동 완성 기능 사용하기 (ft. SFC) VSCode로 VueJS 프로젝트를 생성해서 작업을 하다보면 SFC 형식의 .vue 파일을 만들게 된다. HTML 템플릿처럼 SFC역시 템플릿 자동완성 기능이 있는데 한번 사용해보자. 1. 우측 하단에 파일 형식이 Vue가 맞는지 부터 확인해보자. (뭔가 HTML 템플릿도 저 파일 형식을 확인하는거보니 이것도 확인해주는게 좋을듯 하다. 자동감지라 맞을것이다.) 2. 그리고 "vue"를 입력하고 엔터를 눌러주면... (아래 이미지처럼 저렇게 자동완성이 나타나야한다.) 3. 이제 기본 탬플릿이 자동 완성된다. 2022. 5. 4.
[VueJS] Error : vue/multi-word-component-names https://simplevue.gitbook.io/intro/02.-component 02. Component 구성해보기 - simpleVue component 별로 html, script, style 을 관리 할 수 있기 때문에 관림사 분리화, 모듈화가 쉬워졌습니다. component 를 잘 쪼갤수록 복잡한 tag, style 관리 또한 없어집니다 :) simplevue.gitbook.io 위 과정을 따라 하다 보면 아래와 같은 에러가 발생한다. Component name "Menu" should always be multi-word vue/multi-word-component-names 쉽게 따라 해 보라고 해놓곤 두 번째 챕터부터 에러가 발생해 따라 할 수 없는 안타까운 상황이 발생해 버렸다. 이.. 2022. 5. 3.
[VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) VSCode에서 Vue.js 개발 환경을 구축해보자. VueJS는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI인 Vue CLI를 제공한다. 우선 VSCode와 Node.js가 당연히 있다는 가정하에 시작해보도록 한다. 아래 명령어를 통해 vue/cli를 설치한다. npm install -g @vue/cli 이제 설치가 완료되었다면 vue가 설치가 잘 된 건지 확인할 겸 아래 명령어를 입력해주자. vue --version 여기서 주의할 점이 몇가지 오류가 발생하는지 모르겠는데, 총 두 가지 에러가 발생할 수 있다고 한다. (나 같은 경우는 윈도우 정책에 막혀서 설치는 됐으나 실행이 안 되는 오류가 발생하였다.) 우선 1. 보안 오류 - 이 시스템에서 스크립트를 실행할 수 없으므로 ... .. 2022. 5. 3.
[VueJS] v-cloak : 렌더링 되기 전 {{ }}(머스태쉬 태그) 숨기기 vueJS에서 제공해주는 v-cloak 디렉티브에 대해 알아보자. vueJS를 사용하자마자 눈에 거슬리는게 있는데, 이게 바로 머스태쉬 태그{{}} 이다. script 코드가 아직 실행되기 전이여서 값이 바인딩 되기 전에 깜빡이며 잠깐 보이는건데 이게 매우 거슬린다. 이럴때 사용하는게 v-cloak 디렉티브이다. v-cloak 디렉티브를 사용하여 렌더링되어 바인딩 되기 전에 {{}}태그를 숨길 수 있다. 예제 코드를 통해 사용방법에 대해 알아보고 vueJS를 사용하면서 거슬렸던 깜빡임을 제거해보자. ▷ 예제1) v-cloak 디렉티브 기본 사용법 메시지: "{{ message }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, }) 이렇.. 2021. 11. 11.
[VueJS] v-once : 정적 콘텐츠 지정, 정적 디렉티브 vueJS의 기본 디렉티브 중 하나인 v-once에 대해 알아보자. 제목처럼 v-once가 정적 디렉티브라 불리는 이유는 처음 한번만 렌더링을 수행하며, 그 이후 데이터가 변경되어도 그대로 유지되기 때문이다. 즉, 처음 렌더링 된 후 캐싱되도록 지정한다고 생각하면된다. 이러한 특성을 사용하여 정적 콘텐츠를 지정할 수 있다. 예제를 통해 실제 어떻게 적용되는지 알아보도록 하자. ▷ 예제1) v-once 기본 사용법 유지 메시지: "{{ message }}" 변경 메시지: "{{ message }}" 내 블로그는 mine-it-record야 var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, methods : { change : function().. 2021. 11. 11.
[VueJS] computed와 watch 속성 사용법 vueJS에서 제공하는 computed와 watch 속성에 대해 알아보자. 왜 이 두가지를 동시에 다루냐면 서로 비슷한 특징을 가지고 있기도 하고, 처음 접할때도 둘을 비교하는 경우가 많았기 때문에 나 역시 같이 기록해두고자 한다. 역시 vueJS는 공식홈페이지가 너무 잘되어있기 때문에 예제를 그대로 가져와 사용해보고자 한다. 1. computed 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, computed: { reversedMessage: function () { return this.message.split('').reve.. 2021. 9. 7.
[VueJS] checkbox 사용 및 활용 방법 (ft. v-model를 활용한 checkbox 사용) vueJs에서 checkbox를 사용하는 방법에 대해 알아보자. checkbox를 쓸때는 checkbox에 값을 넣어두고 체크여부에 따라 값을 가져오고는 하는데 vueJs에서는 신기하게도 값을 알아서 넣어준다. 코드를 통해 접근해보자. ▷ html mine it record check ▷ script new Vue({ el: '#app', data: { arr : [] }, methods : { checkArr : function() { console.log(this.arr); } } }); 이런식으로 구성되어있다면 어떤식으로 작동할까? 일단 화면구성은 아래와 같다. 이 상태의 화면에서 아래와 같이 몇개를 체크해보고 'check' 버튼을 눌러보자. ▶ 결과 저런식으로 v-model로 연결되어있는 배열에 .. 2021. 8. 30.
[VueJS] The "data" option should be a function that returns a per-instance value in component definitions error 자주 보는 에러는 아니지만 한번 겪은김에 기록해둔다. The "data" option should be a function that returns a per-instance value in component definitions 에러 내용을 살펴보면 대략 살펴보면 "데이터" 옵션을 함수로 선언하고 return을 통해 각 변수들을 반환하라는 의미로 보이는데 에러 뒷부분에 명시된것처럼 이 에러는 Vue.component 에서 발생하는 에러이다. Vue에서 data 옵션을 선언하는 방법과 Vue.component에서 data 옵션을 선언하는 방식에 차이가 존재하는데 즉, Vue.component에서 data 옵션을 잘못 선언했을때 발생하는 에러라는 의미이다. ▷ 에러가 발생한 코드 Vue.component('.. 2021. 6. 15.
[VueJS] 부모, 자식 간의 메소드 사용/접근하기 (ft. $parent, $refs, Inline Templates) vueJS에서 여러 component를 자식으로 두고 페이지를 구성할 때 공통으로 사용하는걸 상위 컴포넌트에 두고, 하위 컴포넌트에서 이를 사용하게 되는 방식으로 구현을 하게 되는데, 이때 상위 컴포넌트와 하위 컴포넌트 간의 메서드에 접근하는 방법에 대해 알아보자. 예제는 inline-template을 기반으로 하였으며 이 template 사용법은 3.x 버전부터는 사용이 중지된것으로 알고있다. ▷ 예제1) inline-tempate example mine it record VueJS Vue.component('mine-it', { data() { return { test : 'hi' } }, methods: { goParnet : function(){ this.$parent.goChild(); }, h.. 2021. 2. 20.
반응형
TOP