천소희

기록하는 개발자

업데이트:

카테고리:

/

태그: ,

확장 프로그램 vetur - 코드 보기가 깔끔해짐

vue 파일 구조

package.json

dependecies : 개발 - 배포에 중요한 패키지
devDependencies: 개발에 필요한 패키지, 배포에는 크게 문제가 없음

public > index.html

뷰에 기본이 되는 보여주는 화면

src > main.js

index.html에 컴포넌트를 넣어줌 [기본은 div#app]

부트스트랩 사용

index.html 에 부트스트랩 cdn을 적용하면 모든 컴포넌트에서 스타일이 적용된다.

뷰 컴포넌트

export default {
	setup() {
		const name = 'Sohee Coder';
	 
	return {
		name
		};
	}
}

setup 함수 내에 변수를 선언하고 그 변수들을 마지막에 return한다
선언된 변수는 template 안에서 자유롭게 사용가능하다.

함수

<template>
  <div class="name">
    
  </div>
</template>

<script>
export default {
  setup() {
    const name = 'Sohee Coder';
    

    const greeting = (name) => {
      return 'Hello, ' + name;
    };

    return {
      name,
      greeting
    };
  },
}
</script>

변수 선언하는 것과 비슷하지만 return 값이 있어야함
template에서 사용시 () 가 필요한 것이 차이
괄호안에 인자를 넣어서 함수 내에서 활용하는 것도 가능!

이벤트

  • 어떤일을 행했을 떼 어떤일이 발생하는 것
  • v-on을 사용하여 이벤트를 걸어준다.

반응형 웹사이트

import { ref } from 'vue' 를 사용

setup() {
    const name = ref('Sohee Coder')

    const updateName = () => {
      name.value = "Sohee idet"
      console.log(name)
    }

값을 ref() 로 감싸고 바꿀려는 변수의 value 를 변경해준다.
ref안의 값은 뭐든 가능하다.

배열이나 객체는 import { reactive } from 'vue' 를 사용

setup() {
    const name = reactive({
			id: 1
		})

    const updateName = () => {
      name.id = 2
      console.log(name)
    }

참고