Vue.js 문법정리

[속성/값 전달]

※Provide, Inject를 통해 중간 매개체를 건너뛰고 값전달 가능

※참조 사용하기 $ref : ref값을 통해서도 값을 전달=querySelector같은것

1. 부모컴포넌트 -> 자식컴포넌트 

2. 자식컴포넌트 -> 부모컴포넌트

템플릿문법

클래스와 스타일 바인딩

Eimt 이벤트 발생

[속성/값 전달]

※Provide, Inject를 통해 중간 매개체를 건너뛰고 값전달 가능

단, Provide를 사용하면 반응형으로 되기 어려움

위와같은경우는 Provide옵션으로 반응형으로 값 주기 어려움

그래서 반응성을 위해 computed를 사용해서 계산된데이터를 가져와서 value값으로 연결함

 

※참조 사용하기 $ref : ref값을 통해서도 값을 전달=querySelector같은것

- 대신 html랜더링 되고나서 사용가능(created단계에서는 불가, mounted단계에서 html연결된직후 가능)

 

ref를통해 접근하기

Hello컴포넌트 안의 hello라는 reference참조를 통해 들어간다. 그중에서도 good이라는 ref값을 가져다 쓴다.

---

1. 부모컴포넌트 -> 자식컴포넌트 

: props를 사용해서 데이터값을 주로 주고받는다.

props속성을 통한 속성 값 전달

속성 상속 자동화

값전달

//부모컴포넌트

<template>

‌<p>이름: {{name}}</p>
‌<UserDetail :nameOfChild="name"></UserDetail>
​​​​//v-bind는 :변수명으로 생략가능

</template>


<script>
export default{
‌data(){
‌‌return{
‌‌‌name: '뷰제이에스'
‌‌}
‌}

}

부모컴포넌트의 "name"이라는 변수(export default date()에서 정의된)를 자식 컴포넌트(UserDetail)의 nameOfChild라는 변수명으로 전달하겠다.

//자식컴포넌트(<UserDetail>)
<script>
export default{
‌props:['nameOfChild'],
‌data(){
‌‌return
‌}

}

 

2. 자식컴포넌트 -> 부모컴포넌트

 

 

---

템플릿문법

 

v-once :  {{ data }}처럼 데이터값 한번 박아두고 변경되어도 화면에서 바뀌지않게 하고싶을때

v-html : html태그값을 그대로 전달하고싶을때

v-bind(:속성값)) : class, style, value 등 속성(attribute)을 표현식에 동적으로 바인딩한다. 

v-on : 해당 element에 event listener를 연결한다. 축약하여 "@"로 표현한다. 

v-for : data()에있는 배열데이터를 반복문으로 출력할때 등 사용한다.

 

 

---

클래스와 스타일 바인딩

changeStyle을 하면 동적인 color값이 red로 바뀌므로 반영된다.

style부분을 아래와같이 스타일 바인딩을 할 수 있다.

---

Eimt 이벤트 발생