H-Yujin H-Yujin

react+vue

• [vue]메서드

  react+vue 2022. 11. 9. 16:16

  숫자 증가시키기 예제 data에 number 변수 정의 {{number}} methods에 number 더하는 함수 추가, 버튼 추가 {{number}} 증가 number is not defined number 변수가 정의되지 않았다는 에러가 난다. this 키워드 사용 {{number}} 증가 화면은 뜨지만 버튼을 클릭하면 TypeError: Cannot read properties of undefined (reading 'number') 여전히 에러가 뜬다. 기본 함수 형식 사용 {{number}} 증가 화살표 함수를 쓰면 scope가 달라지기 때문에 this가 가리키는 영역이 달라진다.

  Read More
• [vue]v-for 조건부 랜더링(template태그)

  react+vue 2022. 11. 9. 14:20

  조건부 렌더링 v-if와 v-for는 함께 사용할 수 없다 {{index}}:{{animal}} 태그를 중첩시키는 방법 {{index}}:{{animal}} h2와 span태그가 반복되는 만큼 생성되어 비효율적이다. template 태그 사용 {{index}}:{{animal}} 중첩태그 없이 필요한 개수만큼 태그가 생성된다.

  Read More
• [vue]v-for

  react+vue 2022. 11. 9. 14:06

  v-for 배열 출력 {{animals}} {{animal}} v-bind:key를 지정해 주어야한다. key값은 고유한 값이 어야하므로 고유한 값을 대입해 준다. v-for의 두번째 인자 index {{index}}:{{animal}} index는 고유값이므로 key에 대입시킬때 유용하다.

  Read More
• [vue]v-show와 v-if의 차이

  react+vue 2022. 11. 9. 12:44

  v-show v-if보입니다. v-show보입니다. display값을 true로 주었을 때 둘 다 같은 결과를 노출한다. display값을 false로 주었을 때 v-if는 태그 자체가 주석처리되고, v-show는 style속성이 display:none으로 처리된다. 렌더링 시간을 고려하여 렌더링 시간이 많이 걸리는 컴포넌트를 노출시켜야할 때는 v-show를 사용하고 v-else나 v-else-if를 사용해야 할 상황이라면 v-if를 사용한다.

  Read More
• [vue] 조건부 렌더링(v-if)

  react+vue 2022. 11. 9. 12:42

  v-if 조건절을 넣어서 참이라면 태그를 노출하고 거짓이라면 노출하지 않는다. 당신의 나이는 {{age}}입니다. 당신은 성인 입니다. v-else, v-else-if 조건 v-if와 같은 부모 태그 아래에 있어야한다. v-if나 v-else-if와 연속하여 있어야한다. 당신의 나이는 {{age}}입니다. 당신은 성인 입니다. 나이를 입력해주세요. 당신은 미성년자입니다.

  Read More
• [vue]템플릿문법 (v-bind, class)

  react+vue 2022. 11. 9. 10:35

  v-bind url을 변수로 바인딩 시켜주는 속성 naver export default { name: 'App', data: ()=>{ return { animal:"Monkey", alertMessage:"경고", imageSource:"", naverUlr:"" }; } } v-bind:을 쓰고 원래 태그의 속성인 src에 변수를 바인딩 시켜준다. v-bind를 생략하고 :콜론만 작성해도 무방하다 a태그의 href 속성에 변수를 대입하면 동적으로 href를 바인딩할 수 있다. 위의 예제에서는 naver주소를 바인딩 시켰다. 동적으로 class 부여하기 내가 제일 좋아하는 {{animal}} v-bind를 사용해 클래스를 동적으로 걸 수 있다. 객체로 클래스이름과 true/false여부를 지정해 주면 ..

  Read More
• [vue]템플릿 문법 (mustache, v-text, v-model, v-html)

  react+vue 2022. 11. 9. 10:10

  mustache {{animal}} data속성에서 animal을 리턴 시켜준후 중괄호 두개로 감싸서 노출시킨다. v-text 태그안에 v-text라는 속성에 대입하여도 결과는 같다. 하지만 태그사이에 또다른 문자를 입력한다면 에러가 발생하여 mustache문법을 더 많이 사용한다. dfdfdf v-model {{animal}} input 태그에 값을 넘겨줄때 사용한다. 만약 사용자가 input태그의 값을 변경하면 animal의 값도 변경된다. v-html {{animal}} v-html속성으로 html을 작성할 수 있다.

  Read More
• [vue]뷰 개발환경 준비

  react+vue 2022. 11. 9. 09:25

  Vue 설치 npm install -g @vue/cli 에러 npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/@vue npm ERR! errno -13 해결 sudo npm install -g @vue/cli 프로젝트 세팅 vue create [프로젝트명] vue3선택 cd [프로젝트명] npm run serve #프로젝트 실행 확장프로그램 vetur

  Read More