3. 스크립트 파트

<script>

import SubTitle from './components/SubTitle.vue';

import MainText from './components/MainText.vue';

  export default{

    components:{

      SubTitle,

      MainText

    },

    data() {

      return {

        title : "애국가",

      }

    },

    methods:{

      add(num1, num2){

        return num1+num2;

      }

    },

    props:{

      msg1:String,

      num:Number,

      age:Number

    }

  }

</script>

import는 외부 컴포넌트 가져오는거고,

 

data()는 저기 안에 변수 지정,

title의 값이 애국가임.

참고로, 이 data() 안에 정의되어 있는 값이 바뀌면 화면이 다시 랜더링 됨. 이걸 반응형이라고 함.

참고로, 저 title의 값을 참조하는 거지 변수는 아님.

 

methods는 함수 지정.

{{add(1,3)}} 이렇게 쓸 수 있음.

아니면 태그에 이벤트로

<button @click="add(1)">+1</button>

이런 식 으로도 사용할 수 있다.

인자가 하나도 없으면 괄호 안써도 됨.

 

 

props는 외부에서 v-bind를 통해 값을 넣어줄 수 있는 필드변수임.

저렇게 간단하게도 할 수 있고,

props:{

      msg1:{

        type:String,

        default:''

      },

      num:Number,

      age:Number

    }

이렇게 객체형식으로 세부적으로 옵션 정해주는 것도 가능 함.

default는 기본값임. 따로 값을 할당해 준게 없을 시.

다른 컴포넌트에서 값을 줄 때, 그냥 msg1="안녕하세요" 하면 저 문자열 그대로 주는거다.

근데 :msg1="hello"

이렇게 v-bind로 하면 hello라는 것의 값을 주는 거임.

뭐 예를 들어 자기 data() 안에 있는 hello : "안녕하세요"

props 자체가 속성을 추가하는거임. html 상의 속성을. 그렇게 생각하셈.

그래서 무조건 v-bind로 안해도 됨.

prop1:"하이요" 이거는 하이요 문자열 그대로

:prop1:"하이요" 이거는 data()등에나 어디에 있는 하이요 라는 변수 이름을 찾아서 그것의 값을 넣어줌.

물론 :prop1:" '하이요' " 이렇게 안에다 작은 따옴표로 묶어서 리터럴 전달 가능

 

props는 다른 컴포넌트에서 이 컴포넌트 접근할 때 용도이고,

data()는 자기 컴포넌트에서 쓸 용도이다.

 

근데 둘다 똑같이 사용가능 하긴 함.

props는 밖에서 값을 할당할 수 있는 data() 라고 생각하셈.

props는 왜 우리가 태그 쓸 때 style이나 width 그런 것 처럼 넣을 수 있음.

 

 

보면 알겠지만, vue는 다 객체형태로 전달됨.

 

 

 

그리고 export 할 때 객체 뿐 아니라,

export function add(num1, num2){

  return num1+num2;

}

기능 내보내는 것도 가능하긴 함.