👨🎓 데이터를 바인딩 할 땐 세가지 바인딩이 존재한다.
· 텍스트로 바인딩
· html 바인딩
· 속성 바인딩👨🎓 사용 할 공용 데이터
export default {
data() {
return {
msg : hello,
dynamicId : uniqueId
}
}
}뷰에서의 변수는 data() 안에 객체 형식으로 만들어 저장한다
mse : hello = let mse = "hello"가 됨.
텍스트 바인딩
<span>메세지: {{ msg }}</span>텍스트 바인딩은 간단하게 이렇게 사용하고 msg에 값이 새로 할당 될 때마다 새로고침 없이
값이 변경된다.
html 바인딩
<span v-html="파일명.html"></span>가끔 html 파일을 페이지 내에서 불러와야 하는 일이 발생하는데, 그때 html 파일을 제이쿼리의
ajax를 해주는 식으로 불러와야하는 번거러움을 vue에서는 v-html로 해결 했다.
속성 바인딩
속성바인딩은 v-bind or : 라는 코드로 Element에 사용됨
<div :id="dynamicId"></div> // 예시이렇게 넣게되면 data()의 dynamicId에 있는 uniqueId가 div에 id로 할당된다.
추가로 알면 좋은 점
· 불리언(Boolean) 속성
<button :disabled="isButtonDisabled">버튼</button>· isButtonDisabled에 true 값이 있는 경우, 버튼에 disabled 속성이 표기되는 반면
false일 경우 disabled자체가 빠져버림
· 동적 속성
디렉티브의 인자를 대괄호로 감싸서 JavaScript 표현식으로 사용가능하다.
<a :[attributeName]="url"> ... </a>· 수식어
<form @submit.prevent="submit함수명">...</form>form에서 post를 할 때 보통 event.preventDefault()를 하게 되는데
@submit.prevent를 해주게 되면 전달되는 함수에서는 위의 내용이 자동으로 처리된다.
· a태그에 자동으로 url이 바뀌어야 한다면 이렇게 가능
<a :href='주소'></a>· {{ }} 이중 중괄호를 표현 할 땐 삼항연산자로 if를 표현 할 수 있다.
· v-bind는 함수도 바인딩 할 수 있다.
· kebab-case 태그 해석
Vue는 PascalCase를 사용하여 등록된 컴포넌트에 대한 kebab-case 태그 해석을 지원합니다.
이것은 MyComponent로 등록된 컴포넌트가 해당으로 사용 될 수도 있습니다.
<MyComponent> 또는 <my-component>